Sky High to Embarrassed Frog color palette

A4C5F2Sky High 172B47Midnight Ocean 624800Very Coffee 5FB3FDHello Summer 9D6200Embarrassed Frog

About this palette

Sky High to Embarrassed Frog is a 5-color cool, vintage palette: #A4C5F2 (Sky High), #172B47 (Midnight Ocean), #624800 (Very Coffee), #5FB3FD (Hello Summer), #9D6200 (Embarrassed Frog). It mixes blue, brown tones and feels cool overall. The strongest text pairing is #A4C5F2 on #172B47 with a contrast ratio of 8.04:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sky High	rgb(164, 197, 242)	hsl(215, 75%, 80%)
Midnight Ocean	rgb(23, 43, 71)	hsl(215, 51%, 18%)
Very Coffee	rgb(98, 72, 0)	hsl(44, 100%, 19%)
Hello Summer	rgb(95, 179, 253)	hsl(208, 98%, 68%)
Embarrassed Frog	rgb(157, 98, 0)	hsl(37, 100%, 31%)

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.04:1 Very good#A4C5F2 on #172B47
Aa8.04:1 Very good#172B47 on #A4C5F2
Aa6.35:1 Good#172B47 on #5FB3FD
Aa6.35:1 Good#5FB3FD on #172B47
Aa4.84:1 Good#A4C5F2 on #624800
Aa4.84:1 Good#624800 on #A4C5F2
Aa3.82:1 Poor#624800 on #5FB3FD
Aa3.82:1 Poor#5FB3FD on #624800

Color blindness preview

CSS variables

/* Sky High to Embarrassed Frog — https://swatchly.xyz/palette/a4c5f2-172b47-624800-5fb3fd-9d6200 */
:root {
  --sky-high: #a4c5f2;
  --midnight-ocean: #172b47;
  --very-coffee: #624800;
  --hello-summer: #5fb3fd;
  --embarrassed-frog: #9d6200;
}

Tailwind CSS v4

/* Sky High to Embarrassed Frog — https://swatchly.xyz/palette/a4c5f2-172b47-624800-5fb3fd-9d6200 */
@theme {
  --color-sky-high: #a4c5f2;
  --color-sky-high-50: #f0f7ff;
  --color-sky-high-100: #e1eeff;
  --color-sky-high-200: #c2dbfd;
  --color-sky-high-300: #a4c5f2;
  --color-sky-high-400: #86a5cf;
  --color-sky-high-500: #6a89b3;
  --color-sky-high-600: #516e96;
  --color-sky-high-700: #3c577b;
  --color-sky-high-800: #2c4463;
  --color-sky-high-900: #20344e;
  --color-sky-high-950: #122033;
  --color-midnight-ocean: #172b47;
  --color-midnight-ocean-50: #eff6ff;
  --color-midnight-ocean-100: #dfecff;
  --color-midnight-ocean-200: #c6d9f4;
  --color-midnight-ocean-300: #adc3e1;
  --color-midnight-ocean-400: #8aa2c3;
  --color-midnight-ocean-500: #6d85a6;
  --color-midnight-ocean-600: #526888;
  --color-midnight-ocean-700: #3d506c;
  --color-midnight-ocean-800: #2c3c53;
  --color-midnight-ocean-900: #172b47;
  --color-midnight-ocean-950: #101926;
  --color-very-coffee: #624800;
  --color-very-coffee-50: #fff4de;
  --color-very-coffee-100: #fce9c4;
  --color-very-coffee-200: #e9d3a6;
  --color-very-coffee-300: #d4ba86;
  --color-very-coffee-400: #b5995f;
  --color-very-coffee-500: #987c40;
  --color-very-coffee-600: #7a6025;
  --color-very-coffee-700: #624800;
  --color-very-coffee-800: #4c3806;
  --color-very-coffee-900: #3b2b01;
  --color-very-coffee-950: #251900;
  --color-hello-summer: #5fb3fd;
  --color-hello-summer-50: #f4faff;
  --color-hello-summer-100: #e6f3ff;
  --color-hello-summer-200: #c6e3ff;
  --color-hello-summer-300: #9ed0ff;
  --color-hello-summer-400: #5fb3fd;
  --color-hello-summer-500: #4095dc;
  --color-hello-summer-600: #1d77bc;
  --color-hello-summer-700: #005d9b;
  --color-hello-summer-800: #00487a;
  --color-hello-summer-900: #00365e;
  --color-hello-summer-950: #00213c;
  --color-embarrassed-frog: #9d6200;
  --color-embarrassed-frog-50: #fff3e6;
  --color-embarrassed-frog-100: #ffe8cf;
  --color-embarrassed-frog-200: #ffd09c;
  --color-embarrassed-frog-300: #eeb87b;
  --color-embarrassed-frog-400: #d39850;
  --color-embarrassed-frog-500: #b97c2d;
  --color-embarrassed-frog-600: #9d6200;
  --color-embarrassed-frog-700: #7d4d00;
  --color-embarrassed-frog-800: #633c00;
  --color-embarrassed-frog-900: #4c2d00;
  --color-embarrassed-frog-950: #311b00;
}