Whale Shark to Knock on Wood Color Palette

About this palette

Whale Shark to Knock on Wood is a 5-color muted palette: #617E97 (Whale Shark), #5F563D (Olive Bark), #B8CAD8 (Life at Sea), #2C2A33 (Haiti), #A19A7F (Knock on Wood). It mixes blue, brown, gray, yellow tones and feels warm overall. The strongest text pairing is #B8CAD8 on #2C2A33 with a contrast ratio of 8.40:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Whale Shark	rgb(97, 126, 151)	hsl(208, 22%, 49%)
Olive Bark	rgb(95, 86, 61)	hsl(44, 22%, 31%)
Life at Sea	rgb(184, 202, 216)	hsl(206, 29%, 78%)
Haiti	rgb(44, 42, 51)	hsl(253, 10%, 18%)
Knock on Wood	rgb(161, 154, 127)	hsl(48, 15%, 56%)

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.40:1 Very good#B8CAD8 on #2C2A33
Aa8.40:1 Very good#2C2A33 on #B8CAD8
Aa5.01:1 Good#2C2A33 on #A19A7F
Aa5.01:1 Good#A19A7F on #2C2A33
Aa4.32:1 Poor#5F563D on #B8CAD8
Aa4.32:1 Poor#B8CAD8 on #5F563D
Aa3.32:1 Poor#617E97 on #2C2A33
Aa3.32:1 Poor#2C2A33 on #617E97

Color blindness preview

CSS variables

/* Whale Shark to Knock on Wood — https://swatchly.xyz/palette/617e97-5f563d-b8cad8-2c2a33-a19a7f */
:root {
  --whale-shark: #617e97;
  --olive-bark: #5f563d;
  --life-at-sea: #b8cad8;
  --haiti: #2c2a33;
  --knock-on-wood: #a19a7f;
}

Tailwind CSS v4

/* Whale Shark to Knock on Wood — https://swatchly.xyz/palette/617e97-5f563d-b8cad8-2c2a33-a19a7f */
@theme {
  --color-whale-shark: #617e97;
  --color-whale-shark-50: #e9f5ff;
  --color-whale-shark-100: #d5eafc;
  --color-whale-shark-200: #bcd4ea;
  --color-whale-shark-300: #a1bcd4;
  --color-whale-shark-400: #7e9bb5;
  --color-whale-shark-500: #617e97;
  --color-whale-shark-600: #4a667d;
  --color-whale-shark-700: #385166;
  --color-whale-shark-800: #2a4052;
  --color-whale-shark-900: #1f3241;
  --color-whale-shark-950: #121f2a;
  --color-olive-bark: #5f563d;
  --color-olive-bark-50: #fbf5e5;
  --color-olive-bark-100: #f1ebd9;
  --color-olive-bark-200: #dfd7c2;
  --color-olive-bark-300: #cac1a9;
  --color-olive-bark-400: #aba288;
  --color-olive-bark-500: #90876c;
  --color-olive-bark-600: #766c53;
  --color-olive-bark-700: #5f563d;
  --color-olive-bark-800: #4a432f;
  --color-olive-bark-900: #393322;
  --color-olive-bark-950: #241f13;
  --color-life-at-sea: #b8cad8;
  --color-life-at-sea-50: #f2f9ff;
  --color-life-at-sea-100: #e6f1fa;
  --color-life-at-sea-200: #d2dfe9;
  --color-life-at-sea-300: #b8cad8;
  --color-life-at-sea-400: #99a9b6;
  --color-life-at-sea-500: #7c8d9a;
  --color-life-at-sea-600: #61717d;
  --color-life-at-sea-700: #4b5964;
  --color-life-at-sea-800: #38454f;
  --color-life-at-sea-900: #2a343d;
  --color-life-at-sea-950: #192026;
  --color-haiti: #2c2a33;
  --color-haiti-50: #f5f4fb;
  --color-haiti-100: #ebeaf1;
  --color-haiti-200: #d8d6df;
  --color-haiti-300: #c1bfc9;
  --color-haiti-400: #a09ea9;
  --color-haiti-500: #84818c;
  --color-haiti-600: #686670;
  --color-haiti-700: #504e57;
  --color-haiti-800: #3c3b42;
  --color-haiti-900: #2c2a33;
  --color-haiti-950: #1a191d;
  --color-knock-on-wood: #a19a7f;
  --color-knock-on-wood-50: #f7f3e2;
  --color-knock-on-wood-100: #ece7d5;
  --color-knock-on-wood-200: #d8d2bc;
  --color-knock-on-wood-300: #c1bba2;
  --color-knock-on-wood-400: #a19a7f;
  --color-knock-on-wood-500: #878066;
  --color-knock-on-wood-600: #6e674e;
  --color-knock-on-wood-700: #58523b;
  --color-knock-on-wood-800: #45402d;
  --color-knock-on-wood-900: #363221;
  --color-knock-on-wood-950: #221f13;
}