Sugar Chic to Into the Green Color Palette

About this palette

Sugar Chic to Into the Green is a 5-color cool, earthy, vintage palette: #FFC7F7 (Sugar Chic), #A66600 (Ginger), #7DBCE1 (Electric Eel), #083F27 (Lost in the Woods), #236C4D (Into the Green). It mixes pink, brown, blue, green tones and feels cool overall. The strongest text pairing is #FFC7F7 on #083F27 with a contrast ratio of 8.43:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Chic	rgb(255, 199, 247)	hsl(309, 100%, 89%)
Ginger	rgb(166, 102, 0)	hsl(37, 100%, 33%)
Electric Eel	rgb(125, 188, 225)	hsl(202, 62%, 69%)
Lost in the Woods	rgb(8, 63, 39)	hsl(154, 77%, 14%)
Into the Green	rgb(35, 108, 77)	hsl(155, 51%, 28%)

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.

Aa8.43:1 Very good#FFC7F7 on #083F27
Aa8.43:1 Very good#083F27 on #FFC7F7
Aa5.80:1 Good#7DBCE1 on #083F27
Aa5.80:1 Good#083F27 on #7DBCE1
Aa4.44:1 Poor#FFC7F7 on #236C4D
Aa4.44:1 Poor#236C4D on #FFC7F7
Aa3.27:1 Poor#FFC7F7 on #A66600
Aa3.27:1 Poor#A66600 on #FFC7F7

Color blindness preview

CSS variables

/* Sugar Chic to Into the Green — https://swatchly.xyz/palette/ffc7f7-a66600-7dbce1-083f27-236c4d */
:root {
  --sugar-chic: #ffc7f7;
  --ginger: #a66600;
  --electric-eel: #7dbce1;
  --lost-in-the-woods: #083f27;
  --into-the-green: #236c4d;
}

Tailwind CSS v4

/* Sugar Chic to Into the Green — https://swatchly.xyz/palette/ffc7f7-a66600-7dbce1-083f27-236c4d */
@theme {
  --color-sugar-chic: #ffc7f7;
  --color-sugar-chic-50: #fff4fd;
  --color-sugar-chic-100: #ffe6fb;
  --color-sugar-chic-200: #ffc7f7;
  --color-sugar-chic-300: #e1b3db;
  --color-sugar-chic-400: #c491bd;
  --color-sugar-chic-500: #a774a1;
  --color-sugar-chic-600: #8a5a84;
  --color-sugar-chic-700: #70446b;
  --color-sugar-chic-800: #593354;
  --color-sugar-chic-900: #462542;
  --color-sugar-chic-950: #2d162a;
  --color-ginger: #a66600;
  --color-ginger-50: #fff3e7;
  --color-ginger-100: #ffe9d3;
  --color-ginger-200: #ffd2a4;
  --color-ginger-300: #f4ba7c;
  --color-ginger-400: #da9a52;
  --color-ginger-500: #c17f2e;
  --color-ginger-600: #a66600;
  --color-ginger-700: #855000;
  --color-ginger-800: #683e00;
  --color-ginger-900: #512f00;
  --color-ginger-950: #341c00;
  --color-electric-eel: #7dbce1;
  --color-electric-eel-50: #dcf2ff;
  --color-electric-eel-100: #c2e8ff;
  --color-electric-eel-200: #a1d3f2;
  --color-electric-eel-300: #7dbce1;
  --color-electric-eel-400: #629fc2;
  --color-electric-eel-500: #4785a8;
  --color-electric-eel-600: #306d8d;
  --color-electric-eel-700: #1e5775;
  --color-electric-eel-800: #114660;
  --color-electric-eel-900: #09374e;
  --color-electric-eel-950: #032233;
  --color-lost-in-the-woods: #083f27;
  --color-lost-in-the-woods-50: #e1feec;
  --color-lost-in-the-woods-100: #d4f5e1;
  --color-lost-in-the-woods-200: #bce2cb;
  --color-lost-in-the-woods-300: #a1cdb3;
  --color-lost-in-the-woods-400: #7eaf93;
  --color-lost-in-the-woods-500: #619478;
  --color-lost-in-the-woods-600: #48795e;
  --color-lost-in-the-woods-700: #346249;
  --color-lost-in-the-woods-800: #254d38;
  --color-lost-in-the-woods-900: #083f27;
  --color-lost-in-the-woods-950: #0d2619;
  --color-into-the-green: #236c4d;
  --color-into-the-green-50: #dcffec;
  --color-into-the-green-100: #ccf7e0;
  --color-into-the-green-200: #b4e7cc;
  --color-into-the-green-300: #99d3b5;
  --color-into-the-green-400: #74b695;
  --color-into-the-green-500: #579c7b;
  --color-into-the-green-600: #3c8262;
  --color-into-the-green-700: #236c4d;
  --color-into-the-green-800: #17553b;
  --color-into-the-green-900: #0a422c;
  --color-into-the-green-950: #022a1a;
}