Water to Pitch-Black Forests Color Palette

About this palette

Water to Pitch-Black Forests is a 5-color palette: #D7F2FF (Water), #F569C3 (Kisses), #009B8B (Green Dynasty), #823B0D (Hazelnut Chocolate), #003625 (Pitch-Black Forests). It mixes white, pink, turquoise, brown tones and feels balanced overall. The strongest text pairing is #D7F2FF on #003625 with a contrast ratio of 11.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(215, 242, 255)	hsl(200, 100%, 92%)
Kisses	rgb(245, 105, 195)	hsl(321, 88%, 69%)
Green Dynasty	rgb(0, 155, 139)	hsl(174, 100%, 30%)
Hazelnut Chocolate	rgb(130, 59, 13)	hsl(24, 82%, 28%)
Pitch-Black Forests	rgb(0, 54, 37)	hsl(161, 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.

Aa11.60:1 Very good#D7F2FF on #003625
Aa11.60:1 Very good#003625 on #D7F2FF
Aa6.99:1 Good#D7F2FF on #823B0D
Aa6.99:1 Good#823B0D on #D7F2FF
Aa4.95:1 Good#F569C3 on #003625
Aa4.95:1 Good#003625 on #F569C3
Aa3.90:1 Poor#009B8B on #003625
Aa3.90:1 Poor#003625 on #009B8B

Color blindness preview

CSS variables

/* Water to Pitch-Black Forests — https://swatchly.xyz/palette/d7f2ff-f569c3-009b8b-823b0d-003625 */
:root {
  --water: #d7f2ff;
  --kisses: #f569c3;
  --green-dynasty: #009b8b;
  --hazelnut-chocolate: #823b0d;
  --pitch-black-forests: #003625;
}

Tailwind CSS v4

/* Water to Pitch-Black Forests — https://swatchly.xyz/palette/d7f2ff-f569c3-009b8b-823b0d-003625 */
@theme {
  --color-water: #d7f2ff;
  --color-water-50: #edf9ff;
  --color-water-100: #d7f2ff;
  --color-water-200: #c9dde6;
  --color-water-300: #b0c6d1;
  --color-water-400: #8ea7b2;
  --color-water-500: #728b97;
  --color-water-600: #59707b;
  --color-water-700: #445963;
  --color-water-800: #33464e;
  --color-water-900: #26353d;
  --color-water-950: #162126;
  --color-kisses: #f569c3;
  --color-kisses-50: #fff2f9;
  --color-kisses-100: #ffe4f3;
  --color-kisses-200: #ffc6e6;
  --color-kisses-300: #ffa0d9;
  --color-kisses-400: #f569c3;
  --color-kisses-500: #d54ba6;
  --color-kisses-600: #b42c89;
  --color-kisses-700: #95116f;
  --color-kisses-800: #780058;
  --color-kisses-900: #5e0044;
  --color-kisses-950: #3d002b;
  --color-green-dynasty: #009b8b;
  --color-green-dynasty-50: #d7fff7;
  --color-green-dynasty-100: #b8fbef;
  --color-green-dynasty-200: #98eadb;
  --color-green-dynasty-300: #75d5c5;
  --color-green-dynasty-400: #42b7a6;
  --color-green-dynasty-500: #009b8b;
  --color-green-dynasty-600: #007d70;
  --color-green-dynasty-700: #006359;
  --color-green-dynasty-800: #004e45;
  --color-green-dynasty-900: #003c35;
  --color-green-dynasty-950: #002621;
  --color-hazelnut-chocolate: #823b0d;
  --color-hazelnut-chocolate-50: #fff2ec;
  --color-hazelnut-chocolate-100: #ffe5d8;
  --color-hazelnut-chocolate-200: #ffcaaf;
  --color-hazelnut-chocolate-300: #f4ad89;
  --color-hazelnut-chocolate-400: #d78b63;
  --color-hazelnut-chocolate-500: #ba6e45;
  --color-hazelnut-chocolate-600: #9b532b;
  --color-hazelnut-chocolate-700: #823b0d;
  --color-hazelnut-chocolate-800: #662e0a;
  --color-hazelnut-chocolate-900: #512103;
  --color-hazelnut-chocolate-950: #351301;
  --color-pitch-black-forests: #003625;
  --color-pitch-black-forests-50: #e1fdf0;
  --color-pitch-black-forests-100: #d5f4e5;
  --color-pitch-black-forests-200: #bce2d0;
  --color-pitch-black-forests-300: #a2ccb9;
  --color-pitch-black-forests-400: #7dac97;
  --color-pitch-black-forests-500: #5f907b;
  --color-pitch-black-forests-600: #457360;
  --color-pitch-black-forests-700: #305b49;
  --color-pitch-black-forests-800: #214537;
  --color-pitch-black-forests-900: #003625;
  --color-pitch-black-forests-950: #0a1f17;
}