Olympic Blue to Bloodhound color palette

6191EAOlympic Blue 603125Hairy Heath 90BFF8Electric Eel 2C2300Secret Passage B35600Bloodhound

About this palette

Olympic Blue to Bloodhound is a 5-color warm, earthy palette: #6191EA (Olympic Blue), #603125 (Hairy Heath), #90BFF8 (Electric Eel), #2C2300 (Secret Passage), #B35600 (Bloodhound). It mixes blue, brown tones and feels warm overall. The strongest text pairing is #90BFF8 on #2C2300 with a contrast ratio of 8.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olympic Blue	rgb(97, 145, 234)	hsl(219, 77%, 65%)
Hairy Heath	rgb(96, 49, 37)	hsl(12, 44%, 26%)
Electric Eel	rgb(144, 191, 248)	hsl(213, 88%, 77%)
Secret Passage	rgb(44, 35, 0)	hsl(48, 100%, 9%)
Bloodhound	rgb(179, 86, 0)	hsl(29, 100%, 35%)

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.16:1 Very good#90BFF8 on #2C2300
Aa8.16:1 Very good#2C2300 on #90BFF8
Aa5.60:1 Good#603125 on #90BFF8
Aa5.60:1 Good#90BFF8 on #603125
Aa5.01:1 Good#6191EA on #2C2300
Aa5.01:1 Good#2C2300 on #6191EA
Aa3.44:1 Poor#6191EA on #603125
Aa3.44:1 Poor#603125 on #6191EA

Color blindness preview

CSS variables

/* Olympic Blue to Bloodhound — https://swatchly.xyz/palette/6191ea-603125-90bff8-2c2300-b35600 */
:root {
  --olympic-blue: #6191ea;
  --hairy-heath: #603125;
  --electric-eel: #90bff8;
  --secret-passage: #2c2300;
  --bloodhound: #b35600;
}

Tailwind CSS v4

/* Olympic Blue to Bloodhound — https://swatchly.xyz/palette/6191ea-603125-90bff8-2c2300-b35600 */
@theme {
  --color-olympic-blue: #6191ea;
  --color-olympic-blue-50: #f4f8ff;
  --color-olympic-blue-100: #e8f0ff;
  --color-olympic-blue-200: #cddfff;
  --color-olympic-blue-300: #aecbff;
  --color-olympic-blue-400: #7eacff;
  --color-olympic-blue-500: #6191ea;
  --color-olympic-blue-600: #4573c9;
  --color-olympic-blue-700: #3059a9;
  --color-olympic-blue-800: #1f448a;
  --color-olympic-blue-900: #14336e;
  --color-olympic-blue-950: #081e48;
  --color-hairy-heath: #603125;
  --color-hairy-heath-50: #fff2ee;
  --color-hairy-heath-100: #ffe4dd;
  --color-hairy-heath-200: #f8ccc0;
  --color-hairy-heath-300: #e5b3a6;
  --color-hairy-heath-400: #c79284;
  --color-hairy-heath-500: #ab7668;
  --color-hairy-heath-600: #8e5b4e;
  --color-hairy-heath-700: #73463a;
  --color-hairy-heath-800: #603125;
  --color-hairy-heath-900: #48271e;
  --color-hairy-heath-950: #2e1711;
  --color-electric-eel: #90bff8;
  --color-electric-eel-50: #eaf3ff;
  --color-electric-eel-100: #d8e9ff;
  --color-electric-eel-200: #b4d6ff;
  --color-electric-eel-300: #90bff8;
  --color-electric-eel-400: #74a0d6;
  --color-electric-eel-500: #5985bb;
  --color-electric-eel-600: #416b9e;
  --color-electric-eel-700: #2e5583;
  --color-electric-eel-800: #20436b;
  --color-electric-eel-900: #163456;
  --color-electric-eel-950: #0a2038;
  --color-secret-passage: #2c2300;
  --color-secret-passage-50: #fbf5e0;
  --color-secret-passage-100: #f2ebd3;
  --color-secret-passage-200: #dfd8bb;
  --color-secret-passage-300: #cac1a0;
  --color-secret-passage-400: #aba27e;
  --color-secret-passage-500: #918762;
  --color-secret-passage-600: #776e4a;
  --color-secret-passage-700: #615837;
  --color-secret-passage-800: #4d4629;
  --color-secret-passage-900: #3e371d;
  --color-secret-passage-950: #2c2300;
  --color-bloodhound: #b35600;
  --color-bloodhound-50: #fff2eb;
  --color-bloodhound-100: #ffe7da;
  --color-bloodhound-200: #ffcfb3;
  --color-bloodhound-300: #ffb181;
  --color-bloodhound-400: #ea8d51;
  --color-bloodhound-500: #cf702d;
  --color-bloodhound-600: #b35600;
  --color-bloodhound-700: #8f4300;
  --color-bloodhound-800: #713400;
  --color-bloodhound-900: #582700;
  --color-bloodhound-950: #391600;
}