Sky to Serrano Pepper color palette

70E0FFSky F0773EOrange Crush 660E00Blood of Zeus 8952C1Lusty Lavender 415F00Serrano Pepper

About this palette

Sky to Serrano Pepper is a 5-color cool palette: #70E0FF (Sky), #F0773E (Orange Crush), #660E00 (Blood of Zeus), #8952C1 (Lusty Lavender), #415F00 (Serrano Pepper). It mixes blue, orange, red, purple, green tones and feels cool overall. The strongest text pairing is #70E0FF on #660E00 with a contrast ratio of 8.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sky	rgb(112, 224, 255)	hsl(193, 100%, 72%)
Orange Crush	rgb(240, 119, 62)	hsl(19, 86%, 59%)
Blood of Zeus	rgb(102, 14, 0)	hsl(8, 100%, 20%)
Lusty Lavender	rgb(137, 82, 193)	hsl(270, 47%, 54%)
Serrano Pepper	rgb(65, 95, 0)	hsl(79, 100%, 19%)

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.

Aa8.47:1 Very good#70E0FF on #660E00
Aa8.47:1 Very good#660E00 on #70E0FF
Aa4.82:1 Good#70E0FF on #415F00
Aa4.82:1 Good#415F00 on #70E0FF
Aa4.55:1 Good#F0773E on #660E00
Aa4.55:1 Good#660E00 on #F0773E
Aa3.41:1 Poor#70E0FF on #8952C1
Aa3.41:1 Poor#8952C1 on #70E0FF

Color blindness preview

CSS variables

/* Sky to Serrano Pepper — https://swatchly.xyz/palette/70e0ff-f0773e-660e00-8952c1-415f00 */
:root {
  --sky: #70e0ff;
  --orange-crush: #f0773e;
  --blood-of-zeus: #660e00;
  --lusty-lavender: #8952c1;
  --serrano-pepper: #415f00;
}

Tailwind CSS v4

/* Sky to Serrano Pepper — https://swatchly.xyz/palette/70e0ff-f0773e-660e00-8952c1-415f00 */
@theme {
  --color-sky: #70e0ff;
  --color-sky-50: #d6f5ff;
  --color-sky-100: #b7eeff;
  --color-sky-200: #70e0ff;
  --color-sky-300: #69c9e4;
  --color-sky-400: #3aabc8;
  --color-sky-500: #0091ae;
  --color-sky-600: #00758d;
  --color-sky-700: #005e72;
  --color-sky-800: #004b5b;
  --color-sky-900: #003a46;
  --color-sky-950: #00242d;
  --color-orange-crush: #f0773e;
  --color-orange-crush-50: #fff1eb;
  --color-orange-crush-100: #ffe3d7;
  --color-orange-crush-200: #ffc7af;
  --color-orange-crush-300: #ffa57e;
  --color-orange-crush-400: #f0773e;
  --color-orange-crush-500: #d15b1d;
  --color-orange-crush-600: #ae4400;
  --color-orange-crush-700: #8c3500;
  --color-orange-crush-800: #6f2800;
  --color-orange-crush-900: #571e00;
  --color-orange-crush-950: #391100;
  --color-blood-of-zeus: #660e00;
  --color-blood-of-zeus-50: #fff2ef;
  --color-blood-of-zeus-100: #ffe4de;
  --color-blood-of-zeus-200: #ffc9bd;
  --color-blood-of-zeus-300: #fda895;
  --color-blood-of-zeus-400: #e28572;
  --color-blood-of-zeus-500: #c66956;
  --color-blood-of-zeus-600: #a84f3d;
  --color-blood-of-zeus-700: #8b3a2b;
  --color-blood-of-zeus-800: #722a1d;
  --color-blood-of-zeus-900: #660e00;
  --color-blood-of-zeus-950: #3d1008;
  --color-lusty-lavender: #8952c1;
  --color-lusty-lavender-50: #f8f2ff;
  --color-lusty-lavender-100: #f1e7ff;
  --color-lusty-lavender-200: #e4cfff;
  --color-lusty-lavender-300: #d4b3ff;
  --color-lusty-lavender-400: #bd8af7;
  --color-lusty-lavender-500: #a36ddd;
  --color-lusty-lavender-600: #8952c1;
  --color-lusty-lavender-700: #6f3ba1;
  --color-lusty-lavender-800: #592984;
  --color-lusty-lavender-900: #451c6a;
  --color-lusty-lavender-950: #2c0e47;
  --color-serrano-pepper: #415f00;
  --color-serrano-pepper-50: #e9fed0;
  --color-serrano-pepper-100: #ddf5c2;
  --color-serrano-pepper-200: #c7e3a5;
  --color-serrano-pepper-300: #aecd87;
  --color-serrano-pepper-400: #8dae60;
  --color-serrano-pepper-500: #719241;
  --color-serrano-pepper-600: #577626;
  --color-serrano-pepper-700: #415f00;
  --color-serrano-pepper-800: #324a02;
  --color-serrano-pepper-900: #263900;
  --color-serrano-pepper-950: #162400;
}