Bellini to Shadow Play Color Palette

About this palette

Bellini to Shadow Play is a 4-color warm, earthy, vintage, monochromatic, gradient palette: #F2CBB7 (Bellini), #CE683A (Koi), #86330C (Kobe), #2D140A (Shadow Play). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #F2CBB7 on #2D140A with a contrast ratio of 11.51:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bellini	rgb(242, 203, 183)	hsl(20, 69%, 83%)
Koi	rgb(206, 104, 58)	hsl(19, 60%, 52%)
Kobe	rgb(134, 51, 12)	hsl(19, 84%, 29%)
Shadow Play	rgb(45, 20, 10)	hsl(17, 64%, 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.

Aa11.51:1 Very good#F2CBB7 on #2D140A
Aa11.51:1 Very good#2D140A on #F2CBB7
Aa5.62:1 Good#F2CBB7 on #86330C
Aa5.62:1 Good#86330C on #F2CBB7
Aa4.66:1 Good#CE683A on #2D140A
Aa4.66:1 Good#2D140A on #CE683A

Color blindness preview

CSS variables

/* Bellini to Shadow Play — https://swatchly.xyz/palette/f2cbb7-ce683a-86330c-2d140a */
:root {
  --bellini: #f2cbb7;
  --koi: #ce683a;
  --kobe: #86330c;
  --shadow-play: #2d140a;
}

Tailwind CSS v4

/* Bellini to Shadow Play — https://swatchly.xyz/palette/f2cbb7-ce683a-86330c-2d140a */
@theme {
  --color-bellini: #f2cbb7;
  --color-bellini-50: #ffefe8;
  --color-bellini-100: #fce3d6;
  --color-bellini-200: #f2cbb7;
  --color-bellini-300: #d8b6a5;
  --color-bellini-400: #ba9785;
  --color-bellini-500: #9f7c69;
  --color-bellini-600: #846251;
  --color-bellini-700: #6b4d3d;
  --color-bellini-800: #563b2e;
  --color-bellini-900: #432d21;
  --color-bellini-950: #2b1b13;
  --color-koi: #ce683a;
  --color-koi-50: #fff3ee;
  --color-koi-100: #ffe6dc;
  --color-koi-200: #ffccb7;
  --color-koi-300: #ffac89;
  --color-koi-400: #ea855a;
  --color-koi-500: #ce683a;
  --color-koi-600: #ae4d1c;
  --color-koi-700: #903702;
  --color-koi-800: #722900;
  --color-koi-900: #591e00;
  --color-koi-950: #3a1100;
  --color-kobe: #86330c;
  --color-kobe-50: #fff2ed;
  --color-kobe-100: #ffe5db;
  --color-kobe-200: #ffc8b4;
  --color-kobe-300: #faa889;
  --color-kobe-400: #dd8563;
  --color-kobe-500: #c06744;
  --color-kobe-600: #a04c2b;
  --color-kobe-700: #86330c;
  --color-kobe-800: #69280b;
  --color-kobe-900: #531c04;
  --color-kobe-950: #360f01;
  --color-shadow-play: #2d140a;
  --color-shadow-play-50: #fff2ed;
  --color-shadow-play-100: #fce6dd;
  --color-shadow-play-200: #ecd1c7;
  --color-shadow-play-300: #d8b9ae;
  --color-shadow-play-400: #ba998d;
  --color-shadow-play-500: #9e7d71;
  --color-shadow-play-600: #816257;
  --color-shadow-play-700: #674c41;
  --color-shadow-play-800: #513930;
  --color-shadow-play-900: #3e2a23;
  --color-shadow-play-950: #2d140a;
}