Start generating

Ghost White to Lost in Space color palette

F9F7FFGhost WhiteA3DDFFDropletC187EDFake LoveAC5E09Ginger526300Serrano Pepper003B67Lost in Space
Open in generator Export PNG, PDF, ASE…

About this palette

Ghost White to Lost in Space is a 6-color cool palette: #F9F7FF (Ghost White), #A3DDFF (Droplet), #C187ED (Fake Love), #AC5E09 (Ginger), #526300 (Serrano Pepper), #003B67 (Lost in Space). It mixes white, blue, purple, brown, green tones and feels cool overall. The strongest text pairing is #F9F7FF on #003B67 with a contrast ratio of 10.86:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Ghost Whitergb(249, 247, 255)hsl(255, 100%, 98%)
Dropletrgb(163, 221, 255)hsl(202, 100%, 82%)
Fake Lovergb(193, 135, 237)hsl(274, 74%, 73%)
Gingerrgb(172, 94, 9)hsl(31, 90%, 35%)
Serrano Pepperrgb(82, 99, 0)hsl(70, 100%, 19%)
Lost in Spacergb(0, 59, 103)hsl(206, 100%, 20%)

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.86:1 Very good#F9F7FF on #003B67
  • Aa10.86:1 Very good#003B67 on #F9F7FF
  • Aa7.88:1 Very good#A3DDFF on #003B67
  • Aa7.88:1 Very good#003B67 on #A3DDFF
  • Aa6.29:1 Good#F9F7FF on #526300
  • Aa6.29:1 Good#526300 on #F9F7FF
  • Aa4.56:1 Good#A3DDFF on #526300
  • Aa4.56:1 Good#526300 on #A3DDFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ghost White to Lost in Space — https://swatchly.xyz/palette/f9f7ff-a3ddff-c187ed-ac5e09-526300-003b67 */
:root {
  --ghost-white: #f9f7ff;
  --droplet: #a3ddff;
  --fake-love: #c187ed;
  --ginger: #ac5e09;
  --serrano-pepper: #526300;
  --lost-in-space: #003b67;
}

Tailwind CSS v4

/* Ghost White to Lost in Space — https://swatchly.xyz/palette/f9f7ff-a3ddff-c187ed-ac5e09-526300-003b67 */
@theme {
  --color-ghost-white: #f9f7ff;
  --color-ghost-white-50: #f9f7ff;
  --color-ghost-white-100: #eeedf2;
  --color-ghost-white-200: #dad9de;
  --color-ghost-white-300: #c3c1c8;
  --color-ghost-white-400: #a3a1a8;
  --color-ghost-white-500: #87858c;
  --color-ghost-white-600: #6c6b71;
  --color-ghost-white-700: #56545a;
  --color-ghost-white-800: #434147;
  --color-ghost-white-900: #333236;
  --color-ghost-white-950: #1f1f22;
  --color-droplet: #a3ddff;
  --color-droplet-50: #e6f6ff;
  --color-droplet-100: #d0edff;
  --color-droplet-200: #a3ddff;
  --color-droplet-300: #95c6e3;
  --color-droplet-400: #71a7c6;
  --color-droplet-500: #548cac;
  --color-droplet-600: #3b7290;
  --color-droplet-700: #285b76;
  --color-droplet-800: #1a485f;
  --color-droplet-900: #0f374b;
  --color-droplet-950: #062231;
  --color-fake-love: #c187ed;
  --color-fake-love-50: #f9f3ff;
  --color-fake-love-100: #f4e7ff;
  --color-fake-love-200: #e8cdff;
  --color-fake-love-300: #dbaeff;
  --color-fake-love-400: #c187ed;
  --color-fake-love-500: #a46bce;
  --color-fake-love-600: #8850af;
  --color-fake-love-700: #6e3a92;
  --color-fake-love-800: #582976;
  --color-fake-love-900: #441d5e;
  --color-fake-love-950: #2b0f3e;
  --color-ginger: #ac5e09;
  --color-ginger-50: #fff2e9;
  --color-ginger-100: #ffe8d7;
  --color-ginger-200: #ffd0ae;
  --color-ginger-300: #fbb47d;
  --color-ginger-400: #e19354;
  --color-ginger-500: #c87831;
  --color-ginger-600: #ac5e09;
  --color-ginger-700: #8a4900;
  --color-ginger-800: #6d3800;
  --color-ginger-900: #542a00;
  --color-ginger-950: #361900;
  --color-serrano-pepper: #526300;
  --color-serrano-pepper-50: #effcce;
  --color-serrano-pepper-100: #e4f3bf;
  --color-serrano-pepper-200: #d0e1a4;
  --color-serrano-pepper-300: #bacd87;
  --color-serrano-pepper-400: #9baf60;
  --color-serrano-pepper-500: #809441;
  --color-serrano-pepper-600: #677925;
  --color-serrano-pepper-700: #526300;
  --color-serrano-pepper-800: #404d00;
  --color-serrano-pepper-900: #303c00;
  --color-serrano-pepper-950: #1e2500;
  --color-lost-in-space: #003b67;
  --color-lost-in-space-50: #eef6ff;
  --color-lost-in-space-100: #dcedff;
  --color-lost-in-space-200: #b8dcff;
  --color-lost-in-space-300: #98c6f3;
  --color-lost-in-space-400: #75a8d9;
  --color-lost-in-space-500: #598dbf;
  --color-lost-in-space-600: #4173a3;
  --color-lost-in-space-700: #2e5d89;
  --color-lost-in-space-800: #1f4b72;
  --color-lost-in-space-900: #003b67;
  --color-lost-in-space-950: #09263f;
}

Similar palettes