Coral Kiss to Negroni color palette

FFE1CBCoral Kiss E1CEF3Bubblegum Crisis F8E5FFBunny Tail BBC7AABok Choy EDC39ENegroni

About this palette

Coral Kiss to Negroni is a 5-color pastel, light, cool palette: #FFE1CB (Coral Kiss), #E1CEF3 (Bubblegum Crisis), #F8E5FF (Bunny Tail), #BBC7AA (Bok Choy), #EDC39E (Negroni). It mixes orange, purple, white, green tones and feels cool overall. The strongest text pairing is #F8E5FF on #BBC7AA with a contrast ratio of 1.49:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coral Kiss	rgb(255, 225, 203)	hsl(25, 100%, 90%)
Bubblegum Crisis	rgb(225, 206, 243)	hsl(271, 61%, 88%)
Bunny Tail	rgb(248, 229, 255)	hsl(284, 100%, 95%)
Bok Choy	rgb(187, 199, 170)	hsl(85, 21%, 72%)
Negroni	rgb(237, 195, 158)	hsl(28, 69%, 77%)

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.

Color blindness preview

CSS variables

/* Coral Kiss to Negroni — https://swatchly.xyz/palette/ffe1cb-e1cef3-f8e5ff-bbc7aa-edc39e */
:root {
  --coral-kiss: #ffe1cb;
  --bubblegum-crisis: #e1cef3;
  --bunny-tail: #f8e5ff;
  --bok-choy: #bbc7aa;
  --negroni: #edc39e;
}

Tailwind CSS v4

/* Coral Kiss to Negroni — https://swatchly.xyz/palette/ffe1cb-e1cef3-f8e5ff-bbc7aa-edc39e */
@theme {
  --color-coral-kiss: #ffe1cb;
  --color-coral-kiss-50: #ffefe3;
  --color-coral-kiss-100: #ffe1cb;
  --color-coral-kiss-200: #e6d0bf;
  --color-coral-kiss-300: #d2b9a7;
  --color-coral-kiss-400: #b59a86;
  --color-coral-kiss-500: #9a7f6b;
  --color-coral-kiss-600: #7f6552;
  --color-coral-kiss-700: #67503f;
  --color-coral-kiss-800: #523e2f;
  --color-coral-kiss-900: #402f22;
  --color-coral-kiss-950: #281c13;
  --color-bubblegum-crisis: #e1cef3;
  --color-bubblegum-crisis-50: #f8f2ff;
  --color-bubblegum-crisis-100: #f1e5fd;
  --color-bubblegum-crisis-200: #e1cef3;
  --color-bubblegum-crisis-300: #c9b9d8;
  --color-bubblegum-crisis-400: #aa99bb;
  --color-bubblegum-crisis-500: #8f7d9f;
  --color-bubblegum-crisis-600: #746484;
  --color-bubblegum-crisis-700: #5d4e6b;
  --color-bubblegum-crisis-800: #493c55;
  --color-bubblegum-crisis-900: #392d43;
  --color-bubblegum-crisis-950: #231b2b;
  --color-bunny-tail: #f8e5ff;
  --color-bunny-tail-50: #fcf3ff;
  --color-bunny-tail-100: #f8e5ff;
  --color-bunny-tail-200: #e1d3e6;
  --color-bunny-tail-300: #cbbcd1;
  --color-bunny-tail-400: #ac9bb2;
  --color-bunny-tail-500: #918097;
  --color-bunny-tail-600: #75657b;
  --color-bunny-tail-700: #5e4f63;
  --color-bunny-tail-800: #4a3d4e;
  --color-bunny-tail-900: #392e3d;
  --color-bunny-tail-950: #241c27;
  --color-bok-choy: #bbc7aa;
  --color-bok-choy-50: #f2f9e8;
  --color-bok-choy-100: #e7efdd;
  --color-bok-choy-200: #d3dcc6;
  --color-bok-choy-300: #bbc7aa;
  --color-bok-choy-400: #9ca78c;
  --color-bok-choy-500: #808c70;
  --color-bok-choy-600: #667157;
  --color-bok-choy-700: #505a42;
  --color-bok-choy-800: #3e4631;
  --color-bok-choy-900: #2f3624;
  --color-bok-choy-950: #1c2115;
  --color-negroni: #edc39e;
  --color-negroni-50: #fffaf5;
  --color-negroni-100: #fff0e3;
  --color-negroni-200: #f8dbc2;
  --color-negroni-300: #edc39e;
  --color-negroni-400: #c8a281;
  --color-negroni-500: #ab8461;
  --color-negroni-600: #8d6846;
  --color-negroni-700: #725031;
  --color-negroni-800: #5a3d21;
  --color-negroni-900: #452d15;
  --color-negroni-950: #2c1b0a;
}