Beau Vert to Hot Chilli Color Palette

About this palette

Beau Vert to Hot Chilli is a 5-color cool, vintage palette: #00606C (Beau Vert), #A1E6FF (Winter Wizard), #003D49 (Sunken Harbour), #D8836A (Canyon Sunset), #B1553B (Hot Chilli). It mixes turquoise, blue, red tones and feels cool overall. The strongest text pairing is #A1E6FF on #003D49 with a contrast ratio of 8.66:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beau Vert	rgb(0, 96, 108)	hsl(187, 100%, 21%)
Winter Wizard	rgb(161, 230, 255)	hsl(196, 100%, 82%)
Sunken Harbour	rgb(0, 61, 73)	hsl(190, 100%, 14%)
Canyon Sunset	rgb(216, 131, 106)	hsl(14, 59%, 63%)
Hot Chilli	rgb(177, 85, 59)	hsl(13, 50%, 46%)

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.

Aa8.66:1 Very good#A1E6FF on #003D49
Aa8.66:1 Very good#003D49 on #A1E6FF
Aa5.29:1 Good#00606C on #A1E6FF
Aa5.29:1 Good#A1E6FF on #00606C
Aa4.18:1 Poor#003D49 on #D8836A
Aa4.18:1 Poor#D8836A on #003D49
Aa3.61:1 Poor#A1E6FF on #B1553B
Aa3.61:1 Poor#B1553B on #A1E6FF

Color blindness preview

CSS variables

/* Beau Vert to Hot Chilli — https://swatchly.xyz/palette/00606c-a1e6ff-003d49-d8836a-b1553b */
:root {
  --beau-vert: #00606c;
  --winter-wizard: #a1e6ff;
  --sunken-harbour: #003d49;
  --canyon-sunset: #d8836a;
  --hot-chilli: #b1553b;
}

Tailwind CSS v4

/* Beau Vert to Hot Chilli — https://swatchly.xyz/palette/00606c-a1e6ff-003d49-d8836a-b1553b */
@theme {
  --color-beau-vert: #00606c;
  --color-beau-vert-50: #e2fbff;
  --color-beau-vert-100: #c7f5fd;
  --color-beau-vert-200: #ace2ec;
  --color-beau-vert-300: #8ecdd8;
  --color-beau-vert-400: #66aebb;
  --color-beau-vert-500: #46939f;
  --color-beau-vert-600: #2a7783;
  --color-beau-vert-700: #00606c;
  --color-beau-vert-800: #014b55;
  --color-beau-vert-900: #003a42;
  --color-beau-vert-950: #00242a;
  --color-winter-wizard: #a1e6ff;
  --color-winter-wizard-50: #ecfaff;
  --color-winter-wizard-100: #d4f3ff;
  --color-winter-wizard-200: #a1e6ff;
  --color-winter-wizard-300: #94cde2;
  --color-winter-wizard-400: #6eaec4;
  --color-winter-wizard-500: #4e92a9;
  --color-winter-wizard-600: #33768c;
  --color-winter-wizard-700: #1d5e72;
  --color-winter-wizard-800: #0e4a5b;
  --color-winter-wizard-900: #043948;
  --color-winter-wizard-950: #01242e;
  --color-sunken-harbour: #003d49;
  --color-sunken-harbour-50: #e5f9ff;
  --color-sunken-harbour-100: #d1f2fb;
  --color-sunken-harbour-200: #b8dfea;
  --color-sunken-harbour-300: #9dcad6;
  --color-sunken-harbour-400: #79abb9;
  --color-sunken-harbour-500: #5d919e;
  --color-sunken-harbour-600: #437683;
  --color-sunken-harbour-700: #305f6b;
  --color-sunken-harbour-800: #214c56;
  --color-sunken-harbour-900: #003d49;
  --color-sunken-harbour-950: #0a262c;
  --color-canyon-sunset: #d8836a;
  --color-canyon-sunset-50: #fff0eb;
  --color-canyon-sunset-100: #ffe1d8;
  --color-canyon-sunset-200: #ffc4b3;
  --color-canyon-sunset-300: #f4a790;
  --color-canyon-sunset-400: #d8836a;
  --color-canyon-sunset-500: #bb6950;
  --color-canyon-sunset-600: #9d5039;
  --color-canyon-sunset-700: #823b27;
  --color-canyon-sunset-800: #692c1a;
  --color-canyon-sunset-900: #542010;
  --color-canyon-sunset-950: #381207;
  --color-hot-chilli: #b1553b;
  --color-hot-chilli-50: #fff2ee;
  --color-hot-chilli-100: #ffe7e0;
  --color-hot-chilli-200: #ffcebf;
  --color-hot-chilli-300: #ffae97;
  --color-hot-chilli-400: #e88b71;
  --color-hot-chilli-500: #cd6f54;
  --color-hot-chilli-600: #b1553b;
  --color-hot-chilli-700: #923e26;
  --color-hot-chilli-800: #772c17;
  --color-hot-chilli-900: #5e1f0c;
  --color-hot-chilli-950: #3e1004;
}