Noble Knight to Sugar Glaze Color Palette

About this palette

Noble Knight to Sugar Glaze is a 5-color cool palette: #424C77 (Noble Knight), #3C7586 (Calypso), #269FB3 (Rainy Mood), #DBB581 (Honey Bunny), #FFF0E0 (Sugar Glaze). It mixes blue, turquoise, orange, white tones and feels cool overall. The strongest text pairing is #424C77 on #FFF0E0 with a contrast ratio of 7.42:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noble Knight	rgb(66, 76, 119)	hsl(229, 29%, 36%)
Calypso	rgb(60, 117, 134)	hsl(194, 38%, 38%)
Rainy Mood	rgb(38, 159, 179)	hsl(189, 65%, 43%)
Honey Bunny	rgb(219, 181, 129)	hsl(35, 56%, 68%)
Sugar Glaze	rgb(255, 240, 224)	hsl(31, 100%, 94%)

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.42:1 Very good#424C77 on #FFF0E0
Aa7.42:1 Very good#FFF0E0 on #424C77
Aa4.60:1 Good#3C7586 on #FFF0E0
Aa4.60:1 Good#FFF0E0 on #3C7586
Aa4.32:1 Poor#424C77 on #DBB581
Aa4.32:1 Poor#DBB581 on #424C77

Color blindness preview

CSS variables

/* Noble Knight to Sugar Glaze — https://swatchly.xyz/palette/424c77-3c7586-269fb3-dbb581-fff0e0 */
:root {
  --noble-knight: #424c77;
  --calypso: #3c7586;
  --rainy-mood: #269fb3;
  --honey-bunny: #dbb581;
  --sugar-glaze: #fff0e0;
}

Tailwind CSS v4

/* Noble Knight to Sugar Glaze — https://swatchly.xyz/palette/424c77-3c7586-269fb3-dbb581-fff0e0 */
@theme {
  --color-noble-knight: #424c77;
  --color-noble-knight-50: #f2f5ff;
  --color-noble-knight-100: #e4eaff;
  --color-noble-knight-200: #cad5fb;
  --color-noble-knight-300: #b1bde8;
  --color-noble-knight-400: #8f9cca;
  --color-noble-knight-500: #737fae;
  --color-noble-knight-600: #59648f;
  --color-noble-knight-700: #424c77;
  --color-noble-knight-800: #333b5d;
  --color-noble-knight-900: #262d49;
  --color-noble-knight-950: #161b2f;
  --color-calypso: #3c7586;
  --color-calypso-50: #e6f9ff;
  --color-calypso-100: #cff2fe;
  --color-calypso-200: #b5e0ee;
  --color-calypso-300: #99cada;
  --color-calypso-400: #74abbd;
  --color-calypso-500: #5790a1;
  --color-calypso-600: #3c7586;
  --color-calypso-700: #295d6d;
  --color-calypso-800: #1a4957;
  --color-calypso-900: #103944;
  --color-calypso-950: #06232b;
  --color-rainy-mood: #269fb3;
  --color-rainy-mood-50: #e7fbff;
  --color-rainy-mood-100: #cef7ff;
  --color-rainy-mood-200: #a1eaf9;
  --color-rainy-mood-300: #81d6e7;
  --color-rainy-mood-400: #53b9cc;
  --color-rainy-mood-500: #269fb3;
  --color-rainy-mood-600: #008193;
  --color-rainy-mood-700: #006675;
  --color-rainy-mood-800: #004f5b;
  --color-rainy-mood-900: #003d46;
  --color-rainy-mood-950: #00262c;
  --color-honey-bunny: #dbb581;
  --color-honey-bunny-50: #fff0dd;
  --color-honey-bunny-100: #fde4c2;
  --color-honey-bunny-200: #eccea7;
  --color-honey-bunny-300: #dbb581;
  --color-honey-bunny-400: #ba9765;
  --color-honey-bunny-500: #a07c49;
  --color-honey-bunny-600: #846331;
  --color-honey-bunny-700: #6c4d1f;
  --color-honey-bunny-800: #573c12;
  --color-honey-bunny-900: #452e09;
  --color-honey-bunny-950: #2c1c03;
  --color-sugar-glaze: #fff0e0;
  --color-sugar-glaze-50: #fff0e0;
  --color-sugar-glaze-100: #f1e7dd;
  --color-sugar-glaze-200: #dfd4c8;
  --color-sugar-glaze-300: #cabdb0;
  --color-sugar-glaze-400: #ac9e90;
  --color-sugar-glaze-500: #918375;
  --color-sugar-glaze-600: #76695c;
  --color-sugar-glaze-700: #5f5347;
  --color-sugar-glaze-800: #4a4036;
  --color-sugar-glaze-900: #3a3128;
  --color-sugar-glaze-950: #241e17;
}