Cloudless to Crystal Gem color palette

D8EDFFCloudless 142F1BPitch-Black Forests A87743Driftwood 8C2482Noble Plum 82CCA2Crystal Gem

About this palette

Cloudless to Crystal Gem is a 5-color earthy, vintage palette: #D8EDFF (Cloudless), #142F1B (Pitch-Black Forests), #A87743 (Driftwood), #8C2482 (Noble Plum), #82CCA2 (Crystal Gem). It mixes white, green, orange, pink tones and feels balanced overall. The strongest text pairing is #D8EDFF on #142F1B with a contrast ratio of 12.04:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloudless	rgb(216, 237, 255)	hsl(208, 100%, 92%)
Pitch-Black Forests	rgb(20, 47, 27)	hsl(136, 40%, 13%)
Driftwood	rgb(168, 119, 67)	hsl(31, 43%, 46%)
Noble Plum	rgb(140, 36, 130)	hsl(306, 59%, 35%)
Crystal Gem	rgb(130, 204, 162)	hsl(146, 42%, 65%)

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.

Aa12.04:1 Super#D8EDFF on #142F1B
Aa12.04:1 Super#142F1B on #D8EDFF
Aa7.65:1 Very good#142F1B on #82CCA2
Aa7.65:1 Very good#82CCA2 on #142F1B
Aa6.50:1 Good#D8EDFF on #8C2482
Aa6.50:1 Good#8C2482 on #D8EDFF
Aa4.13:1 Poor#8C2482 on #82CCA2
Aa4.13:1 Poor#82CCA2 on #8C2482

Color blindness preview

CSS variables

/* Cloudless to Crystal Gem — https://swatchly.xyz/palette/d8edff-142f1b-a87743-8c2482-82cca2 */
:root {
  --cloudless: #d8edff;
  --pitch-black-forests: #142f1b;
  --driftwood: #a87743;
  --noble-plum: #8c2482;
  --crystal-gem: #82cca2;
}

Tailwind CSS v4

/* Cloudless to Crystal Gem — https://swatchly.xyz/palette/d8edff-142f1b-a87743-8c2482-82cca2 */
@theme {
  --color-cloudless: #d8edff;
  --color-cloudless-50: #ebf6ff;
  --color-cloudless-100: #d8edff;
  --color-cloudless-200: #c9d9e6;
  --color-cloudless-300: #b1c3d1;
  --color-cloudless-400: #91a4b4;
  --color-cloudless-500: #758899;
  --color-cloudless-600: #5c6e7d;
  --color-cloudless-700: #475765;
  --color-cloudless-800: #364450;
  --color-cloudless-900: #28343f;
  --color-cloudless-950: #182028;
  --color-pitch-black-forests: #142f1b;
  --color-pitch-black-forests-50: #e9fbec;
  --color-pitch-black-forests-100: #ddf1e1;
  --color-pitch-black-forests-200: #c7dfcb;
  --color-pitch-black-forests-300: #aec9b3;
  --color-pitch-black-forests-400: #8daa92;
  --color-pitch-black-forests-500: #739179;
  --color-pitch-black-forests-600: #5b7861;
  --color-pitch-black-forests-700: #47624d;
  --color-pitch-black-forests-800: #38503d;
  --color-pitch-black-forests-900: #2c4130;
  --color-pitch-black-forests-950: #142f1b;
  --color-driftwood: #a87743;
  --color-driftwood-50: #fff2e6;
  --color-driftwood-100: #ffe5cb;
  --color-driftwood-200: #f6cda6;
  --color-driftwood-300: #e2b587;
  --color-driftwood-400: #c49361;
  --color-driftwood-500: #a87743;
  --color-driftwood-600: #8c5e2a;
  --color-driftwood-700: #724818;
  --color-driftwood-800: #5c370a;
  --color-driftwood-900: #482a03;
  --color-driftwood-950: #2f1900;
  --color-noble-plum: #8c2482;
  --color-noble-plum-50: #fff0fc;
  --color-noble-plum-100: #ffe0f9;
  --color-noble-plum-200: #ffc1f5;
  --color-noble-plum-300: #fa9dec;
  --color-noble-plum-400: #de78d1;
  --color-noble-plum-500: #c35ab6;
  --color-noble-plum-600: #a53f9a;
  --color-noble-plum-700: #8c2482;
  --color-noble-plum-800: #6f1967;
  --color-noble-plum-900: #580e51;
  --color-noble-plum-950: #3a0435;
  --color-crystal-gem: #82cca2;
  --color-crystal-gem-50: #d3fde3;
  --color-crystal-gem-100: #c3f3d6;
  --color-crystal-gem-200: #a8e0bf;
  --color-crystal-gem-300: #82cca2;
  --color-crystal-gem-400: #66ad85;
  --color-crystal-gem-500: #49936b;
  --color-crystal-gem-600: #307854;
  --color-crystal-gem-700: #1c6140;
  --color-crystal-gem-800: #0e4e31;
  --color-crystal-gem-900: #053d25;
  --color-crystal-gem-950: #012715;
}