Ghost White to Dark Olive color palette

F8F7FFGhost White 74D5F7Sky 9699F3Cold Lips C57641Cork Wood 3A6C88Astral 3F3C12Dark Olive

About this palette

Ghost White to Dark Olive is a 6-color palette: #F8F7FF (Ghost White), #74D5F7 (Sky), #9699F3 (Cold Lips), #C57641 (Cork Wood), #3A6C88 (Astral), #3F3C12 (Dark Olive). It mixes white, blue, purple, orange, brown tones and feels cool overall. The strongest text pairing is #F8F7FF on #3F3C12 with a contrast ratio of 10.58:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ghost White	rgb(248, 247, 255)	hsl(248, 100%, 98%)
Sky	rgb(116, 213, 247)	hsl(196, 89%, 71%)
Cold Lips	rgb(150, 153, 243)	hsl(238, 79%, 77%)
Cork Wood	rgb(197, 118, 65)	hsl(24, 53%, 51%)
Astral	rgb(58, 108, 136)	hsl(202, 40%, 38%)
Dark Olive	rgb(63, 60, 18)	hsl(56, 56%, 16%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa10.58:1 Very good#F8F7FF on #3F3C12
Aa10.58:1 Very good#3F3C12 on #F8F7FF
Aa6.75:1 Good#74D5F7 on #3F3C12
Aa6.75:1 Good#3F3C12 on #74D5F7
Aa5.36:1 Good#F8F7FF on #3A6C88
Aa5.36:1 Good#3A6C88 on #F8F7FF
Aa4.37:1 Poor#9699F3 on #3F3C12
Aa4.37:1 Poor#3F3C12 on #9699F3

Color blindness preview

CSS variables

/* Ghost White to Dark Olive — https://swatchly.xyz/palette/f8f7ff-74d5f7-9699f3-c57641-3a6c88-3f3c12 */
:root {
  --ghost-white: #f8f7ff;
  --sky: #74d5f7;
  --cold-lips: #9699f3;
  --cork-wood: #c57641;
  --astral: #3a6c88;
  --dark-olive: #3f3c12;
}

Tailwind CSS v4

/* Ghost White to Dark Olive — https://swatchly.xyz/palette/f8f7ff-74d5f7-9699f3-c57641-3a6c88-3f3c12 */
@theme {
  --color-ghost-white: #f8f7ff;
  --color-ghost-white-50: #f8f7ff;
  --color-ghost-white-100: #ededf2;
  --color-ghost-white-200: #d9d9de;
  --color-ghost-white-300: #c2c1c8;
  --color-ghost-white-400: #a2a1a8;
  --color-ghost-white-500: #86868d;
  --color-ghost-white-600: #6c6b71;
  --color-ghost-white-700: #55545a;
  --color-ghost-white-800: #424247;
  --color-ghost-white-900: #333237;
  --color-ghost-white-950: #1f1f22;
  --color-sky: #74d5f7;
  --color-sky-50: #eefaff;
  --color-sky-100: #d8f4ff;
  --color-sky-200: #a7e7ff;
  --color-sky-300: #74d5f7;
  --color-sky-400: #58b3d3;
  --color-sky-500: #3097b7;
  --color-sky-600: #007a98;
  --color-sky-700: #006079;
  --color-sky-800: #004b5f;
  --color-sky-900: #003949;
  --color-sky-950: #00242f;
  --color-cold-lips: #9699f3;
  --color-cold-lips-50: #f4f5ff;
  --color-cold-lips-100: #e9ebff;
  --color-cold-lips-200: #d2d5ff;
  --color-cold-lips-300: #b8bcff;
  --color-cold-lips-400: #9699f3;
  --color-cold-lips-500: #7b7dd4;
  --color-cold-lips-600: #6262b5;
  --color-cold-lips-700: #4c4b97;
  --color-cold-lips-800: #3b397b;
  --color-cold-lips-900: #2c2a62;
  --color-cold-lips-950: #1a1941;
  --color-cork-wood: #c57641;
  --color-cork-wood-50: #fff4ed;
  --color-cork-wood-100: #ffe9db;
  --color-cork-wood-200: #ffd0b3;
  --color-cork-wood-300: #fab388;
  --color-cork-wood-400: #df9261;
  --color-cork-wood-500: #c57641;
  --color-cork-wood-600: #a65a24;
  --color-cork-wood-700: #89440a;
  --color-cork-wood-800: #6d3300;
  --color-cork-wood-900: #552600;
  --color-cork-wood-950: #361600;
  --color-astral: #3a6c88;
  --color-astral-50: #ebf7ff;
  --color-astral-100: #d4efff;
  --color-astral-200: #b4dcf3;
  --color-astral-300: #98c4df;
  --color-astral-400: #73a4c1;
  --color-astral-500: #5588a5;
  --color-astral-600: #3a6c88;
  --color-astral-700: #29566e;
  --color-astral-800: #1c4358;
  --color-astral-900: #123446;
  --color-astral-950: #08202d;
  --color-dark-olive: #3f3c12;
  --color-dark-olive-50: #f8f7de;
  --color-dark-olive-100: #eeedd1;
  --color-dark-olive-200: #dbdab8;
  --color-dark-olive-300: #c5c39d;
  --color-dark-olive-400: #a8a67c;
  --color-dark-olive-500: #8e8c61;
  --color-dark-olive-600: #757249;
  --color-dark-olive-700: #5f5d36;
  --color-dark-olive-800: #4d4b28;
  --color-dark-olive-900: #3f3c12;
  --color-dark-olive-950: #28260f;
}