Burnt Coffee to Pale King’s Blue color palette

2F1A13Burnt Coffee 71452FBrisket 0077BEStar of Life 00D7CBFish Boy A9F0EEPale King’s Blue

About this palette

Burnt Coffee to Pale King’s Blue is a 5-color cool, vintage palette: #2F1A13 (Burnt Coffee), #71452F (Brisket), #0077BE (Star of Life), #00D7CB (Fish Boy), #A9F0EE (Pale King’s Blue). It mixes brown, blue, turquoise tones and feels cool overall. The strongest text pairing is #2F1A13 on #A9F0EE with a contrast ratio of 12.82:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burnt Coffee	rgb(47, 26, 19)	hsl(15, 42%, 13%)
Brisket	rgb(113, 69, 47)	hsl(20, 41%, 31%)
Star of Life	rgb(0, 119, 190)	hsl(202, 100%, 37%)
Fish Boy	rgb(0, 215, 203)	hsl(177, 100%, 42%)
Pale King’s Blue	rgb(169, 240, 238)	hsl(178, 70%, 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.

Aa12.82:1 Super#2F1A13 on #A9F0EE
Aa12.82:1 Super#A9F0EE on #2F1A13
Aa9.06:1 Very good#2F1A13 on #00D7CB
Aa9.06:1 Very good#00D7CB on #2F1A13
Aa6.32:1 Good#71452F on #A9F0EE
Aa6.32:1 Good#A9F0EE on #71452F
Aa4.46:1 Poor#71452F on #00D7CB
Aa4.46:1 Poor#00D7CB on #71452F

Color blindness preview

CSS variables

/* Burnt Coffee to Pale King’s Blue — https://swatchly.xyz/palette/2f1a13-71452f-0077be-00d7cb-a9f0ee */
:root {
  --burnt-coffee: #2f1a13;
  --brisket: #71452f;
  --star-of-life: #0077be;
  --fish-boy: #00d7cb;
  --pale-king-s-blue: #a9f0ee;
}

Tailwind CSS v4

/* Burnt Coffee to Pale King’s Blue — https://swatchly.xyz/palette/2f1a13-71452f-0077be-00d7cb-a9f0ee */
@theme {
  --color-burnt-coffee: #2f1a13;
  --color-burnt-coffee-50: #fff2ee;
  --color-burnt-coffee-100: #f9e7e0;
  --color-burnt-coffee-200: #e8d2cb;
  --color-burnt-coffee-300: #d4bbb2;
  --color-burnt-coffee-400: #b69b92;
  --color-burnt-coffee-500: #9a7f76;
  --color-burnt-coffee-600: #7f665d;
  --color-burnt-coffee-700: #675048;
  --color-burnt-coffee-800: #523e37;
  --color-burnt-coffee-900: #402f29;
  --color-burnt-coffee-950: #2f1a13;
  --color-brisket: #71452f;
  --color-brisket-50: #fff2ec;
  --color-brisket-100: #ffe5d9;
  --color-brisket-200: #f5cdba;
  --color-brisket-300: #e1b49f;
  --color-brisket-400: #c3937c;
  --color-brisket-500: #a7775f;
  --color-brisket-600: #895c46;
  --color-brisket-700: #71452f;
  --color-brisket-800: #583624;
  --color-brisket-900: #452819;
  --color-brisket-950: #2d180d;
  --color-star-of-life: #0077be;
  --color-star-of-life-50: #edf6ff;
  --color-star-of-life-100: #ddefff;
  --color-star-of-life-200: #bbdfff;
  --color-star-of-life-300: #8fcbff;
  --color-star-of-life-400: #56adf4;
  --color-star-of-life-500: #3192da;
  --color-star-of-life-600: #0077be;
  --color-star-of-life-700: #005e98;
  --color-star-of-life-800: #004978;
  --color-star-of-life-900: #00385e;
  --color-star-of-life-950: #00233d;
  --color-fish-boy: #00d7cb;
  --color-fish-boy-50: #c8fff9;
  --color-fish-boy-100: #9ffbf2;
  --color-fish-boy-200: #77e9df;
  --color-fish-boy-300: #00d7cb;
  --color-fish-boy-400: #00b4aa;
  --color-fish-boy-500: #00978e;
  --color-fish-boy-600: #007a73;
  --color-fish-boy-700: #00615b;
  --color-fish-boy-800: #004d48;
  --color-fish-boy-900: #003c38;
  --color-fish-boy-950: #002623;
  --color-pale-king-s-blue: #a9f0ee;
  --color-pale-king-s-blue-50: #f0fffe;
  --color-pale-king-s-blue-100: #d5fcfb;
  --color-pale-king-s-blue-200: #a9f0ee;
  --color-pale-king-s-blue-300: #9dd5d3;
  --color-pale-king-s-blue-400: #74b5b3;
  --color-pale-king-s-blue-500: #539897;
  --color-pale-king-s-blue-600: #367b7a;
  --color-pale-king-s-blue-700: #1f6261;
  --color-pale-king-s-blue-800: #0f4c4b;
  --color-pale-king-s-blue-900: #053b3a;
  --color-pale-king-s-blue-950: #012525;
}