Evergreen to Kitten’s Eye Color Palette

About this palette

Evergreen to Kitten’s Eye is a 4-color cool, gradient palette: #005D43 (Evergreen), #3A787D (Diver’s Eden), #6391B9 (Heavenly Sky), #8CABF8 (Kitten’s Eye). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #005D43 on #8CABF8 with a contrast ratio of 3.51:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Evergreen	rgb(0, 93, 67)	hsl(163, 100%, 18%)
Diver’s Eden	rgb(58, 120, 125)	hsl(184, 37%, 36%)
Heavenly Sky	rgb(99, 145, 185)	hsl(208, 38%, 56%)
Kitten’s Eye	rgb(140, 171, 248)	hsl(223, 89%, 76%)

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.

Aa3.51:1 Poor#005D43 on #8CABF8
Aa3.51:1 Poor#8CABF8 on #005D43

Color blindness preview

CSS variables

/* Evergreen to Kitten’s Eye — https://swatchly.xyz/palette/005d43-3a787d-6391b9-8cabf8 */
:root {
  --evergreen: #005d43;
  --diver-s-eden: #3a787d;
  --heavenly-sky: #6391b9;
  --kitten-s-eye: #8cabf8;
}

Tailwind CSS v4

/* Evergreen to Kitten’s Eye — https://swatchly.xyz/palette/005d43-3a787d-6391b9-8cabf8 */
@theme {
  --color-evergreen: #005d43;
  --color-evergreen-50: #dbffef;
  --color-evergreen-100: #caf7e3;
  --color-evergreen-200: #ade5cc;
  --color-evergreen-300: #8eceb3;
  --color-evergreen-400: #67af91;
  --color-evergreen-500: #479275;
  --color-evergreen-600: #2b755a;
  --color-evergreen-700: #005d43;
  --color-evergreen-800: #064834;
  --color-evergreen-900: #013827;
  --color-evergreen-950: #002317;
  --color-diver-s-eden: #3a787d;
  --color-diver-s-eden-50: #dcfcff;
  --color-diver-s-eden-100: #cef4f7;
  --color-diver-s-eden-200: #b4e2e5;
  --color-diver-s-eden-300: #98cdd1;
  --color-diver-s-eden-400: #73aeb3;
  --color-diver-s-eden-500: #559398;
  --color-diver-s-eden-600: #3a787d;
  --color-diver-s-eden-700: #276064;
  --color-diver-s-eden-800: #174b50;
  --color-diver-s-eden-900: #0d3a3e;
  --color-diver-s-eden-950: #042527;
  --color-heavenly-sky: #6391b9;
  --color-heavenly-sky-50: #eff7ff;
  --color-heavenly-sky-100: #dff0ff;
  --color-heavenly-sky-200: #bddfff;
  --color-heavenly-sky-300: #a2caee;
  --color-heavenly-sky-400: #7facd3;
  --color-heavenly-sky-500: #6391b9;
  --color-heavenly-sky-600: #48759b;
  --color-heavenly-sky-700: #335d7f;
  --color-heavenly-sky-800: #234867;
  --color-heavenly-sky-900: #183751;
  --color-heavenly-sky-950: #0b2234;
  --color-kitten-s-eye: #8cabf8;
  --color-kitten-s-eye-50: #f7f9ff;
  --color-kitten-s-eye-100: #ecf2ff;
  --color-kitten-s-eye-200: #d2e0ff;
  --color-kitten-s-eye-300: #b4cbff;
  --color-kitten-s-eye-400: #8cabf8;
  --color-kitten-s-eye-500: #708dd7;
  --color-kitten-s-eye-600: #5470b7;
  --color-kitten-s-eye-700: #3e5798;
  --color-kitten-s-eye-800: #2d427b;
  --color-kitten-s-eye-900: #203161;
  --color-kitten-s-eye-950: #111d3f;
}