Royal Crown to Cold Light of Day Color Palette

About this palette

Royal Crown to Cold Light of Day is a 5-color cool palette: #4D3261 (Royal Crown), #7F5200 (Coffee Adept), #008E8E (Dark Cyan), #DA9300 (Tiger King), #25EDF4 (Cold Light of Day). It mixes purple, brown, turquoise, orange tones and feels cool overall. The strongest text pairing is #4D3261 on #25EDF4 with a contrast ratio of 7.46:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Crown	rgb(77, 50, 97)	hsl(274, 32%, 29%)
Coffee Adept	rgb(127, 82, 0)	hsl(39, 100%, 25%)
Dark Cyan	rgb(0, 142, 142)	hsl(180, 100%, 28%)
Tiger King	rgb(218, 147, 0)	hsl(40, 100%, 43%)
Cold Light of Day	rgb(37, 237, 244)	hsl(182, 90%, 55%)

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.46:1 Very good#4D3261 on #25EDF4
Aa7.46:1 Very good#25EDF4 on #4D3261
Aa4.66:1 Good#7F5200 on #25EDF4
Aa4.66:1 Good#25EDF4 on #7F5200
Aa4.19:1 Poor#4D3261 on #DA9300
Aa4.19:1 Poor#DA9300 on #4D3261

Color blindness preview

CSS variables

/* Royal Crown to Cold Light of Day — https://swatchly.xyz/palette/4d3261-7f5200-008e8e-da9300-25edf4 */
:root {
  --royal-crown: #4d3261;
  --coffee-adept: #7f5200;
  --dark-cyan: #008e8e;
  --tiger-king: #da9300;
  --cold-light-of-day: #25edf4;
}

Tailwind CSS v4

/* Royal Crown to Cold Light of Day — https://swatchly.xyz/palette/4d3261-7f5200-008e8e-da9300-25edf4 */
@theme {
  --color-royal-crown: #4d3261;
  --color-royal-crown-50: #f9f2ff;
  --color-royal-crown-100: #f3e5ff;
  --color-royal-crown-200: #e4cdf7;
  --color-royal-crown-300: #ceb4e4;
  --color-royal-crown-400: #af93c7;
  --color-royal-crown-500: #9477ab;
  --color-royal-crown-600: #785c8e;
  --color-royal-crown-700: #604773;
  --color-royal-crown-800: #4d3261;
  --color-royal-crown-900: #3a2848;
  --color-royal-crown-950: #24172e;
  --color-coffee-adept: #7f5200;
  --color-coffee-adept-50: #fff3e5;
  --color-coffee-adept-100: #ffe7ca;
  --color-coffee-adept-200: #f8d2a3;
  --color-coffee-adept-300: #e6bc85;
  --color-coffee-adept-400: #cb9c5f;
  --color-coffee-adept-500: #b18140;
  --color-coffee-adept-600: #966824;
  --color-coffee-adept-700: #7f5200;
  --color-coffee-adept-800: #644000;
  --color-coffee-adept-900: #4e3000;
  --color-coffee-adept-950: #321d00;
  --color-dark-cyan: #008e8e;
  --color-dark-cyan-50: #cbfffe;
  --color-dark-cyan-100: #b5f6f4;
  --color-dark-cyan-200: #94e2e1;
  --color-dark-cyan-300: #6fcccb;
  --color-dark-cyan-400: #3eabab;
  --color-dark-cyan-500: #008e8e;
  --color-dark-cyan-600: #007272;
  --color-dark-cyan-700: #005b5b;
  --color-dark-cyan-800: #004848;
  --color-dark-cyan-900: #003838;
  --color-dark-cyan-950: #002424;
  --color-tiger-king: #da9300;
  --color-tiger-king-50: #fff4e6;
  --color-tiger-king-100: #ffe9cb;
  --color-tiger-king-200: #ffd090;
  --color-tiger-king-300: #f3b65c;
  --color-tiger-king-400: #da9300;
  --color-tiger-king-500: #b67a00;
  --color-tiger-king-600: #936200;
  --color-tiger-king-700: #754d00;
  --color-tiger-king-800: #5c3b00;
  --color-tiger-king-900: #472d00;
  --color-tiger-king-950: #2d1b00;
  --color-cold-light-of-day: #25edf4;
  --color-cold-light-of-day-50: #c6fdff;
  --color-cold-light-of-day-100: #97f9fd;
  --color-cold-light-of-day-200: #25edf4;
  --color-cold-light-of-day-300: #37d4da;
  --color-cold-light-of-day-400: #00b3b9;
  --color-cold-light-of-day-500: #00969b;
  --color-cold-light-of-day-600: #00797d;
  --color-cold-light-of-day-700: #006164;
  --color-cold-light-of-day-800: #004d4f;
  --color-cold-light-of-day-900: #003b3d;
  --color-cold-light-of-day-950: #002526;
}