Start generating

Sage Sensation to Nocturnal Expedition color palette

ADDF81Sage Sensation66BCBBCastawayC078A0Romanov Mauve6A8E4FHomegrown912965Pink Horror004F57Nocturnal Expedition
Open in generator Export PNG, PDF, ASE…

About this palette

Sage Sensation to Nocturnal Expedition is a 6-color cool palette: #ADDF81 (Sage Sensation), #66BCBB (Castaway), #C078A0 (Romanov Mauve), #6A8E4F (Homegrown), #912965 (Pink Horror), #004F57 (Nocturnal Expedition). It mixes green, turquoise, pink, red tones and feels cool overall. The strongest text pairing is #ADDF81 on #004F57 with a contrast ratio of 6.05:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sage Sensationrgb(173, 223, 129)hsl(92, 59%, 69%)
Castawayrgb(102, 188, 187)hsl(179, 39%, 57%)
Romanov Mauvergb(192, 120, 160)hsl(327, 36%, 61%)
Homegrownrgb(106, 142, 79)hsl(94, 29%, 43%)
Pink Horrorrgb(145, 41, 101)hsl(325, 56%, 36%)
Nocturnal Expeditionrgb(0, 79, 87)hsl(186, 100%, 17%)

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.

  • Aa6.05:1 Good#ADDF81 on #004F57
  • Aa6.05:1 Good#004F57 on #ADDF81
  • Aa5.04:1 Good#ADDF81 on #912965
  • Aa5.04:1 Good#912965 on #ADDF81
  • Aa4.20:1 Poor#66BCBB on #004F57
  • Aa4.20:1 Poor#004F57 on #66BCBB
  • Aa3.50:1 Poor#66BCBB on #912965
  • Aa3.50:1 Poor#912965 on #66BCBB

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sage Sensation to Nocturnal Expedition — https://swatchly.xyz/palette/addf81-66bcbb-c078a0-6a8e4f-912965-004f57 */
:root {
  --sage-sensation: #addf81;
  --castaway: #66bcbb;
  --romanov-mauve: #c078a0;
  --homegrown: #6a8e4f;
  --pink-horror: #912965;
  --nocturnal-expedition: #004f57;
}

Tailwind CSS v4

/* Sage Sensation to Nocturnal Expedition — https://swatchly.xyz/palette/addf81-66bcbb-c078a0-6a8e4f-912965-004f57 */
@theme {
  --color-sage-sensation: #addf81;
  --color-sage-sensation-50: #dbfac2;
  --color-sage-sensation-100: #cdefb1;
  --color-sage-sensation-200: #addf81;
  --color-sage-sensation-300: #9cc876;
  --color-sage-sensation-400: #7dab52;
  --color-sage-sensation-500: #639134;
  --color-sage-sensation-600: #4c7718;
  --color-sage-sensation-700: #396100;
  --color-sage-sensation-800: #2d4d00;
  --color-sage-sensation-900: #213b00;
  --color-sage-sensation-950: #132500;
  --color-castaway: #66bcbb;
  --color-castaway-50: #e4fffe;
  --color-castaway-100: #ccfbfa;
  --color-castaway-200: #b1ebea;
  --color-castaway-300: #94d8d7;
  --color-castaway-400: #66bcbb;
  --color-castaway-500: #479e9d;
  --color-castaway-600: #258180;
  --color-castaway-700: #046767;
  --color-castaway-800: #005050;
  --color-castaway-900: #003d3d;
  --color-castaway-950: #002525;
  --color-romanov-mauve: #c078a0;
  --color-romanov-mauve-50: #fff4f9;
  --color-romanov-mauve-100: #ffe8f4;
  --color-romanov-mauve-200: #ffcee7;
  --color-romanov-mauve-300: #f3b4d5;
  --color-romanov-mauve-400: #d993b9;
  --color-romanov-mauve-500: #c078a0;
  --color-romanov-mauve-600: #a05c83;
  --color-romanov-mauve-700: #834469;
  --color-romanov-mauve-800: #693252;
  --color-romanov-mauve-900: #52233f;
  --color-romanov-mauve-950: #351327;
  --color-homegrown: #6a8e4f;
  --color-homegrown-50: #e6fdd7;
  --color-homegrown-100: #daf3c9;
  --color-homegrown-200: #c2e0ae;
  --color-homegrown-300: #a8ca91;
  --color-homegrown-400: #86aa6c;
  --color-homegrown-500: #6a8e4f;
  --color-homegrown-600: #527437;
  --color-homegrown-700: #3e5d25;
  --color-homegrown-800: #2f4918;
  --color-homegrown-900: #22390f;
  --color-homegrown-950: #142406;
  --color-pink-horror: #912965;
  --color-pink-horror-50: #fff1f7;
  --color-pink-horror-100: #ffe2ef;
  --color-pink-horror-200: #ffc5e0;
  --color-pink-horror-300: #ff9fcf;
  --color-pink-horror-400: #e47ab1;
  --color-pink-horror-500: #c95d96;
  --color-pink-horror-600: #aa437c;
  --color-pink-horror-700: #912965;
  --color-pink-horror-800: #731e4f;
  --color-pink-horror-900: #5c123d;
  --color-pink-horror-950: #3c0727;
  --color-nocturnal-expedition: #004f57;
  --color-nocturnal-expedition-50: #e0fbff;
  --color-nocturnal-expedition-100: #ccf4f9;
  --color-nocturnal-expedition-200: #b2e1e8;
  --color-nocturnal-expedition-300: #96cdd4;
  --color-nocturnal-expedition-400: #71aeb7;
  --color-nocturnal-expedition-500: #54939c;
  --color-nocturnal-expedition-600: #397981;
  --color-nocturnal-expedition-700: #256269;
  --color-nocturnal-expedition-800: #004f57;
  --color-nocturnal-expedition-900: #0b3c42;
  --color-nocturnal-expedition-950: #03262a;
}

Similar palettes