Evergreen to Cheddar color palette

About this palette

Evergreen to Cheddar is a 5-color cool palette: #005A4A (Evergreen), #FFC9D3 (Cotton Candy Comet), #2385CE (Way Beyond the Blue), #00413B (Botanical Night), #F39A00 (Cheddar). It mixes turquoise, pink, blue, orange tones and feels cool overall. The strongest text pairing is #FFC9D3 on #00413B with a contrast ratio of 8.00:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Evergreenrgb(0, 90, 74)hsl(169, 100%, 18%)
Cotton Candy Cometrgb(255, 201, 211)hsl(349, 100%, 89%)
Way Beyond the Bluergb(35, 133, 206)hsl(206, 71%, 47%)
Botanical Nightrgb(0, 65, 59)hsl(174, 100%, 13%)
Cheddarrgb(243, 154, 0)hsl(38, 100%, 48%)

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.

  • Aa8.00:1 Very good#FFC9D3 on #00413B
  • Aa8.00:1 Very good#00413B on #FFC9D3
  • Aa5.68:1 Good#005A4A on #FFC9D3
  • Aa5.68:1 Good#FFC9D3 on #005A4A
  • Aa5.19:1 Good#00413B on #F39A00
  • Aa5.19:1 Good#F39A00 on #00413B
  • Aa3.68:1 Poor#005A4A on #F39A00
  • Aa3.68:1 Poor#F39A00 on #005A4A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Evergreen to Cheddar — https://swatchly.xyz/palette/005a4a-ffc9d3-2385ce-00413b-f39a00 */
:root {
  --evergreen: #005a4a;
  --cotton-candy-comet: #ffc9d3;
  --way-beyond-the-blue: #2385ce;
  --botanical-night: #00413b;
  --cheddar: #f39a00;
}

Tailwind CSS v4

/* Evergreen to Cheddar — https://swatchly.xyz/palette/005a4a-ffc9d3-2385ce-00413b-f39a00 */
@theme {
  --color-evergreen: #005a4a;
  --color-evergreen-50: #d9fff3;
  --color-evergreen-100: #caf6e9;
  --color-evergreen-200: #aee3d4;
  --color-evergreen-300: #8eccbb;
  --color-evergreen-400: #67ac9a;
  --color-evergreen-500: #478f7d;
  --color-evergreen-600: #2b7262;
  --color-evergreen-700: #005a4a;
  --color-evergreen-800: #084639;
  --color-evergreen-900: #02362c;
  --color-evergreen-950: #00221a;
  --color-cotton-candy-comet: #ffc9d3;
  --color-cotton-candy-comet-50: #fff3f5;
  --color-cotton-candy-comet-100: #ffe5ea;
  --color-cotton-candy-comet-200: #ffc9d3;
  --color-cotton-candy-comet-300: #e2b5bd;
  --color-cotton-candy-comet-400: #c4949d;
  --color-cotton-candy-comet-500: #a87881;
  --color-cotton-candy-comet-600: #8c5d67;
  --color-cotton-candy-comet-700: #714851;
  --color-cotton-candy-comet-800: #5a363e;
  --color-cotton-candy-comet-900: #47292f;
  --color-cotton-candy-comet-950: #2e181d;
  --color-way-beyond-the-blue: #2385ce;
  --color-way-beyond-the-blue-50: #ebf5ff;
  --color-way-beyond-the-blue-100: #d7ecff;
  --color-way-beyond-the-blue-200: #b0d9ff;
  --color-way-beyond-the-blue-300: #7fc3ff;
  --color-way-beyond-the-blue-400: #4aa2eb;
  --color-way-beyond-the-blue-500: #2385ce;
  --color-way-beyond-the-blue-600: #006bae;
  --color-way-beyond-the-blue-700: #00558b;
  --color-way-beyond-the-blue-800: #00426f;
  --color-way-beyond-the-blue-900: #003357;
  --color-way-beyond-the-blue-950: #00203a;
  --color-botanical-night: #00413b;
  --color-botanical-night-50: #defdf8;
  --color-botanical-night-100: #d1f4ee;
  --color-botanical-night-200: #b8e2db;
  --color-botanical-night-300: #9dccc5;
  --color-botanical-night-400: #79aea7;
  --color-botanical-night-500: #5d948c;
  --color-botanical-night-600: #447a72;
  --color-botanical-night-700: #30635c;
  --color-botanical-night-800: #214f4a;
  --color-botanical-night-900: #00413b;
  --color-botanical-night-950: #0a2825;
  --color-cheddar: #f39a00;
  --color-cheddar-50: #fffaf4;
  --color-cheddar-100: #fff1e2;
  --color-cheddar-200: #ffdbb5;
  --color-cheddar-300: #ffc078;
  --color-cheddar-400: #f39a00;
  --color-cheddar-500: #ca7f00;
  --color-cheddar-600: #a36600;
  --color-cheddar-700: #814f00;
  --color-cheddar-800: #643d00;
  --color-cheddar-900: #4c2d00;
  --color-cheddar-950: #2f1a00;
}

Similar palettes