Pitch-Black Forests to Strawberry Bonbon Color Palette

About this palette

Pitch-Black Forests to Strawberry Bonbon is a 4-color palette: #09372A (Pitch-Black Forests), #007B92 (Celestial), #D19B86 (Cashmere Clay), #FFEBF9 (Strawberry Bonbon). It mixes turquoise, blue, orange, white tones and feels cool overall. The strongest text pairing is #09372A on #FFEBF9 with a contrast ratio of 11.63:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch-Black Forests	rgb(9, 55, 42)	hsl(163, 72%, 13%)
Celestial	rgb(0, 123, 146)	hsl(189, 100%, 29%)
Cashmere Clay	rgb(209, 155, 134)	hsl(17, 45%, 67%)
Strawberry Bonbon	rgb(255, 235, 249)	hsl(318, 100%, 96%)

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.63:1 Very good#09372A on #FFEBF9
Aa11.63:1 Very good#FFEBF9 on #09372A
Aa5.49:1 Good#09372A on #D19B86
Aa5.49:1 Good#D19B86 on #09372A
Aa4.36:1 Poor#007B92 on #FFEBF9
Aa4.36:1 Poor#FFEBF9 on #007B92

Color blindness preview

CSS variables

/* Pitch-Black Forests to Strawberry Bonbon — https://swatchly.xyz/palette/09372a-007b92-d19b86-ffebf9 */
:root {
  --pitch-black-forests: #09372a;
  --celestial: #007b92;
  --cashmere-clay: #d19b86;
  --strawberry-bonbon: #ffebf9;
}

Tailwind CSS v4

/* Pitch-Black Forests to Strawberry Bonbon — https://swatchly.xyz/palette/09372a-007b92-d19b86-ffebf9 */
@theme {
  --color-pitch-black-forests: #09372a;
  --color-pitch-black-forests-50: #e3fcf2;
  --color-pitch-black-forests-100: #d6f3e8;
  --color-pitch-black-forests-200: #bfe0d3;
  --color-pitch-black-forests-300: #a4cbbc;
  --color-pitch-black-forests-400: #81ac9b;
  --color-pitch-black-forests-500: #648f7f;
  --color-pitch-black-forests-600: #497364;
  --color-pitch-black-forests-700: #355b4e;
  --color-pitch-black-forests-800: #25463b;
  --color-pitch-black-forests-900: #09372a;
  --color-pitch-black-forests-950: #0d201a;
  --color-celestial: #007b92;
  --color-celestial-50: #e5f9ff;
  --color-celestial-100: #ccf4ff;
  --color-celestial-200: #a3e5f7;
  --color-celestial-300: #83d0e4;
  --color-celestial-400: #57b1c8;
  --color-celestial-500: #3396ae;
  --color-celestial-600: #007b92;
  --color-celestial-700: #006274;
  --color-celestial-800: #004c5b;
  --color-celestial-900: #003b47;
  --color-celestial-950: #00252d;
  --color-cashmere-clay: #d19b86;
  --color-cashmere-clay-50: #fff6f2;
  --color-cashmere-clay-100: #ffeae3;
  --color-cashmere-clay-200: #fcd3c3;
  --color-cashmere-clay-300: #eabcaa;
  --color-cashmere-clay-400: #d19b86;
  --color-cashmere-clay-500: #b27e6a;
  --color-cashmere-clay-600: #94634f;
  --color-cashmere-clay-700: #794c3a;
  --color-cashmere-clay-800: #60392a;
  --color-cashmere-clay-900: #4b2a1d;
  --color-cashmere-clay-950: #2f180f;
  --color-strawberry-bonbon: #ffebf9;
  --color-strawberry-bonbon-50: #ffebf9;
  --color-strawberry-bonbon-100: #f1e4ed;
  --color-strawberry-bonbon-200: #dfd0db;
  --color-strawberry-bonbon-300: #cabac5;
  --color-strawberry-bonbon-400: #ac9aa7;
  --color-strawberry-bonbon-500: #917f8c;
  --color-strawberry-bonbon-600: #776672;
  --color-strawberry-bonbon-700: #5f505b;
  --color-strawberry-bonbon-800: #4b3e47;
  --color-strawberry-bonbon-900: #3a2f37;
  --color-strawberry-bonbon-950: #241c22;
}