Chivalrous Walrus to Old World color palette

8A635DChivalrous Walrus CBD5F0Frozen Periwinkle 39493FDeep Forest 181312King Kong 9EA8C3Old World

About this palette

Chivalrous Walrus to Old World is a 5-color muted palette: #8A635D (Chivalrous Walrus), #CBD5F0 (Frozen Periwinkle), #39493F (Deep Forest), #181312 (King Kong), #9EA8C3 (Old World). It mixes red, blue, gray, black tones and feels cool overall. The strongest text pairing is #CBD5F0 on #181312 with a contrast ratio of 12.55:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chivalrous Walrus	rgb(138, 99, 93)	hsl(8, 19%, 45%)
Frozen Periwinkle	rgb(203, 213, 240)	hsl(224, 55%, 87%)
Deep Forest	rgb(57, 73, 63)	hsl(142, 12%, 25%)
King Kong	rgb(24, 19, 18)	hsl(10, 14%, 8%)
Old World	rgb(158, 168, 195)	hsl(224, 24%, 69%)

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.

Aa12.55:1 Super#CBD5F0 on #181312
Aa12.55:1 Super#181312 on #CBD5F0
Aa7.75:1 Very good#181312 on #9EA8C3
Aa7.75:1 Very good#9EA8C3 on #181312
Aa6.51:1 Good#CBD5F0 on #39493F
Aa6.51:1 Good#39493F on #CBD5F0
Aa4.02:1 Poor#39493F on #9EA8C3
Aa4.02:1 Poor#9EA8C3 on #39493F

Color blindness preview

CSS variables

/* Chivalrous Walrus to Old World — https://swatchly.xyz/palette/8a635d-cbd5f0-39493f-181312-9ea8c3 */
:root {
  --chivalrous-walrus: #8a635d;
  --frozen-periwinkle: #cbd5f0;
  --deep-forest: #39493f;
  --king-kong: #181312;
  --old-world: #9ea8c3;
}

Tailwind CSS v4

/* Chivalrous Walrus to Old World — https://swatchly.xyz/palette/8a635d-cbd5f0-39493f-181312-9ea8c3 */
@theme {
  --color-chivalrous-walrus: #8a635d;
  --color-chivalrous-walrus-50: #fff2ef;
  --color-chivalrous-walrus-100: #ffe5e1;
  --color-chivalrous-walrus-200: #f1d0ca;
  --color-chivalrous-walrus-300: #ddb8b2;
  --color-chivalrous-walrus-400: #c19892;
  --color-chivalrous-walrus-500: #a57d76;
  --color-chivalrous-walrus-600: #8a635d;
  --color-chivalrous-walrus-700: #704d48;
  --color-chivalrous-walrus-800: #593b36;
  --color-chivalrous-walrus-900: #462c28;
  --color-chivalrous-walrus-950: #2d1a18;
  --color-frozen-periwinkle: #cbd5f0;
  --color-frozen-periwinkle-50: #eff4ff;
  --color-frozen-periwinkle-100: #e3e9fb;
  --color-frozen-periwinkle-200: #cbd5f0;
  --color-frozen-periwinkle-300: #b6bfd6;
  --color-frozen-periwinkle-400: #97a0b8;
  --color-frozen-periwinkle-500: #7c859d;
  --color-frozen-periwinkle-600: #626b82;
  --color-frozen-periwinkle-700: #4d5469;
  --color-frozen-periwinkle-800: #3b4254;
  --color-frozen-periwinkle-900: #2d3242;
  --color-frozen-periwinkle-950: #1b1f2a;
  --color-deep-forest: #39493f;
  --color-deep-forest-50: #eef8f1;
  --color-deep-forest-100: #e3efe7;
  --color-deep-forest-200: #cedcd2;
  --color-deep-forest-300: #b6c6bc;
  --color-deep-forest-400: #96a79c;
  --color-deep-forest-500: #7b8c81;
  --color-deep-forest-600: #617267;
  --color-deep-forest-700: #4c5c52;
  --color-deep-forest-800: #39493f;
  --color-deep-forest-900: #2c3831;
  --color-deep-forest-950: #1b231e;
  --color-king-kong: #181312;
  --color-king-kong-50: #f8f4f3;
  --color-king-kong-100: #efeae9;
  --color-king-kong-200: #dbd6d5;
  --color-king-kong-300: #c5bfbe;
  --color-king-kong-400: #a6a09e;
  --color-king-kong-500: #898281;
  --color-king-kong-600: #6c6664;
  --color-king-kong-700: #534d4c;
  --color-king-kong-800: #3d3938;
  --color-king-kong-900: #2c2827;
  --color-king-kong-950: #181312;
  --color-old-world: #9ea8c3;
  --color-old-world-50: #f5f7ff;
  --color-old-world-100: #e9efff;
  --color-old-world-200: #d4dcf0;
  --color-old-world-300: #bec7de;
  --color-old-world-400: #9ea8c3;
  --color-old-world-500: #828ba5;
  --color-old-world-600: #667088;
  --color-old-world-700: #50586e;
  --color-old-world-800: #3d4457;
  --color-old-world-900: #2d3344;
  --color-old-world-950: #1b1f2b;
}