Rich Black to Fizz Color Palette

About this palette

Rich Black to Fizz is a 5-color cool, gradient palette: #003D3F (Rich Black), #3E746F (Green Sleeves), #779B6E (Money), #6FC0AE (Sereni Teal), #ADD9AC (Fizz). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #003D3F on #ADD9AC with a contrast ratio of 7.65:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rich Black	rgb(0, 61, 63)	hsl(182, 100%, 12%)
Green Sleeves	rgb(62, 116, 111)	hsl(174, 30%, 35%)
Money	rgb(119, 155, 110)	hsl(108, 18%, 52%)
Sereni Teal	rgb(111, 192, 174)	hsl(167, 39%, 59%)
Fizz	rgb(173, 217, 172)	hsl(119, 37%, 76%)

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.

Aa7.65:1 Very good#003D3F on #ADD9AC
Aa7.65:1 Very good#ADD9AC on #003D3F
Aa5.65:1 Good#003D3F on #6FC0AE
Aa5.65:1 Good#6FC0AE on #003D3F
Aa3.85:1 Poor#003D3F on #779B6E
Aa3.85:1 Poor#779B6E on #003D3F
Aa3.38:1 Poor#3E746F on #ADD9AC
Aa3.38:1 Poor#ADD9AC on #3E746F

Color blindness preview

CSS variables

/* Rich Black to Fizz — https://swatchly.xyz/palette/003d3f-3e746f-779b6e-6fc0ae-add9ac */
:root {
  --rich-black: #003d3f;
  --green-sleeves: #3e746f;
  --money: #779b6e;
  --sereni-teal: #6fc0ae;
  --fizz: #add9ac;
}

Tailwind CSS v4

/* Rich Black to Fizz — https://swatchly.xyz/palette/003d3f-3e746f-779b6e-6fc0ae-add9ac */
@theme {
  --color-rich-black: #003d3f;
  --color-rich-black-50: #dffcfd;
  --color-rich-black-100: #d2f3f4;
  --color-rich-black-200: #b9e0e1;
  --color-rich-black-300: #9ecbcc;
  --color-rich-black-400: #7aadae;
  --color-rich-black-500: #5d9193;
  --color-rich-black-600: #447778;
  --color-rich-black-700: #305f61;
  --color-rich-black-800: #214c4d;
  --color-rich-black-900: #003d3f;
  --color-rich-black-950: #0a2526;
  --color-green-sleeves: #3e746f;
  --color-green-sleeves-50: #defdf9;
  --color-green-sleeves-100: #d1f3ef;
  --color-green-sleeves-200: #b7e0db;
  --color-green-sleeves-300: #9bcac5;
  --color-green-sleeves-400: #77aba6;
  --color-green-sleeves-500: #598f8a;
  --color-green-sleeves-600: #3e746f;
  --color-green-sleeves-700: #2c5d58;
  --color-green-sleeves-800: #1e4945;
  --color-green-sleeves-900: #133935;
  --color-green-sleeves-950: #082321;
  --color-money: #779b6e;
  --color-money-50: #e9fee4;
  --color-money-100: #dff7da;
  --color-money-200: #cae6c4;
  --color-money-300: #b3d2ab;
  --color-money-400: #92b58a;
  --color-money-500: #779b6e;
  --color-money-600: #5c7e53;
  --color-money-700: #45653d;
  --color-money-800: #334f2c;
  --color-money-900: #253d1f;
  --color-money-950: #152610;
  --color-sereni-teal: #6fc0ae;
  --color-sereni-teal-50: #ebfff9;
  --color-sereni-teal-100: #d1fdf2;
  --color-sereni-teal-200: #b8eee0;
  --color-sereni-teal-300: #9cdbcc;
  --color-sereni-teal-400: #6fc0ae;
  --color-sereni-teal-500: #51a190;
  --color-sereni-teal-600: #308473;
  --color-sereni-teal-700: #16695b;
  --color-sereni-teal-800: #005246;
  --color-sereni-teal-900: #003e34;
  --color-sereni-teal-950: #00261f;
  --color-fizz: #add9ac;
  --color-fizz-50: #f1fff1;
  --color-fizz-100: #e1fbe0;
  --color-fizz-200: #cceacb;
  --color-fizz-300: #add9ac;
  --color-fizz-400: #8eb68d;
  --color-fizz-500: #70996f;
  --color-fizz-600: #547c54;
  --color-fizz-700: #3e633e;
  --color-fizz-800: #2d4d2d;
  --color-fizz-900: #1f3a20;
  --color-fizz-950: #112511;
}