Ghost White to Secret Passage color palette

F7F8FFGhost White A0A7FFWidowmaker A78E31Luxor Gold 654C0FVery Coffee 3A2B00Secret Passage

About this palette

Ghost White to Secret Passage is a 5-color warm, earthy, vintage palette: #F7F8FF (Ghost White), #A0A7FF (Widowmaker), #A78E31 (Luxor Gold), #654C0F (Very Coffee), #3A2B00 (Secret Passage). It mixes white, purple, yellow, brown tones and feels warm overall. The strongest text pairing is #F7F8FF on #3A2B00 with a contrast ratio of 13.00:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ghost White	rgb(247, 248, 255)	hsl(233, 100%, 98%)
Widowmaker	rgb(160, 167, 255)	hsl(236, 100%, 81%)
Luxor Gold	rgb(167, 142, 49)	hsl(47, 55%, 42%)
Very Coffee	rgb(101, 76, 15)	hsl(43, 74%, 23%)
Secret Passage	rgb(58, 43, 0)	hsl(44, 100%, 11%)

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.

Aa13.00:1 Super#F7F8FF on #3A2B00
Aa13.00:1 Super#3A2B00 on #F7F8FF
Aa7.64:1 Very good#F7F8FF on #654C0F
Aa7.64:1 Very good#654C0F on #F7F8FF
Aa6.21:1 Good#A0A7FF on #3A2B00
Aa6.21:1 Good#3A2B00 on #A0A7FF
Aa4.30:1 Poor#A78E31 on #3A2B00
Aa4.30:1 Poor#3A2B00 on #A78E31

Color blindness preview

CSS variables

/* Ghost White to Secret Passage — https://swatchly.xyz/palette/f7f8ff-a0a7ff-a78e31-654c0f-3a2b00 */
:root {
  --ghost-white: #f7f8ff;
  --widowmaker: #a0a7ff;
  --luxor-gold: #a78e31;
  --very-coffee: #654c0f;
  --secret-passage: #3a2b00;
}

Tailwind CSS v4

/* Ghost White to Secret Passage — https://swatchly.xyz/palette/f7f8ff-a0a7ff-a78e31-654c0f-3a2b00 */
@theme {
  --color-ghost-white: #f7f8ff;
  --color-ghost-white-50: #f7f8ff;
  --color-ghost-white-100: #edeef2;
  --color-ghost-white-200: #d9d9de;
  --color-ghost-white-300: #c1c2c8;
  --color-ghost-white-400: #a1a2a8;
  --color-ghost-white-500: #85868c;
  --color-ghost-white-600: #6a6b71;
  --color-ghost-white-700: #54555a;
  --color-ghost-white-800: #414247;
  --color-ghost-white-900: #323236;
  --color-ghost-white-950: #1f1f22;
  --color-widowmaker: #a0a7ff;
  --color-widowmaker-50: #f9faff;
  --color-widowmaker-100: #f0f2ff;
  --color-widowmaker-200: #dbe0ff;
  --color-widowmaker-300: #c3c9ff;
  --color-widowmaker-400: #a0a7ff;
  --color-widowmaker-500: #8389dd;
  --color-widowmaker-600: #676bbd;
  --color-widowmaker-700: #4f529d;
  --color-widowmaker-800: #3c3d7f;
  --color-widowmaker-900: #2c2d64;
  --color-widowmaker-950: #191940;
  --color-luxor-gold: #a78e31;
  --color-luxor-gold-50: #fff7db;
  --color-luxor-gold-100: #feefbc;
  --color-luxor-gold-200: #eedc9f;
  --color-luxor-gold-300: #dcc780;
  --color-luxor-gold-400: #c0a956;
  --color-luxor-gold-500: #a78e31;
  --color-luxor-gold-600: #8a7103;
  --color-luxor-gold-700: #6d5900;
  --color-luxor-gold-800: #554500;
  --color-luxor-gold-900: #413400;
  --color-luxor-gold-950: #292000;
  --color-very-coffee: #654c0f;
  --color-very-coffee-50: #fff4de;
  --color-very-coffee-100: #fbe9c6;
  --color-very-coffee-200: #e9d4a9;
  --color-very-coffee-300: #d4bc8b;
  --color-very-coffee-400: #b69b65;
  --color-very-coffee-500: #997f47;
  --color-very-coffee-600: #7d642d;
  --color-very-coffee-700: #654c0f;
  --color-very-coffee-800: #4f3b0d;
  --color-very-coffee-900: #3d2d05;
  --color-very-coffee-950: #271b02;
  --color-secret-passage: #3a2b00;
  --color-secret-passage-50: #fff4dc;
  --color-secret-passage-100: #f6eacf;
  --color-secret-passage-200: #e4d6b6;
  --color-secret-passage-300: #cfc09b;
  --color-secret-passage-400: #b09f76;
  --color-secret-passage-500: #938259;
  --color-secret-passage-600: #776740;
  --color-secret-passage-700: #5e502c;
  --color-secret-passage-800: #483c1d;
  --color-secret-passage-900: #3a2b00;
  --color-secret-passage-950: #211a08;
}