Cerulean Skies to Chocolate Castle color palette

8CC8CCCerulean Skies 19ADAFTeal Me No Lies 697DAEOrbital 68432BVan Dyke Brown 442914Chocolate Castle

Open in generator Export PNG, PDF, ASE…

About this palette

Cerulean Skies to Chocolate Castle is a 5-color cool, vintage palette: #8CC8CC (Cerulean Skies), #19ADAF (Teal Me No Lies), #697DAE (Orbital), #68432B (Van Dyke Brown), #442914 (Chocolate Castle). It mixes turquoise, blue, brown tones and feels cool overall. The strongest text pairing is #8CC8CC on #442914 with a contrast ratio of 7.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cerulean Skies	rgb(140, 200, 204)	hsl(184, 39%, 67%)
Teal Me No Lies	rgb(25, 173, 175)	hsl(181, 75%, 39%)
Orbital	rgb(105, 125, 174)	hsl(223, 30%, 55%)
Van Dyke Brown	rgb(104, 67, 43)	hsl(24, 41%, 29%)
Chocolate Castle	rgb(68, 41, 20)	hsl(26, 55%, 17%)

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.15:1 Very good#8CC8CC on #442914
Aa7.15:1 Very good#442914 on #8CC8CC
Aa4.86:1 Good#19ADAF on #442914
Aa4.86:1 Good#442914 on #19ADAF
Aa4.64:1 Good#8CC8CC on #68432B
Aa4.64:1 Good#68432B on #8CC8CC
Aa3.27:1 Poor#697DAE on #442914
Aa3.27:1 Poor#442914 on #697DAE

Color blindness preview

CSS variables

/* Cerulean Skies to Chocolate Castle — https://swatchly.xyz/palette/8cc8cc-19adaf-697dae-68432b-442914 */
:root {
  --cerulean-skies: #8cc8cc;
  --teal-me-no-lies: #19adaf;
  --orbital: #697dae;
  --van-dyke-brown: #68432b;
  --chocolate-castle: #442914;
}

Tailwind CSS v4

/* Cerulean Skies to Chocolate Castle — https://swatchly.xyz/palette/8cc8cc-19adaf-697dae-68432b-442914 */
@theme {
  --color-cerulean-skies: #8cc8cc;
  --color-cerulean-skies-50: #d8fafc;
  --color-cerulean-skies-100: #caf0f2;
  --color-cerulean-skies-200: #afdde0;
  --color-cerulean-skies-300: #8cc8cc;
  --color-cerulean-skies-400: #70a9ad;
  --color-cerulean-skies-500: #538e92;
  --color-cerulean-skies-600: #3b7478;
  --color-cerulean-skies-700: #275d61;
  --color-cerulean-skies-800: #194a4d;
  --color-cerulean-skies-900: #0f3a3c;
  --color-cerulean-skies-950: #062426;
  --color-teal-me-no-lies: #19adaf;
  --color-teal-me-no-lies-50: #c4ffff;
  --color-teal-me-no-lies-100: #acf6f6;
  --color-teal-me-no-lies-200: #88e3e4;
  --color-teal-me-no-lies-300: #60cdce;
  --color-teal-me-no-lies-400: #19adaf;
  --color-teal-me-no-lies-500: #009193;
  --color-teal-me-no-lies-600: #007576;
  --color-teal-me-no-lies-700: #005d5f;
  --color-teal-me-no-lies-800: #004a4b;
  --color-teal-me-no-lies-900: #003a3b;
  --color-teal-me-no-lies-950: #002526;
  --color-orbital: #697dae;
  --color-orbital-50: #eff4ff;
  --color-orbital-100: #dee8ff;
  --color-orbital-200: #c1d3fc;
  --color-orbital-300: #a7bbe9;
  --color-orbital-400: #859acb;
  --color-orbital-500: #697dae;
  --color-orbital-600: #526492;
  --color-orbital-700: #3f4f78;
  --color-orbital-800: #2f3d61;
  --color-orbital-900: #232f4e;
  --color-orbital-950: #151d33;
  --color-van-dyke-brown: #68432b;
  --color-van-dyke-brown-50: #fff2eb;
  --color-van-dyke-brown-100: #ffe5d6;
  --color-van-dyke-brown-200: #f0ceba;
  --color-van-dyke-brown-300: #dbb59d;
  --color-van-dyke-brown-400: #bc937a;
  --color-van-dyke-brown-500: #9f765d;
  --color-van-dyke-brown-600: #815b43;
  --color-van-dyke-brown-700: #68432b;
  --color-van-dyke-brown-800: #513422;
  --color-van-dyke-brown-900: #3f2718;
  --color-van-dyke-brown-950: #28170c;
  --color-chocolate-castle: #442914;
  --color-chocolate-castle-50: #fff2ea;
  --color-chocolate-castle-100: #fde6d7;
  --color-chocolate-castle-200: #ecd2bf;
  --color-chocolate-castle-300: #d8baa6;
  --color-chocolate-castle-400: #ba9a83;
  --color-chocolate-castle-500: #9e7e67;
  --color-chocolate-castle-600: #81634d;
  --color-chocolate-castle-700: #684d39;
  --color-chocolate-castle-800: #523a29;
  --color-chocolate-castle-900: #442914;
  --color-chocolate-castle-950: #281a10;
}