Start generating

Creamy Cloud Dreams to Burnt Coffee color palette

FFF6DECreamy Cloud DreamsA0C4FFPastel Blue7890C6King Neptune3162C5God of Rain5B4000Pineapple2B1D03Burnt Coffee
Open in generator Export PNG, PDF, ASE…

About this palette

Creamy Cloud Dreams to Burnt Coffee is a 6-color palette: #FFF6DE (Creamy Cloud Dreams), #A0C4FF (Pastel Blue), #7890C6 (King Neptune), #3162C5 (God of Rain), #5B4000 (Pineapple), #2B1D03 (Burnt Coffee). It mixes white, blue, brown tones and feels cool overall. The strongest text pairing is #FFF6DE on #2B1D03 with a contrast ratio of 15.23:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Creamy Cloud Dreamsrgb(255, 246, 222)hsl(44, 100%, 94%)
Pastel Bluergb(160, 196, 255)hsl(217, 100%, 81%)
King Neptunergb(120, 144, 198)hsl(222, 41%, 62%)
God of Rainrgb(49, 98, 197)hsl(220, 60%, 48%)
Pineapplergb(91, 64, 0)hsl(42, 100%, 18%)
Burnt Coffeergb(43, 29, 3)hsl(39, 87%, 9%)

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.

  • Aa15.23:1 Super#FFF6DE on #2B1D03
  • Aa15.23:1 Super#2B1D03 on #FFF6DE
  • Aa9.25:1 Very good#A0C4FF on #2B1D03
  • Aa9.25:1 Very good#2B1D03 on #A0C4FF
  • Aa8.95:1 Very good#FFF6DE on #5B4000
  • Aa8.95:1 Very good#5B4000 on #FFF6DE
  • Aa5.43:1 Good#A0C4FF on #5B4000
  • Aa5.43:1 Good#5B4000 on #A0C4FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Creamy Cloud Dreams to Burnt Coffee — https://swatchly.xyz/palette/fff6de-a0c4ff-7890c6-3162c5-5b4000-2b1d03 */
:root {
  --creamy-cloud-dreams: #fff6de;
  --pastel-blue: #a0c4ff;
  --king-neptune: #7890c6;
  --god-of-rain: #3162c5;
  --pineapple: #5b4000;
  --burnt-coffee: #2b1d03;
}

Tailwind CSS v4

/* Creamy Cloud Dreams to Burnt Coffee — https://swatchly.xyz/palette/fff6de-a0c4ff-7890c6-3162c5-5b4000-2b1d03 */
@theme {
  --color-creamy-cloud-dreams: #fff6de;
  --color-creamy-cloud-dreams-50: #fff6de;
  --color-creamy-cloud-dreams-100: #f1ecdd;
  --color-creamy-cloud-dreams-200: #ded8c7;
  --color-creamy-cloud-dreams-300: #c8c1ae;
  --color-creamy-cloud-dreams-400: #a9a18c;
  --color-creamy-cloud-dreams-500: #8e8670;
  --color-creamy-cloud-dreams-600: #736b57;
  --color-creamy-cloud-dreams-700: #5c5542;
  --color-creamy-cloud-dreams-800: #484232;
  --color-creamy-cloud-dreams-900: #383225;
  --color-creamy-cloud-dreams-950: #231f15;
  --color-pastel-blue: #a0c4ff;
  --color-pastel-blue-50: #f1f6ff;
  --color-pastel-blue-100: #e2edff;
  --color-pastel-blue-200: #c4daff;
  --color-pastel-blue-300: #a0c4ff;
  --color-pastel-blue-400: #83a4db;
  --color-pastel-blue-500: #6688bf;
  --color-pastel-blue-600: #4d6da1;
  --color-pastel-blue-700: #395685;
  --color-pastel-blue-800: #29426c;
  --color-pastel-blue-900: #1d3255;
  --color-pastel-blue-950: #101f38;
  --color-king-neptune: #7890c6;
  --color-king-neptune-50: #f3f7ff;
  --color-king-neptune-100: #e8efff;
  --color-king-neptune-200: #ceddff;
  --color-king-neptune-300: #b3c8f7;
  --color-king-neptune-400: #93aade;
  --color-king-neptune-500: #7890c6;
  --color-king-neptune-600: #5d73a7;
  --color-king-neptune-700: #465a8a;
  --color-king-neptune-800: #34466f;
  --color-king-neptune-900: #263457;
  --color-king-neptune-950: #152039;
  --color-god-of-rain: #3162c5;
  --color-god-of-rain-50: #f0f5ff;
  --color-god-of-rain-100: #e0ebff;
  --color-god-of-rain-200: #c1d7ff;
  --color-god-of-rain-300: #9dbfff;
  --color-god-of-rain-400: #699cff;
  --color-god-of-rain-500: #4b7ee4;
  --color-god-of-rain-600: #3162c5;
  --color-god-of-rain-700: #214ca4;
  --color-god-of-rain-800: #153a87;
  --color-god-of-rain-900: #0c2b6d;
  --color-god-of-rain-950: #041a49;
  --color-pineapple: #5b4000;
  --color-pineapple-50: #fff4e0;
  --color-pineapple-100: #fce9c6;
  --color-pineapple-200: #ecd4ab;
  --color-pineapple-300: #d8be8f;
  --color-pineapple-400: #bb9e6a;
  --color-pineapple-500: #a1834d;
  --color-pineapple-600: #856934;
  --color-pineapple-700: #6d5321;
  --color-pineapple-800: #5b4000;
  --color-pineapple-900: #453209;
  --color-pineapple-950: #2c1e02;
  --color-burnt-coffee: #2b1d03;
  --color-burnt-coffee-50: #fef4e3;
  --color-burnt-coffee-100: #f5ead7;
  --color-burnt-coffee-200: #e3d6bf;
  --color-burnt-coffee-300: #cebfa5;
  --color-burnt-coffee-400: #b09f83;
  --color-burnt-coffee-500: #958467;
  --color-burnt-coffee-600: #7a694e;
  --color-burnt-coffee-700: #62533a;
  --color-burnt-coffee-800: #4e412b;
  --color-burnt-coffee-900: #3c321f;
  --color-burnt-coffee-950: #2b1d03;
}

Similar palettes