Evil Cigar to Ahoy! Blue Color Palette

About this palette

Evil Cigar to Ahoy! Blue is a 5-color warm palette: #591E0F (Evil Cigar), #00A1C4 (Blue Ocean), #84332D (Dockside Red), #FFA89B (Frozen Salmon), #0084A8 (Ahoy! Blue). It mixes brown, blue, red, pink tones and feels warm overall. The strongest text pairing is #591E0F on #FFA89B with a contrast ratio of 7.00:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Evil Cigar	rgb(89, 30, 15)	hsl(12, 71%, 20%)
Blue Ocean	rgb(0, 161, 196)	hsl(191, 100%, 38%)
Dockside Red	rgb(132, 51, 45)	hsl(4, 49%, 35%)
Frozen Salmon	rgb(255, 168, 155)	hsl(8, 100%, 80%)
Ahoy! Blue	rgb(0, 132, 168)	hsl(193, 100%, 33%)

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.00:1 Very good#591E0F on #FFA89B
Aa7.00:1 Very good#FFA89B on #591E0F
Aa4.54:1 Good#84332D on #FFA89B
Aa4.54:1 Good#FFA89B on #84332D
Aa4.26:1 Poor#591E0F on #00A1C4
Aa4.26:1 Poor#00A1C4 on #591E0F
Aa3.01:1 Poor#591E0F on #0084A8
Aa3.01:1 Poor#0084A8 on #591E0F

Color blindness preview

CSS variables

/* Evil Cigar to Ahoy! Blue — https://swatchly.xyz/palette/591e0f-00a1c4-84332d-ffa89b-0084a8 */
:root {
  --evil-cigar: #591e0f;
  --blue-ocean: #00a1c4;
  --dockside-red: #84332d;
  --frozen-salmon: #ffa89b;
  --ahoy-blue: #0084a8;
}

Tailwind CSS v4

/* Evil Cigar to Ahoy! Blue — https://swatchly.xyz/palette/591e0f-00a1c4-84332d-ffa89b-0084a8 */
@theme {
  --color-evil-cigar: #591e0f;
  --color-evil-cigar-50: #fff2ee;
  --color-evil-cigar-100: #ffe4dd;
  --color-evil-cigar-200: #ffc9bb;
  --color-evil-cigar-300: #eeb09f;
  --color-evil-cigar-400: #d28e7c;
  --color-evil-cigar-500: #b67261;
  --color-evil-cigar-600: #995848;
  --color-evil-cigar-700: #7e4334;
  --color-evil-cigar-800: #663326;
  --color-evil-cigar-900: #591e0f;
  --color-evil-cigar-950: #35160e;
  --color-blue-ocean: #00a1c4;
  --color-blue-ocean-50: #ecfaff;
  --color-blue-ocean-100: #d8f5ff;
  --color-blue-ocean-200: #a8e9ff;
  --color-blue-ocean-300: #7ad8f5;
  --color-blue-ocean-400: #48bbdc;
  --color-blue-ocean-500: #00a1c4;
  --color-blue-ocean-600: #00829e;
  --color-blue-ocean-700: #00677e;
  --color-blue-ocean-800: #005062;
  --color-blue-ocean-900: #003d4c;
  --color-blue-ocean-950: #002530;
  --color-dockside-red: #84332d;
  --color-dockside-red-50: #fff2f0;
  --color-dockside-red-100: #ffe4e0;
  --color-dockside-red-200: #ffc7c0;
  --color-dockside-red-300: #f8a79d;
  --color-dockside-red-400: #db847a;
  --color-dockside-red-500: #bd665d;
  --color-dockside-red-600: #9e4c44;
  --color-dockside-red-700: #84332d;
  --color-dockside-red-800: #672823;
  --color-dockside-red-900: #521c18;
  --color-dockside-red-950: #350f0c;
  --color-frozen-salmon: #ffa89b;
  --color-frozen-salmon-50: #fff3f0;
  --color-frozen-salmon-100: #ffe5e1;
  --color-frozen-salmon-200: #ffcac1;
  --color-frozen-salmon-300: #ffa89b;
  --color-frozen-salmon-400: #da8a7e;
  --color-frozen-salmon-500: #be6d62;
  --color-frozen-salmon-600: #a05349;
  --color-frozen-salmon-700: #833e35;
  --color-frozen-salmon-800: #6a2d26;
  --color-frozen-salmon-900: #54201b;
  --color-frozen-salmon-950: #37120e;
  --color-ahoy-blue: #0084a8;
  --color-ahoy-blue-50: #e8f8ff;
  --color-ahoy-blue-100: #d7f3ff;
  --color-ahoy-blue-200: #abe6ff;
  --color-ahoy-blue-300: #85d4f4;
  --color-ahoy-blue-400: #5ab7db;
  --color-ahoy-blue-500: #349ec2;
  --color-ahoy-blue-600: #0084a8;
  --color-ahoy-blue-700: #006986;
  --color-ahoy-blue-800: #005269;
  --color-ahoy-blue-900: #003f51;
  --color-ahoy-blue-950: #002734;
}