Clear Sky to Bronze Color Palette

About this palette

Clear Sky to Bronze is a 5-color vibrant, warm, neon palette: #85CEFF (Clear Sky), #CE1E4A (Demon Princess), #00C774 (Magical Malachite), #FE3900 (Coquelicot), #A97A00 (Bronze). It mixes blue, red, green, yellow tones and feels warm overall. The strongest text pairing is #85CEFF on #CE1E4A with a contrast ratio of 3.14:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Clear Sky	rgb(133, 206, 255)	hsl(204, 100%, 76%)
Demon Princess	rgb(206, 30, 74)	hsl(345, 75%, 46%)
Magical Malachite	rgb(0, 199, 116)	hsl(155, 100%, 39%)
Coquelicot	rgb(254, 57, 0)	hsl(13, 100%, 50%)
Bronze	rgb(169, 122, 0)	hsl(43, 100%, 33%)

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.

Aa3.14:1 Poor#85CEFF on #CE1E4A
Aa3.14:1 Poor#CE1E4A on #85CEFF

Color blindness preview

CSS variables

/* Clear Sky to Bronze — https://swatchly.xyz/palette/85ceff-ce1e4a-00c774-fe3900-a97a00 */
:root {
  --clear-sky: #85ceff;
  --demon-princess: #ce1e4a;
  --magical-malachite: #00c774;
  --coquelicot: #fe3900;
  --bronze: #a97a00;
}

Tailwind CSS v4

/* Clear Sky to Bronze — https://swatchly.xyz/palette/85ceff-ce1e4a-00c774-fe3900-a97a00 */
@theme {
  --color-clear-sky: #85ceff;
  --color-clear-sky-50: #f0f9ff;
  --color-clear-sky-100: #ddf1ff;
  --color-clear-sky-200: #b7e1ff;
  --color-clear-sky-300: #85ceff;
  --color-clear-sky-400: #69adda;
  --color-clear-sky-500: #4890be;
  --color-clear-sky-600: #2b75a1;
  --color-clear-sky-700: #145c84;
  --color-clear-sky-800: #02486b;
  --color-clear-sky-900: #003753;
  --color-clear-sky-950: #002236;
  --color-demon-princess: #ce1e4a;
  --color-demon-princess-50: #fff1f2;
  --color-demon-princess-100: #ffe5e6;
  --color-demon-princess-200: #ffcbcd;
  --color-demon-princess-300: #ffa9af;
  --color-demon-princess-400: #ff7183;
  --color-demon-princess-500: #ed4463;
  --color-demon-princess-600: #ce1e4a;
  --color-demon-princess-700: #aa0037;
  --color-demon-princess-800: #86002a;
  --color-demon-princess-900: #69001f;
  --color-demon-princess-950: #450011;
  --color-magical-malachite: #00c774;
  --color-magical-malachite-50: #e5ffed;
  --color-magical-malachite-100: #c4ffd8;
  --color-magical-malachite-200: #91f5b7;
  --color-magical-malachite-300: #6ae29b;
  --color-magical-malachite-400: #00c774;
  --color-magical-malachite-500: #00a660;
  --color-magical-malachite-600: #00854c;
  --color-magical-malachite-700: #006a3b;
  --color-magical-malachite-800: #00522d;
  --color-magical-malachite-900: #003f21;
  --color-magical-malachite-950: #002712;
  --color-coquelicot: #fe3900;
  --color-coquelicot-50: #fff4f1;
  --color-coquelicot-100: #ffe9e3;
  --color-coquelicot-200: #ffd0c4;
  --color-coquelicot-300: #ffb09e;
  --color-coquelicot-400: #ff7d61;
  --color-coquelicot-500: #fe3900;
  --color-coquelicot-600: #ce2c00;
  --color-coquelicot-700: #a52100;
  --color-coquelicot-800: #821800;
  --color-coquelicot-900: #651000;
  --color-coquelicot-950: #420700;
  --color-bronze: #a97a00;
  --color-bronze-50: #fff3df;
  --color-bronze-100: #ffe7bd;
  --color-bronze-200: #f6d08d;
  --color-bronze-300: #e2b869;
  --color-bronze-400: #c59739;
  --color-bronze-500: #a97a00;
  --color-bronze-600: #896200;
  --color-bronze-700: #6d4d00;
  --color-bronze-800: #563c00;
  --color-bronze-900: #432e00;
  --color-bronze-950: #2b1c00;
}