Dark Olive to Captain Kirk Color Palette

About this palette

Dark Olive to Captain Kirk is a 5-color warm, earthy, vintage palette: #423C07 (Dark Olive), #999BFF (Cold Lips), #6B6500 (Forestial Outpost), #DBE1FF (Puffy Cloud), #978300 (Captain Kirk). It mixes brown, purple, yellow tones and feels warm overall. The strongest text pairing is #423C07 on #DBE1FF with a contrast ratio of 8.63:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Olive	rgb(66, 60, 7)	hsl(54, 81%, 14%)
Cold Lips	rgb(153, 155, 255)	hsl(239, 100%, 80%)
Forestial Outpost	rgb(107, 101, 0)	hsl(57, 100%, 21%)
Puffy Cloud	rgb(219, 225, 255)	hsl(230, 100%, 93%)
Captain Kirk	rgb(151, 131, 0)	hsl(52, 100%, 30%)

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.63:1 Very good#423C07 on #DBE1FF
Aa8.63:1 Very good#DBE1FF on #423C07
Aa4.65:1 Good#6B6500 on #DBE1FF
Aa4.65:1 Good#DBE1FF on #6B6500
Aa4.51:1 Good#423C07 on #999BFF
Aa4.51:1 Good#999BFF on #423C07

Color blindness preview

CSS variables

/* Dark Olive to Captain Kirk — https://swatchly.xyz/palette/423c07-999bff-6b6500-dbe1ff-978300 */
:root {
  --dark-olive: #423c07;
  --cold-lips: #999bff;
  --forestial-outpost: #6b6500;
  --puffy-cloud: #dbe1ff;
  --captain-kirk: #978300;
}

Tailwind CSS v4

/* Dark Olive to Captain Kirk — https://swatchly.xyz/palette/423c07-999bff-6b6500-dbe1ff-978300 */
@theme {
  --color-dark-olive: #423c07;
  --color-dark-olive-50: #faf7da;
  --color-dark-olive-100: #f0edcd;
  --color-dark-olive-200: #ddd9b3;
  --color-dark-olive-300: #c6c295;
  --color-dark-olive-400: #a6a170;
  --color-dark-olive-500: #8a8452;
  --color-dark-olive-600: #6e6839;
  --color-dark-olive-700: #555025;
  --color-dark-olive-800: #423c07;
  --color-dark-olive-900: #322e0f;
  --color-dark-olive-950: #1e1b06;
  --color-cold-lips: #999bff;
  --color-cold-lips-50: #f6f7ff;
  --color-cold-lips-100: #ebedff;
  --color-cold-lips-200: #d5d8ff;
  --color-cold-lips-300: #bcc0ff;
  --color-cold-lips-400: #999bff;
  --color-cold-lips-500: #7e7edf;
  --color-cold-lips-600: #6362bf;
  --color-cold-lips-700: #4e4aa0;
  --color-cold-lips-800: #3b3882;
  --color-cold-lips-900: #2d2968;
  --color-cold-lips-950: #1a1744;
  --color-forestial-outpost: #6b6500;
  --color-forestial-outpost-50: #faf8cc;
  --color-forestial-outpost-100: #efedb9;
  --color-forestial-outpost-200: #dbd89a;
  --color-forestial-outpost-300: #c3c078;
  --color-forestial-outpost-400: #a39e4e;
  --color-forestial-outpost-500: #87812c;
  --color-forestial-outpost-600: #6b6500;
  --color-forestial-outpost-700: #555000;
  --color-forestial-outpost-800: #423e00;
  --color-forestial-outpost-900: #333000;
  --color-forestial-outpost-950: #201e00;
  --color-puffy-cloud: #dbe1ff;
  --color-puffy-cloud-50: #e9edff;
  --color-puffy-cloud-100: #dbe1ff;
  --color-puffy-cloud-200: #cbcfe6;
  --color-puffy-cloud-300: #b5bad3;
  --color-puffy-cloud-400: #979cb7;
  --color-puffy-cloud-500: #7d829d;
  --color-puffy-cloud-600: #646982;
  --color-puffy-cloud-700: #4f546b;
  --color-puffy-cloud-800: #3d4155;
  --color-puffy-cloud-900: #2f3243;
  --color-puffy-cloud-950: #1c1e2b;
  --color-captain-kirk: #978300;
  --color-captain-kirk-50: #fff6c6;
  --color-captain-kirk-100: #f7ebaf;
  --color-captain-kirk-200: #e6d78e;
  --color-captain-kirk-300: #d1c06a;
  --color-captain-kirk-400: #b39f3a;
  --color-captain-kirk-500: #978300;
  --color-captain-kirk-600: #7a6900;
  --color-captain-kirk-700: #615300;
  --color-captain-kirk-800: #4c4100;
  --color-captain-kirk-900: #3b3200;
  --color-captain-kirk-950: #251f00;
}