Fairy Dust to Fish Boy Color Palette

About this palette

Fairy Dust to Fish Boy is a 5-color cool palette: #FFE8F9 (Fairy Dust), #7CA400 (Green Envy), #5D1A46 (Soul Anchor), #3D6D00 (Forest Empress), #00DBD9 (Fish Boy). It mixes white, green, red, turquoise tones and feels cool overall. The strongest text pairing is #FFE8F9 on #5D1A46 with a contrast ratio of 10.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fairy Dust	rgb(255, 232, 249)	hsl(316, 100%, 95%)
Green Envy	rgb(124, 164, 0)	hsl(75, 100%, 32%)
Soul Anchor	rgb(93, 26, 70)	hsl(321, 56%, 23%)
Forest Empress	rgb(61, 109, 0)	hsl(86, 100%, 21%)
Fish Boy	rgb(0, 219, 217)	hsl(179, 100%, 43%)

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.67:1 Very good#FFE8F9 on #5D1A46
Aa10.67:1 Very good#5D1A46 on #FFE8F9
Aa7.13:1 Very good#5D1A46 on #00DBD9
Aa7.13:1 Very good#00DBD9 on #5D1A46
Aa5.36:1 Good#FFE8F9 on #3D6D00
Aa5.36:1 Good#3D6D00 on #FFE8F9
Aa4.21:1 Poor#7CA400 on #5D1A46
Aa4.21:1 Poor#5D1A46 on #7CA400

Color blindness preview

CSS variables

/* Fairy Dust to Fish Boy — https://swatchly.xyz/palette/ffe8f9-7ca400-5d1a46-3d6d00-00dbd9 */
:root {
  --fairy-dust: #ffe8f9;
  --green-envy: #7ca400;
  --soul-anchor: #5d1a46;
  --forest-empress: #3d6d00;
  --fish-boy: #00dbd9;
}

Tailwind CSS v4

/* Fairy Dust to Fish Boy — https://swatchly.xyz/palette/ffe8f9-7ca400-5d1a46-3d6d00-00dbd9 */
@theme {
  --color-fairy-dust: #ffe8f9;
  --color-fairy-dust-50: #fff6fd;
  --color-fairy-dust-100: #ffe8f9;
  --color-fairy-dust-200: #e6d6e2;
  --color-fairy-dust-300: #d0becb;
  --color-fairy-dust-400: #b19dac;
  --color-fairy-dust-500: #958090;
  --color-fairy-dust-600: #796674;
  --color-fairy-dust-700: #614f5c;
  --color-fairy-dust-800: #4c3d48;
  --color-fairy-dust-900: #3b2e38;
  --color-fairy-dust-950: #251c23;
  --color-green-envy: #7ca400;
  --color-green-envy-50: #efffd6;
  --color-green-envy-100: #e1fcb4;
  --color-green-envy-200: #cded96;
  --color-green-envy-300: #b6da74;
  --color-green-envy-400: #96bd43;
  --color-green-envy-500: #7ca400;
  --color-green-envy-600: #638400;
  --color-green-envy-700: #4e6800;
  --color-green-envy-800: #3c5100;
  --color-green-envy-900: #2d3e00;
  --color-green-envy-950: #1a2600;
  --color-soul-anchor: #5d1a46;
  --color-soul-anchor-50: #fff0f8;
  --color-soul-anchor-100: #ffe2f1;
  --color-soul-anchor-200: #ffc3e4;
  --color-soul-anchor-300: #eda9d0;
  --color-soul-anchor-400: #d187b3;
  --color-soul-anchor-500: #b76c98;
  --color-soul-anchor-600: #9a537e;
  --color-soul-anchor-700: #813f67;
  --color-soul-anchor-800: #6a2f54;
  --color-soul-anchor-900: #5d1a46;
  --color-soul-anchor-950: #39142b;
  --color-forest-empress: #3d6d00;
  --color-forest-empress-50: #e5ffd4;
  --color-forest-empress-100: #d5f8be;
  --color-forest-empress-200: #c0e8a4;
  --color-forest-empress-300: #a7d487;
  --color-forest-empress-400: #86b860;
  --color-forest-empress-500: #6b9d41;
  --color-forest-empress-600: #528325;
  --color-forest-empress-700: #3d6d00;
  --color-forest-empress-800: #2f5500;
  --color-forest-empress-900: #234200;
  --color-forest-empress-950: #142a00;
  --color-fish-boy: #00dbd9;
  --color-fish-boy-50: #d2fffd;
  --color-fish-boy-100: #a4fdfb;
  --color-fish-boy-200: #7cecea;
  --color-fish-boy-300: #00dbd9;
  --color-fish-boy-400: #00b8b6;
  --color-fish-boy-500: #009998;
  --color-fish-boy-600: #007b7a;
  --color-fish-boy-700: #006261;
  --color-fish-boy-800: #004d4c;
  --color-fish-boy-900: #003b3b;
  --color-fish-boy-950: #002525;
}