Glazed Sugar to Electra color palette

FFDCCDGlazed Sugar 231E39Eclipse Elixir B46531Polished Copper 434671Starlit Night 61B592Electra

About this palette

Glazed Sugar to Electra is a 5-color cool, earthy, vintage palette: #FFDCCD (Glazed Sugar), #231E39 (Eclipse Elixir), #B46531 (Polished Copper), #434671 (Starlit Night), #61B592 (Electra). It mixes orange, purple, green tones and feels cool overall. The strongest text pairing is #FFDCCD on #231E39 with a contrast ratio of 12.44:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glazed Sugar	rgb(255, 220, 205)	hsl(18, 100%, 90%)
Eclipse Elixir	rgb(35, 30, 57)	hsl(251, 31%, 17%)
Polished Copper	rgb(180, 101, 49)	hsl(24, 57%, 45%)
Starlit Night	rgb(67, 70, 113)	hsl(236, 26%, 35%)
Electra	rgb(97, 181, 146)	hsl(155, 36%, 55%)

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.44:1 Super#FFDCCD on #231E39
Aa12.44:1 Super#231E39 on #FFDCCD
Aa6.96:1 Good#FFDCCD on #434671
Aa6.96:1 Good#434671 on #FFDCCD
Aa6.48:1 Good#231E39 on #61B592
Aa6.48:1 Good#61B592 on #231E39
Aa3.68:1 Poor#231E39 on #B46531
Aa3.68:1 Poor#B46531 on #231E39

Color blindness preview

CSS variables

/* Glazed Sugar to Electra — https://swatchly.xyz/palette/ffdccd-231e39-b46531-434671-61b592 */
:root {
  --glazed-sugar: #ffdccd;
  --eclipse-elixir: #231e39;
  --polished-copper: #b46531;
  --starlit-night: #434671;
  --electra: #61b592;
}

Tailwind CSS v4

/* Glazed Sugar to Electra — https://swatchly.xyz/palette/ffdccd-231e39-b46531-434671-61b592 */
@theme {
  --color-glazed-sugar: #ffdccd;
  --color-glazed-sugar-50: #ffebe2;
  --color-glazed-sugar-100: #ffdccd;
  --color-glazed-sugar-200: #e6ccc0;
  --color-glazed-sugar-300: #d3b5a9;
  --color-glazed-sugar-400: #b69789;
  --color-glazed-sugar-500: #9c7c6f;
  --color-glazed-sugar-600: #816356;
  --color-glazed-sugar-700: #694e43;
  --color-glazed-sugar-800: #533c32;
  --color-glazed-sugar-900: #412e25;
  --color-glazed-sugar-950: #2a1b15;
  --color-eclipse-elixir: #231e39;
  --color-eclipse-elixir-50: #f5f4ff;
  --color-eclipse-elixir-100: #ebe8ff;
  --color-eclipse-elixir-200: #d7d4ef;
  --color-eclipse-elixir-300: #c0bddb;
  --color-eclipse-elixir-400: #a19dbe;
  --color-eclipse-elixir-500: #8682a3;
  --color-eclipse-elixir-600: #6d6988;
  --color-eclipse-elixir-700: #575370;
  --color-eclipse-elixir-800: #45415b;
  --color-eclipse-elixir-900: #363348;
  --color-eclipse-elixir-950: #231e39;
  --color-polished-copper: #b46531;
  --color-polished-copper-50: #fff0e8;
  --color-polished-copper-100: #ffe1cf;
  --color-polished-copper-200: #ffc3a1;
  --color-polished-copper-300: #f1a679;
  --color-polished-copper-400: #d38351;
  --color-polished-copper-500: #b46531;
  --color-polished-copper-600: #974d18;
  --color-polished-copper-700: #7c3a03;
  --color-polished-copper-800: #632c00;
  --color-polished-copper-900: #4f2100;
  --color-polished-copper-950: #341300;
  --color-starlit-night: #434671;
  --color-starlit-night-50: #f3f4ff;
  --color-starlit-night-100: #e7eaff;
  --color-starlit-night-200: #d0d4fb;
  --color-starlit-night-300: #babfea;
  --color-starlit-night-400: #9ca1cf;
  --color-starlit-night-500: #8286b6;
  --color-starlit-night-600: #696d9b;
  --color-starlit-night-700: #555882;
  --color-starlit-night-800: #434671;
  --color-starlit-night-900: #343656;
  --color-starlit-night-950: #202239;
  --color-electra: #61b592;
  --color-electra-50: #dbffee;
  --color-electra-100: #c6f9e1;
  --color-electra-200: #abe7cb;
  --color-electra-300: #8cd3b3;
  --color-electra-400: #61b592;
  --color-electra-500: #449977;
  --color-electra-600: #267d5d;
  --color-electra-700: #0d6548;
  --color-electra-800: #004f37;
  --color-electra-900: #003d2a;
  --color-electra-950: #002719;
}