Beau Vert to No Way Rosé Color Palette

About this palette

Beau Vert to No Way Rosé is a 5-color warm palette: #005D60 (Beau Vert), #C34450 (Saffron Desires), #002B30 (Black Box), #FF4715 (Coin Slot), #FBA89E (No Way Rosé). It mixes turquoise, red, pink tones and feels warm overall. The strongest text pairing is #002B30 on #FBA89E with a contrast ratio of 8.07:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beau Vert	rgb(0, 93, 96)	hsl(182, 100%, 19%)
Saffron Desires	rgb(195, 68, 80)	hsl(354, 51%, 52%)
Black Box	rgb(0, 43, 48)	hsl(186, 100%, 9%)
Coin Slot	rgb(255, 71, 21)	hsl(13, 100%, 54%)
No Way Rosé	rgb(251, 168, 158)	hsl(6, 92%, 80%)

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.07:1 Very good#002B30 on #FBA89E
Aa8.07:1 Very good#FBA89E on #002B30
Aa4.44:1 Poor#002B30 on #FF4715
Aa4.44:1 Poor#FF4715 on #002B30
Aa4.09:1 Poor#005D60 on #FBA89E
Aa4.09:1 Poor#FBA89E on #005D60
Aa3.07:1 Poor#C34450 on #002B30
Aa3.07:1 Poor#002B30 on #C34450

Color blindness preview

CSS variables

/* Beau Vert to No Way Rosé — https://swatchly.xyz/palette/005d60-c34450-002b30-ff4715-fba89e */
:root {
  --beau-vert: #005d60;
  --saffron-desires: #c34450;
  --black-box: #002b30;
  --coin-slot: #ff4715;
  --no-way-ros: #fba89e;
}

Tailwind CSS v4

/* Beau Vert to No Way Rosé — https://swatchly.xyz/palette/005d60-c34450-002b30-ff4715-fba89e */
@theme {
  --color-beau-vert: #005d60;
  --color-beau-vert-50: #d7feff;
  --color-beau-vert-100: #c9f5f6;
  --color-beau-vert-200: #ade2e4;
  --color-beau-vert-300: #8eccce;
  --color-beau-vert-400: #66adb0;
  --color-beau-vert-500: #469193;
  --color-beau-vert-600: #2a7577;
  --color-beau-vert-700: #005d60;
  --color-beau-vert-800: #04484b;
  --color-beau-vert-900: #00383a;
  --color-beau-vert-950: #002324;
  --color-saffron-desires: #c34450;
  --color-saffron-desires-50: #fff1f1;
  --color-saffron-desires-100: #ffe6e6;
  --color-saffron-desires-200: #ffcdcd;
  --color-saffron-desires-300: #ffaeaf;
  --color-saffron-desires-400: #fa7d83;
  --color-saffron-desires-500: #e05f68;
  --color-saffron-desires-600: #c34450;
  --color-saffron-desires-700: #a22c3a;
  --color-saffron-desires-800: #841929;
  --color-saffron-desires-900: #690b1d;
  --color-saffron-desires-950: #46020f;
  --color-black-box: #002b30;
  --color-black-box-50: #e3fafe;
  --color-black-box-100: #d7f1f5;
  --color-black-box-200: #bfdee3;
  --color-black-box-300: #a5c9cd;
  --color-black-box-400: #82aaaf;
  --color-black-box-500: #679095;
  --color-black-box-600: #4f767b;
  --color-black-box-700: #3b6065;
  --color-black-box-800: #2c4d51;
  --color-black-box-900: #213d41;
  --color-black-box-950: #002b30;
  --color-coin-slot: #ff4715;
  --color-coin-slot-50: #fff5f2;
  --color-coin-slot-100: #ffebe6;
  --color-coin-slot-200: #ffd3c8;
  --color-coin-slot-300: #ffb5a3;
  --color-coin-slot-400: #ff8467;
  --color-coin-slot-500: #ff4715;
  --color-coin-slot-600: #d23200;
  --color-coin-slot-700: #a72600;
  --color-coin-slot-800: #841c00;
  --color-coin-slot-900: #661300;
  --color-coin-slot-950: #420800;
  --color-no-way-ros: #fba89e;
  --color-no-way-ros-50: #fff2f0;
  --color-no-way-ros-100: #ffe4e0;
  --color-no-way-ros-200: #ffc8c1;
  --color-no-way-ros-300: #fba89e;
  --color-no-way-ros-400: #d78a81;
  --color-no-way-ros-500: #bb6e65;
  --color-no-way-ros-600: #9d544c;
  --color-no-way-ros-700: #813f38;
  --color-no-way-ros-800: #682e29;
  --color-no-way-ros-900: #52221d;
  --color-no-way-ros-950: #361310;
}