Olive to Cape Verde Color Palette

About this palette

Olive to Cape Verde is a 5-color warm palette: #8C7C0E (Olive), #A99DF0 (Cold Lips), #DAD06A (Force of Nature), #460A20 (What We Do in the Shadows), #005854 (Cape Verde). It mixes yellow, purple, red, turquoise tones and feels warm overall. The strongest text pairing is #DAD06A on #460A20 with a contrast ratio of 9.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olive	rgb(140, 124, 14)	hsl(52, 82%, 30%)
Cold Lips	rgb(169, 157, 240)	hsl(249, 73%, 78%)
Force of Nature	rgb(218, 208, 106)	hsl(55, 60%, 64%)
What We Do in the Shadows	rgb(70, 10, 32)	hsl(338, 75%, 16%)
Cape Verde	rgb(0, 88, 84)	hsl(177, 100%, 17%)

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.97:1 Very good#DAD06A on #460A20
Aa9.97:1 Very good#460A20 on #DAD06A
Aa6.62:1 Good#A99DF0 on #460A20
Aa6.62:1 Good#460A20 on #A99DF0
Aa5.23:1 Good#DAD06A on #005854
Aa5.23:1 Good#005854 on #DAD06A
Aa3.78:1 Poor#8C7C0E on #460A20
Aa3.78:1 Poor#460A20 on #8C7C0E

Color blindness preview

CSS variables

/* Olive to Cape Verde — https://swatchly.xyz/palette/8c7c0e-a99df0-dad06a-460a20-005854 */
:root {
  --olive: #8c7c0e;
  --cold-lips: #a99df0;
  --force-of-nature: #dad06a;
  --what-we-do-in-the-shadows: #460a20;
  --cape-verde: #005854;
}

Tailwind CSS v4

/* Olive to Cape Verde — https://swatchly.xyz/palette/8c7c0e-a99df0-dad06a-460a20-005854 */
@theme {
  --color-olive: #8c7c0e;
  --color-olive-50: #fdf5c2;
  --color-olive-100: #f3e9af;
  --color-olive-200: #dfd38d;
  --color-olive-300: #c9bb69;
  --color-olive-400: #a9993b;
  --color-olive-500: #8c7c0e;
  --color-olive-600: #716400;
  --color-olive-700: #5a4f00;
  --color-olive-800: #473e00;
  --color-olive-900: #383000;
  --color-olive-950: #231e00;
  --color-cold-lips: #a99df0;
  --color-cold-lips-50: #f8f7ff;
  --color-cold-lips-100: #efeeff;
  --color-cold-lips-200: #dcd8ff;
  --color-cold-lips-300: #c7bfff;
  --color-cold-lips-400: #a99df0;
  --color-cold-lips-500: #8c80d0;
  --color-cold-lips-600: #7164b1;
  --color-cold-lips-700: #594c93;
  --color-cold-lips-800: #453977;
  --color-cold-lips-900: #342a5e;
  --color-cold-lips-950: #1f183d;
  --color-force-of-nature: #dad06a;
  --color-force-of-nature-50: #fffddf;
  --color-force-of-nature-100: #faf6bf;
  --color-force-of-nature-200: #eae4a2;
  --color-force-of-nature-300: #dad06a;
  --color-force-of-nature-400: #b7ae50;
  --color-force-of-nature-500: #9a9023;
  --color-force-of-nature-600: #7d7300;
  --color-force-of-nature-700: #625a00;
  --color-force-of-nature-800: #4c4500;
  --color-force-of-nature-900: #393400;
  --color-force-of-nature-950: #242000;
  --color-what-we-do-in-the-shadows: #460a20;
  --color-what-we-do-in-the-shadows-50: #fff1f4;
  --color-what-we-do-in-the-shadows-100: #ffe3e9;
  --color-what-we-do-in-the-shadows-200: #ffc6d2;
  --color-what-we-do-in-the-shadows-300: #edacbb;
  --color-what-we-do-in-the-shadows-400: #d08b9b;
  --color-what-we-do-in-the-shadows-500: #b57081;
  --color-what-we-do-in-the-shadows-600: #995768;
  --color-what-we-do-in-the-shadows-700: #804353;
  --color-what-we-do-in-the-shadows-800: #693342;
  --color-what-we-do-in-the-shadows-900: #562734;
  --color-what-we-do-in-the-shadows-950: #460a20;
  --color-cape-verde: #005854;
  --color-cape-verde-50: #d8fefb;
  --color-cape-verde-100: #caf5f1;
  --color-cape-verde-200: #ade2dd;
  --color-cape-verde-300: #8ecbc6;
  --color-cape-verde-400: #66aaa5;
  --color-cape-verde-500: #468d88;
  --color-cape-verde-600: #2b706c;
  --color-cape-verde-700: #005854;
  --color-cape-verde-800: #084441;
  --color-cape-verde-900: #023532;
  --color-cape-verde-950: #00211f;
}