Cerulean to Clear Sky Color Palette

About this palette

Cerulean to Clear Sky is a 5-color cool palette: #00A9F5 (Cerulean), #653E9A (Poppy Pompadour), #7B7100 (Jungle Look), #3A2E00 (Secret Passage), #83CBFF (Clear Sky). It mixes blue, purple, brown tones and feels cool overall. The strongest text pairing is #3A2E00 on #83CBFF with a contrast ratio of 7.61:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cerulean	rgb(0, 169, 245)	hsl(199, 100%, 48%)
Poppy Pompadour	rgb(101, 62, 154)	hsl(265, 43%, 42%)
Jungle Look	rgb(123, 113, 0)	hsl(55, 100%, 24%)
Secret Passage	rgb(58, 46, 0)	hsl(48, 100%, 11%)
Clear Sky	rgb(131, 203, 255)	hsl(205, 100%, 76%)

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.61:1 Very good#3A2E00 on #83CBFF
Aa7.61:1 Very good#83CBFF on #3A2E00
Aa5.09:1 Good#00A9F5 on #3A2E00
Aa5.09:1 Good#3A2E00 on #00A9F5
Aa4.41:1 Poor#653E9A on #83CBFF
Aa4.41:1 Poor#83CBFF on #653E9A

Color blindness preview

CSS variables

/* Cerulean to Clear Sky — https://swatchly.xyz/palette/00a9f5-653e9a-7b7100-3a2e00-83cbff */
:root {
  --cerulean: #00a9f5;
  --poppy-pompadour: #653e9a;
  --jungle-look: #7b7100;
  --secret-passage: #3a2e00;
  --clear-sky: #83cbff;
}

Tailwind CSS v4

/* Cerulean to Clear Sky — https://swatchly.xyz/palette/00a9f5-653e9a-7b7100-3a2e00-83cbff */
@theme {
  --color-cerulean: #00a9f5;
  --color-cerulean-50: #eaf6ff;
  --color-cerulean-100: #d5edff;
  --color-cerulean-200: #abdcff;
  --color-cerulean-300: #75c8ff;
  --color-cerulean-400: #00a9f5;
  --color-cerulean-500: #008dcd;
  --color-cerulean-600: #0071a6;
  --color-cerulean-700: #005a85;
  --color-cerulean-800: #004669;
  --color-cerulean-900: #003653;
  --color-cerulean-950: #002236;
  --color-poppy-pompadour: #653e9a;
  --color-poppy-pompadour-50: #f7f3ff;
  --color-poppy-pompadour-100: #eee7ff;
  --color-poppy-pompadour-200: #dfceff;
  --color-poppy-pompadour-300: #cdb1ff;
  --color-poppy-pompadour-400: #b08dec;
  --color-poppy-pompadour-500: #9670d1;
  --color-poppy-pompadour-600: #7b56b3;
  --color-poppy-pompadour-700: #653e9a;
  --color-poppy-pompadour-800: #4f2f7a;
  --color-poppy-pompadour-900: #3e2262;
  --color-poppy-pompadour-950: #271341;
  --color-jungle-look: #7b7100;
  --color-jungle-look-50: #fcf8c8;
  --color-jungle-look-100: #f4efb9;
  --color-jungle-look-200: #e2dc9b;
  --color-jungle-look-300: #cdc67b;
  --color-jungle-look-400: #b0a751;
  --color-jungle-look-500: #958b2d;
  --color-jungle-look-600: #7b7100;
  --color-jungle-look-700: #625900;
  --color-jungle-look-800: #4c4600;
  --color-jungle-look-900: #3b3500;
  --color-jungle-look-950: #252100;
  --color-secret-passage: #3a2e00;
  --color-secret-passage-50: #fdf5dc;
  --color-secret-passage-100: #f4ebcf;
  --color-secret-passage-200: #e2d7b6;
  --color-secret-passage-300: #ccc19a;
  --color-secret-passage-400: #ada076;
  --color-secret-passage-500: #918459;
  --color-secret-passage-600: #76693f;
  --color-secret-passage-700: #5d522c;
  --color-secret-passage-800: #483f1d;
  --color-secret-passage-900: #3a2e00;
  --color-secret-passage-950: #221c08;
  --color-clear-sky: #83cbff;
  --color-clear-sky-50: #eef7ff;
  --color-clear-sky-100: #dbefff;
  --color-clear-sky-200: #b4dfff;
  --color-clear-sky-300: #83cbff;
  --color-clear-sky-400: #67aadb;
  --color-clear-sky-500: #478ebf;
  --color-clear-sky-600: #2b73a1;
  --color-clear-sky-700: #155b85;
  --color-clear-sky-800: #03476c;
  --color-clear-sky-900: #003655;
  --color-clear-sky-950: #002237;
}