Pale Sky to Noble Knight color palette

About this palette

Pale Sky to Noble Knight is a 5-color muted, vintage palette: #C4F0FF (Pale Sky), #99775C (Whisky Barrel), #122124 (Sunken Ship), #D3AF8F (Baker’s Bread), #3A4A75 (Noble Knight). It mixes blue, orange, gray tones and feels balanced overall. The strongest text pairing is #C4F0FF on #122124 with a contrast ratio of 13.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pale Skyrgb(196, 240, 255)hsl(195, 100%, 88%)
Whisky Barrelrgb(153, 119, 92)hsl(27, 25%, 48%)
Sunken Shiprgb(18, 33, 36)hsl(190, 33%, 11%)
Baker’s Breadrgb(211, 175, 143)hsl(28, 44%, 69%)
Noble Knightrgb(58, 74, 117)hsl(224, 34%, 34%)

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.

  • Aa13.60:1 Super#C4F0FF on #122124
  • Aa13.60:1 Super#122124 on #C4F0FF
  • Aa8.12:1 Very good#122124 on #D3AF8F
  • Aa8.12:1 Very good#D3AF8F on #122124
  • Aa7.14:1 Very good#C4F0FF on #3A4A75
  • Aa7.14:1 Very good#3A4A75 on #C4F0FF
  • Aa4.26:1 Poor#D3AF8F on #3A4A75
  • Aa4.26:1 Poor#3A4A75 on #D3AF8F

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pale Sky to Noble Knight — https://swatchly.xyz/palette/c4f0ff-99775c-122124-d3af8f-3a4a75 */
:root {
  --pale-sky: #c4f0ff;
  --whisky-barrel: #99775c;
  --sunken-ship: #122124;
  --baker-s-bread: #d3af8f;
  --noble-knight: #3a4a75;
}

Tailwind CSS v4

/* Pale Sky to Noble Knight — https://swatchly.xyz/palette/c4f0ff-99775c-122124-d3af8f-3a4a75 */
@theme {
  --color-pale-sky: #c4f0ff;
  --color-pale-sky-50: #dff7ff;
  --color-pale-sky-100: #c4f0ff;
  --color-pale-sky-200: #badbe6;
  --color-pale-sky-300: #a1c6d2;
  --color-pale-sky-400: #7fa7b5;
  --color-pale-sky-500: #638c9a;
  --color-pale-sky-600: #4b727f;
  --color-pale-sky-700: #375b67;
  --color-pale-sky-800: #274852;
  --color-pale-sky-900: #1c3740;
  --color-pale-sky-950: #0f2229;
  --color-whisky-barrel: #99775c;
  --color-whisky-barrel-50: #fff1e6;
  --color-whisky-barrel-100: #fce3d1;
  --color-whisky-barrel-200: #eacdb7;
  --color-whisky-barrel-300: #d5b59c;
  --color-whisky-barrel-400: #b69378;
  --color-whisky-barrel-500: #99775c;
  --color-whisky-barrel-600: #7e5e45;
  --color-whisky-barrel-700: #664a33;
  --color-whisky-barrel-800: #523925;
  --color-whisky-barrel-900: #412c1a;
  --color-whisky-barrel-950: #2a1b0e;
  --color-sunken-ship: #122124;
  --color-sunken-ship-50: #edf7fa;
  --color-sunken-ship-100: #e2eef0;
  --color-sunken-ship-200: #ccdadd;
  --color-sunken-ship-300: #b4c4c8;
  --color-sunken-ship-400: #94a5a9;
  --color-sunken-ship-500: #788a8d;
  --color-sunken-ship-600: #5e6f72;
  --color-sunken-ship-700: #49585b;
  --color-sunken-ship-800: #374447;
  --color-sunken-ship-900: #293436;
  --color-sunken-ship-950: #122124;
  --color-baker-s-bread: #d3af8f;
  --color-baker-s-bread-50: #ffecdc;
  --color-baker-s-bread-100: #f8dfc9;
  --color-baker-s-bread-200: #e6c9af;
  --color-baker-s-bread-300: #d3af8f;
  --color-baker-s-bread-400: #b49273;
  --color-baker-s-bread-500: #9a785a;
  --color-baker-s-bread-600: #806043;
  --color-baker-s-bread-700: #684c31;
  --color-baker-s-bread-800: #543b24;
  --color-baker-s-bread-900: #432e1a;
  --color-baker-s-bread-950: #2b1c0d;
  --color-noble-knight: #3a4a75;
  --color-noble-knight-50: #f1f5ff;
  --color-noble-knight-100: #e3ebff;
  --color-noble-knight-200: #c5d5fc;
  --color-noble-knight-300: #abbde8;
  --color-noble-knight-400: #889bca;
  --color-noble-knight-500: #6c7ead;
  --color-noble-knight-600: #51628e;
  --color-noble-knight-700: #3a4a75;
  --color-noble-knight-800: #2d3a5a;
  --color-noble-knight-900: #222c47;
  --color-noble-knight-950: #131a2e;
}

Similar palettes