Way Beyond the Blue to Cacao Nibs Color Palette

About this palette

Way Beyond the Blue to Cacao Nibs is a 4-color cool palette: #158BC7 (Way Beyond the Blue), #B4E0B7 (Celadon), #3E1D42 (Purple Void), #80421E (Cacao Nibs). It mixes blue, green, purple, brown tones and feels cool overall. The strongest text pairing is #B4E0B7 on #3E1D42 with a contrast ratio of 9.79:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Way Beyond the Blue	rgb(21, 139, 199)	hsl(200, 81%, 43%)
Celadon	rgb(180, 224, 183)	hsl(124, 42%, 79%)
Purple Void	rgb(62, 29, 66)	hsl(294, 39%, 19%)
Cacao Nibs	rgb(128, 66, 30)	hsl(22, 62%, 31%)

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.

Aa9.79:1 Very good#B4E0B7 on #3E1D42
Aa9.79:1 Very good#3E1D42 on #B4E0B7
Aa5.26:1 Good#B4E0B7 on #80421E
Aa5.26:1 Good#80421E on #B4E0B7
Aa3.80:1 Poor#158BC7 on #3E1D42
Aa3.80:1 Poor#3E1D42 on #158BC7

Color blindness preview

CSS variables

/* Way Beyond the Blue to Cacao Nibs — https://swatchly.xyz/palette/158bc7-b4e0b7-3e1d42-80421e */
:root {
  --way-beyond-the-blue: #158bc7;
  --celadon: #b4e0b7;
  --purple-void: #3e1d42;
  --cacao-nibs: #80421e;
}

Tailwind CSS v4

/* Way Beyond the Blue to Cacao Nibs — https://swatchly.xyz/palette/158bc7-b4e0b7-3e1d42-80421e */
@theme {
  --color-way-beyond-the-blue: #158bc7;
  --color-way-beyond-the-blue-50: #eaf6ff;
  --color-way-beyond-the-blue-100: #d5eeff;
  --color-way-beyond-the-blue-200: #abddff;
  --color-way-beyond-the-blue-300: #74c8ff;
  --color-way-beyond-the-blue-400: #44a8e4;
  --color-way-beyond-the-blue-500: #158bc7;
  --color-way-beyond-the-blue-600: #0070a3;
  --color-way-beyond-the-blue-700: #005983;
  --color-way-beyond-the-blue-800: #004568;
  --color-way-beyond-the-blue-900: #003651;
  --color-way-beyond-the-blue-950: #002235;
  --color-celadon: #b4e0b7;
  --color-celadon-50: #e0fae2;
  --color-celadon-100: #d3f0d5;
  --color-celadon-200: #b4e0b7;
  --color-celadon-300: #a3c8a5;
  --color-celadon-400: #82ab85;
  --color-celadon-500: #67906a;
  --color-celadon-600: #4e7652;
  --color-celadon-700: #3b5f3e;
  --color-celadon-800: #2b4b2f;
  --color-celadon-900: #1f3a22;
  --color-celadon-950: #112513;
  --color-purple-void: #3e1d42;
  --color-purple-void-50: #fef0ff;
  --color-purple-void-100: #fbe1fe;
  --color-purple-void-200: #eacbee;
  --color-purple-void-300: #d6b3da;
  --color-purple-void-400: #b791bb;
  --color-purple-void-500: #9a749e;
  --color-purple-void-600: #7d5981;
  --color-purple-void-700: #634367;
  --color-purple-void-800: #4c314f;
  --color-purple-void-900: #3e1d42;
  --color-purple-void-950: #231325;
  --color-cacao-nibs: #80421e;
  --color-cacao-nibs-50: #fff2ec;
  --color-cacao-nibs-100: #ffe5d8;
  --color-cacao-nibs-200: #ffcab0;
  --color-cacao-nibs-300: #eeb191;
  --color-cacao-nibs-400: #d28f6d;
  --color-cacao-nibs-500: #b67350;
  --color-cacao-nibs-600: #995937;
  --color-cacao-nibs-700: #80421e;
  --color-cacao-nibs-800: #653316;
  --color-cacao-nibs-900: #50260c;
  --color-cacao-nibs-950: #341604;
}