Kiwi Kiss to Shadow Play color palette

ECFFC5Kiwi Kiss B5B3FFPurple Illusion C37100Caramel Coating 4746B3Royal Nightcore 311700Shadow Play

About this palette

Kiwi Kiss to Shadow Play is a 5-color cool, earthy palette: #ECFFC5 (Kiwi Kiss), #B5B3FF (Purple Illusion), #C37100 (Caramel Coating), #4746B3 (Royal Nightcore), #311700 (Shadow Play). It mixes green, purple, orange, brown tones and feels cool overall. The strongest text pairing is #ECFFC5 on #311700 with a contrast ratio of 15.70:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kiwi Kiss	rgb(236, 255, 197)	hsl(80, 100%, 89%)
Purple Illusion	rgb(181, 179, 255)	hsl(242, 100%, 85%)
Caramel Coating	rgb(195, 113, 0)	hsl(35, 100%, 38%)
Royal Nightcore	rgb(71, 70, 179)	hsl(241, 44%, 49%)
Shadow Play	rgb(49, 23, 0)	hsl(28, 100%, 10%)

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.

Aa15.70:1 Super#ECFFC5 on #311700
Aa15.70:1 Super#311700 on #ECFFC5
Aa8.66:1 Very good#B5B3FF on #311700
Aa8.66:1 Very good#311700 on #B5B3FF
Aa7.04:1 Very good#ECFFC5 on #4746B3
Aa7.04:1 Very good#4746B3 on #ECFFC5
Aa4.53:1 Good#C37100 on #311700
Aa4.53:1 Good#311700 on #C37100

Color blindness preview

CSS variables

/* Kiwi Kiss to Shadow Play — https://swatchly.xyz/palette/ecffc5-b5b3ff-c37100-4746b3-311700 */
:root {
  --kiwi-kiss: #ecffc5;
  --purple-illusion: #b5b3ff;
  --caramel-coating: #c37100;
  --royal-nightcore: #4746b3;
  --shadow-play: #311700;
}

Tailwind CSS v4

/* Kiwi Kiss to Shadow Play — https://swatchly.xyz/palette/ecffc5-b5b3ff-c37100-4746b3-311700 */
@theme {
  --color-kiwi-kiss: #ecffc5;
  --color-kiwi-kiss-50: #ecffc5;
  --color-kiwi-kiss-100: #e6f1cf;
  --color-kiwi-kiss-200: #d1dfb5;
  --color-kiwi-kiss-300: #b9c999;
  --color-kiwi-kiss-400: #99aa75;
  --color-kiwi-kiss-500: #7e8e59;
  --color-kiwi-kiss-600: #647340;
  --color-kiwi-kiss-700: #4e5c2c;
  --color-kiwi-kiss-800: #3c481e;
  --color-kiwi-kiss-900: #2e3714;
  --color-kiwi-kiss-950: #1b2309;
  --color-purple-illusion: #b5b3ff;
  --color-purple-illusion-50: #f1f1ff;
  --color-purple-illusion-100: #e5e6ff;
  --color-purple-illusion-200: #ceceff;
  --color-purple-illusion-300: #b5b3ff;
  --color-purple-illusion-400: #9795dc;
  --color-purple-illusion-500: #7d7ac1;
  --color-purple-illusion-600: #6460a4;
  --color-purple-illusion-700: #4f4b88;
  --color-purple-illusion-800: #3e396f;
  --color-purple-illusion-900: #2f2b59;
  --color-purple-illusion-950: #1d1a3b;
  --color-caramel-coating: #c37100;
  --color-caramel-coating-50: #fff3e9;
  --color-caramel-coating-100: #ffe7d2;
  --color-caramel-coating-200: #ffcea2;
  --color-caramel-coating-300: #fab06b;
  --color-caramel-coating-400: #de8e3b;
  --color-caramel-coating-500: #c37100;
  --color-caramel-coating-600: #9e5a00;
  --color-caramel-coating-700: #7e4700;
  --color-caramel-coating-800: #633700;
  --color-caramel-coating-900: #4d2900;
  --color-caramel-coating-950: #321800;
  --color-royal-nightcore: #4746b3;
  --color-royal-nightcore-50: #f3f4ff;
  --color-royal-nightcore-100: #e6eaff;
  --color-royal-nightcore-200: #ced5ff;
  --color-royal-nightcore-300: #b3bdff;
  --color-royal-nightcore-400: #8e98ff;
  --color-royal-nightcore-500: #7379eb;
  --color-royal-nightcore-600: #5b5ecc;
  --color-royal-nightcore-700: #4746b3;
  --color-royal-nightcore-800: #37368f;
  --color-royal-nightcore-900: #292773;
  --color-royal-nightcore-950: #18164e;
  --color-shadow-play: #311700;
  --color-shadow-play-50: #fff3e9;
  --color-shadow-play-100: #fde6d5;
  --color-shadow-play-200: #edd2bd;
  --color-shadow-play-300: #d9baa3;
  --color-shadow-play-400: #bb9a80;
  --color-shadow-play-500: #9f7f64;
  --color-shadow-play-600: #83644b;
  --color-shadow-play-700: #6a4e37;
  --color-shadow-play-800: #543c28;
  --color-shadow-play-900: #422d1c;
  --color-shadow-play-950: #311700;
}