Start generating

Dreamy Candy Forest to Warm Brown color palette

AE92F6Dreamy Candy Forest767B37Jungle LookD1D3FFIcy Plains8FD2F4Fail Whale004B69Raging Thunderstorm974E00Warm Brown
Open in generator Export PNG, PDF, ASE…

About this palette

Dreamy Candy Forest to Warm Brown is a 6-color cool palette: #AE92F6 (Dreamy Candy Forest), #767B37 (Jungle Look), #D1D3FF (Icy Plains), #8FD2F4 (Fail Whale), #004B69 (Raging Thunderstorm), #974E00 (Warm Brown). It mixes purple, green, blue, brown tones and feels cool overall. The strongest text pairing is #D1D3FF on #004B69 with a contrast ratio of 6.55:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dreamy Candy Forestrgb(174, 146, 246)hsl(257, 85%, 77%)
Jungle Lookrgb(118, 123, 55)hsl(64, 38%, 35%)
Icy Plainsrgb(209, 211, 255)hsl(237, 100%, 91%)
Fail Whalergb(143, 210, 244)hsl(200, 82%, 76%)
Raging Thunderstormrgb(0, 75, 105)hsl(197, 100%, 21%)
Warm Brownrgb(151, 78, 0)hsl(31, 100%, 30%)

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.

  • Aa6.55:1 Good#D1D3FF on #004B69
  • Aa6.55:1 Good#004B69 on #D1D3FF
  • Aa5.74:1 Good#8FD2F4 on #004B69
  • Aa5.74:1 Good#004B69 on #8FD2F4
  • Aa4.25:1 Poor#D1D3FF on #974E00
  • Aa4.25:1 Poor#974E00 on #D1D3FF
  • Aa3.73:1 Poor#AE92F6 on #004B69
  • Aa3.73:1 Poor#004B69 on #AE92F6

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Dreamy Candy Forest to Warm Brown — https://swatchly.xyz/palette/ae92f6-767b37-d1d3ff-8fd2f4-004b69-974e00 */
:root {
  --dreamy-candy-forest: #ae92f6;
  --jungle-look: #767b37;
  --icy-plains: #d1d3ff;
  --fail-whale: #8fd2f4;
  --raging-thunderstorm: #004b69;
  --warm-brown: #974e00;
}

Tailwind CSS v4

/* Dreamy Candy Forest to Warm Brown — https://swatchly.xyz/palette/ae92f6-767b37-d1d3ff-8fd2f4-004b69-974e00 */
@theme {
  --color-dreamy-candy-forest: #ae92f6;
  --color-dreamy-candy-forest-50: #f7f5ff;
  --color-dreamy-candy-forest-100: #efeaff;
  --color-dreamy-candy-forest-200: #ddd4ff;
  --color-dreamy-candy-forest-300: #cab8ff;
  --color-dreamy-candy-forest-400: #ae92f6;
  --color-dreamy-candy-forest-500: #9275d6;
  --color-dreamy-candy-forest-600: #775ab7;
  --color-dreamy-candy-forest-700: #5f4399;
  --color-dreamy-candy-forest-800: #4a327c;
  --color-dreamy-candy-forest-900: #392463;
  --color-dreamy-candy-forest-950: #231441;
  --color-jungle-look: #767b37;
  --color-jungle-look-50: #f5f9d3;
  --color-jungle-look-100: #edf2c7;
  --color-jungle-look-200: #dbe0ae;
  --color-jungle-look-300: #c6cc93;
  --color-jungle-look-400: #a9ae6e;
  --color-jungle-look-500: #8f9451;
  --color-jungle-look-600: #767b37;
  --color-jungle-look-700: #5e6221;
  --color-jungle-look-800: #494c10;
  --color-jungle-look-900: #383a05;
  --color-jungle-look-950: #222401;
  --color-icy-plains: #d1d3ff;
  --color-icy-plains-50: #f3f4ff;
  --color-icy-plains-100: #e8e9ff;
  --color-icy-plains-200: #d1d3ff;
  --color-icy-plains-300: #bbbde2;
  --color-icy-plains-400: #9c9dc5;
  --color-icy-plains-500: #8082aa;
  --color-icy-plains-600: #67688e;
  --color-icy-plains-700: #515174;
  --color-icy-plains-800: #3e3f5d;
  --color-icy-plains-900: #303049;
  --color-icy-plains-950: #1d1d2f;
  --color-fail-whale: #8fd2f4;
  --color-fail-whale-50: #f1faff;
  --color-fail-whale-100: #dff4ff;
  --color-fail-whale-200: #b7e5fd;
  --color-fail-whale-300: #8fd2f4;
  --color-fail-whale-400: #72b0cf;
  --color-fail-whale-500: #5294b3;
  --color-fail-whale-600: #357796;
  --color-fail-whale-700: #205f7a;
  --color-fail-whale-800: #0f4a62;
  --color-fail-whale-900: #05384c;
  --color-fail-whale-950: #012331;
  --color-raging-thunderstorm: #004b69;
  --color-raging-thunderstorm-50: #ebf7ff;
  --color-raging-thunderstorm-100: #d6f0ff;
  --color-raging-thunderstorm-200: #b1dff9;
  --color-raging-thunderstorm-300: #95cae7;
  --color-raging-thunderstorm-400: #70abcc;
  --color-raging-thunderstorm-500: #5290b1;
  --color-raging-thunderstorm-600: #387595;
  --color-raging-thunderstorm-700: #245e7b;
  --color-raging-thunderstorm-800: #004b69;
  --color-raging-thunderstorm-900: #0b394f;
  --color-raging-thunderstorm-950: #032434;
  --color-warm-brown: #974e00;
  --color-warm-brown-50: #fff2ea;
  --color-warm-brown-100: #ffe4d1;
  --color-warm-brown-200: #ffc7a0;
  --color-warm-brown-300: #f1ab77;
  --color-warm-brown-400: #d4874d;
  --color-warm-brown-500: #b66a2c;
  --color-warm-brown-600: #974e00;
  --color-warm-brown-700: #793d00;
  --color-warm-brown-800: #5f2f00;
  --color-warm-brown-900: #4b2300;
  --color-warm-brown-950: #311500;
}

Similar palettes