Sugar Chic to Secret Passage Color Palette

About this palette

Sugar Chic to Secret Passage is a 4-color cool palette: #FACCFF (Sugar Chic), #7195C5 (King Neptune), #4C794C (Mana Tree), #412D0C (Secret Passage). It mixes pink, blue, green, brown tones and feels cool overall. The strongest text pairing is #FACCFF on #412D0C with a contrast ratio of 9.43:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Chic	rgb(250, 204, 255)	hsl(294, 100%, 90%)
King Neptune	rgb(113, 149, 197)	hsl(214, 42%, 61%)
Mana Tree	rgb(76, 121, 76)	hsl(120, 23%, 39%)
Secret Passage	rgb(65, 45, 12)	hsl(37, 69%, 15%)

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.

Aa9.43:1 Very good#FACCFF on #412D0C
Aa9.43:1 Very good#412D0C on #FACCFF
Aa4.24:1 Poor#7195C5 on #412D0C
Aa4.24:1 Poor#412D0C on #7195C5
Aa3.65:1 Poor#FACCFF on #4C794C
Aa3.65:1 Poor#4C794C on #FACCFF

Color blindness preview

CSS variables

/* Sugar Chic to Secret Passage — https://swatchly.xyz/palette/faccff-7195c5-4c794c-412d0c */
:root {
  --sugar-chic: #faccff;
  --king-neptune: #7195c5;
  --mana-tree: #4c794c;
  --secret-passage: #412d0c;
}

Tailwind CSS v4

/* Sugar Chic to Secret Passage — https://swatchly.xyz/palette/faccff-7195c5-4c794c-412d0c */
@theme {
  --color-sugar-chic: #faccff;
  --color-sugar-chic-50: #fef7ff;
  --color-sugar-chic-100: #fde9ff;
  --color-sugar-chic-200: #faccff;
  --color-sugar-chic-300: #ddb8e1;
  --color-sugar-chic-400: #be95c3;
  --color-sugar-chic-500: #a278a7;
  --color-sugar-chic-600: #855d8a;
  --color-sugar-chic-700: #6b476f;
  --color-sugar-chic-800: #543558;
  --color-sugar-chic-900: #422745;
  --color-sugar-chic-950: #2a172c;
  --color-king-neptune: #7195c5;
  --color-king-neptune-50: #f3f8ff;
  --color-king-neptune-100: #e6f1ff;
  --color-king-neptune-200: #cae0ff;
  --color-king-neptune-300: #aeccf6;
  --color-king-neptune-400: #8cafdd;
  --color-king-neptune-500: #7195c5;
  --color-king-neptune-600: #5578a6;
  --color-king-neptune-700: #3e5e89;
  --color-king-neptune-800: #2d496e;
  --color-king-neptune-900: #1f3756;
  --color-king-neptune-950: #102138;
  --color-mana-tree: #4c794c;
  --color-mana-tree-50: #e3fee2;
  --color-mana-tree-100: #d7f5d6;
  --color-mana-tree-200: #bfe3be;
  --color-mana-tree-300: #a5cea4;
  --color-mana-tree-400: #82af82;
  --color-mana-tree-500: #669466;
  --color-mana-tree-600: #4c794c;
  --color-mana-tree-700: #386139;
  --color-mana-tree-800: #294c29;
  --color-mana-tree-900: #1d3b1d;
  --color-mana-tree-950: #0f2510;
  --color-secret-passage: #412d0c;
  --color-secret-passage-50: #fff3e3;
  --color-secret-passage-100: #f9e9d2;
  --color-secret-passage-200: #e7d5ba;
  --color-secret-passage-300: #d3bda0;
  --color-secret-passage-400: #b49d7c;
  --color-secret-passage-500: #998160;
  --color-secret-passage-600: #7d6747;
  --color-secret-passage-700: #645033;
  --color-secret-passage-800: #4f3e24;
  --color-secret-passage-900: #412d0c;
  --color-secret-passage-950: #261c0d;
}