Kiwi Kiss to Medium Roast Color Palette

About this palette

Kiwi Kiss to Medium Roast is a 4-color cool palette: #EDFFC0 (Kiwi Kiss), #5E4484 (Lords of the Night), #00B1FC (Hawaii Morning), #381F00 (Medium Roast). It mixes green, purple, blue, brown tones and feels cool overall. The strongest text pairing is #EDFFC0 on #381F00 with a contrast ratio of 14.42:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kiwi Kiss	rgb(237, 255, 192)	hsl(77, 100%, 88%)
Lords of the Night	rgb(94, 68, 132)	hsl(264, 32%, 39%)
Hawaii Morning	rgb(0, 177, 252)	hsl(198, 100%, 49%)
Medium Roast	rgb(56, 31, 0)	hsl(33, 100%, 11%)

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.

Aa14.42:1 Super#EDFFC0 on #381F00
Aa14.42:1 Super#381F00 on #EDFFC0
Aa7.46:1 Very good#EDFFC0 on #5E4484
Aa7.46:1 Very good#5E4484 on #EDFFC0
Aa6.37:1 Good#00B1FC on #381F00
Aa6.37:1 Good#381F00 on #00B1FC
Aa3.30:1 Poor#5E4484 on #00B1FC
Aa3.30:1 Poor#00B1FC on #5E4484

Color blindness preview

CSS variables

/* Kiwi Kiss to Medium Roast — https://swatchly.xyz/palette/edffc0-5e4484-00b1fc-381f00 */
:root {
  --kiwi-kiss: #edffc0;
  --lords-of-the-night: #5e4484;
  --hawaii-morning: #00b1fc;
  --medium-roast: #381f00;
}

Tailwind CSS v4

/* Kiwi Kiss to Medium Roast — https://swatchly.xyz/palette/edffc0-5e4484-00b1fc-381f00 */
@theme {
  --color-kiwi-kiss: #edffc0;
  --color-kiwi-kiss-50: #edffc0;
  --color-kiwi-kiss-100: #e6f1cc;
  --color-kiwi-kiss-200: #d1dfb2;
  --color-kiwi-kiss-300: #bac995;
  --color-kiwi-kiss-400: #9aaa71;
  --color-kiwi-kiss-500: #7f8e54;
  --color-kiwi-kiss-600: #65733b;
  --color-kiwi-kiss-700: #4f5c27;
  --color-kiwi-kiss-800: #3d4819;
  --color-kiwi-kiss-900: #2e370f;
  --color-kiwi-kiss-950: #1c2306;
  --color-lords-of-the-night: #5e4484;
  --color-lords-of-the-night-50: #f7f3ff;
  --color-lords-of-the-night-100: #efe6ff;
  --color-lords-of-the-night-200: #dfcdff;
  --color-lords-of-the-night-300: #cab3f2;
  --color-lords-of-the-night-400: #ab92d6;
  --color-lords-of-the-night-500: #9076ba;
  --color-lords-of-the-night-600: #755b9c;
  --color-lords-of-the-night-700: #5e4484;
  --color-lords-of-the-night-800: #493568;
  --color-lords-of-the-night-900: #392752;
  --color-lords-of-the-night-950: #241736;
  --color-hawaii-morning: #00b1fc;
  --color-hawaii-morning-50: #eef8ff;
  --color-hawaii-morning-100: #dcf1ff;
  --color-hawaii-morning-200: #b4e1ff;
  --color-hawaii-morning-300: #81ceff;
  --color-hawaii-morning-400: #00b1fc;
  --color-hawaii-morning-500: #0093d2;
  --color-hawaii-morning-600: #0076aa;
  --color-hawaii-morning-700: #005e88;
  --color-hawaii-morning-800: #00496b;
  --color-hawaii-morning-900: #003853;
  --color-hawaii-morning-950: #002235;
  --color-medium-roast: #381f00;
  --color-medium-roast-50: #fff3e7;
  --color-medium-roast-100: #fce7d2;
  --color-medium-roast-200: #ebd3ba;
  --color-medium-roast-300: #d7bb9f;
  --color-medium-roast-400: #ba9b7c;
  --color-medium-roast-500: #a08161;
  --color-medium-roast-600: #856849;
  --color-medium-roast-700: #6e5337;
  --color-medium-roast-800: #594228;
  --color-medium-roast-900: #48341e;
  --color-medium-roast-950: #381f00;
}