Start generating

Brown Sugar Glaze to Twilight color palette

CF7B53Brown Sugar Glaze008E67ViridianFFB3A1Persicus002912Haunted Forest4B4A87Twilight
Open in generator Export PNG, PDF, ASE…

About this palette

Brown Sugar Glaze to Twilight is a 5-color cool, vintage palette: #CF7B53 (Brown Sugar Glaze), #008E67 (Viridian), #FFB3A1 (Persicus), #002912 (Haunted Forest), #4B4A87 (Twilight). It mixes orange, turquoise, pink, green, purple tones and feels cool overall. The strongest text pairing is #FFB3A1 on #002912 with a contrast ratio of 9.21:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Brown Sugar Glazergb(207, 123, 83)hsl(19, 56%, 57%)
Viridianrgb(0, 142, 103)hsl(164, 100%, 28%)
Persicusrgb(255, 179, 161)hsl(11, 100%, 82%)
Haunted Forestrgb(0, 41, 18)hsl(146, 100%, 8%)
Twilightrgb(75, 74, 135)hsl(241, 29%, 41%)

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.21:1 Very good#FFB3A1 on #002912
  • Aa9.21:1 Very good#002912 on #FFB3A1
  • Aa4.99:1 Good#CF7B53 on #002912
  • Aa4.99:1 Good#002912 on #CF7B53
  • Aa4.65:1 Good#FFB3A1 on #4B4A87
  • Aa4.65:1 Good#4B4A87 on #FFB3A1
  • Aa3.82:1 Poor#008E67 on #002912
  • Aa3.82:1 Poor#002912 on #008E67

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Brown Sugar Glaze to Twilight — https://swatchly.xyz/palette/cf7b53-008e67-ffb3a1-002912-4b4a87 */
:root {
  --brown-sugar-glaze: #cf7b53;
  --viridian: #008e67;
  --persicus: #ffb3a1;
  --haunted-forest: #002912;
  --twilight: #4b4a87;
}

Tailwind CSS v4

/* Brown Sugar Glaze to Twilight — https://swatchly.xyz/palette/cf7b53-008e67-ffb3a1-002912-4b4a87 */
@theme {
  --color-brown-sugar-glaze: #cf7b53;
  --color-brown-sugar-glaze-50: #ffece3;
  --color-brown-sugar-glaze-100: #ffdbcb;
  --color-brown-sugar-glaze-200: #ffbc9e;
  --color-brown-sugar-glaze-300: #ee9f7b;
  --color-brown-sugar-glaze-400: #cf7b53;
  --color-brown-sugar-glaze-500: #b3623a;
  --color-brown-sugar-glaze-600: #974b24;
  --color-brown-sugar-glaze-700: #7d3813;
  --color-brown-sugar-glaze-800: #662a07;
  --color-brown-sugar-glaze-900: #531f02;
  --color-brown-sugar-glaze-950: #381200;
  --color-viridian: #008e67;
  --color-viridian-50: #dbffee;
  --color-viridian-100: #c0fee2;
  --color-viridian-200: #a5efcf;
  --color-viridian-300: #87ddb8;
  --color-viridian-400: #5cc199;
  --color-viridian-500: #36a87f;
  --color-viridian-600: #008e67;
  --color-viridian-700: #007151;
  --color-viridian-800: #00583f;
  --color-viridian-900: #00442f;
  --color-viridian-950: #002b1c;
  --color-persicus: #ffb3a1;
  --color-persicus-50: #fff7f5;
  --color-persicus-100: #ffece7;
  --color-persicus-200: #ffd2c8;
  --color-persicus-300: #ffb3a1;
  --color-persicus-400: #d99483;
  --color-persicus-500: #bc7665;
  --color-persicus-600: #9d5a4b;
  --color-persicus-700: #814436;
  --color-persicus-800: #673226;
  --color-persicus-900: #50241a;
  --color-persicus-950: #34150d;
  --color-haunted-forest: #002912;
  --color-haunted-forest-50: #e4fceb;
  --color-haunted-forest-100: #d8f3e0;
  --color-haunted-forest-200: #c1e1ca;
  --color-haunted-forest-300: #a7ccb1;
  --color-haunted-forest-400: #85ad90;
  --color-haunted-forest-500: #699275;
  --color-haunted-forest-600: #50775c;
  --color-haunted-forest-700: #3c6047;
  --color-haunted-forest-800: #2c4c36;
  --color-haunted-forest-900: #203b29;
  --color-haunted-forest-950: #002912;
  --color-twilight: #4b4a87;
  --color-twilight-50: #f3f4ff;
  --color-twilight-100: #e8e9ff;
  --color-twilight-200: #d0d3ff;
  --color-twilight-300: #b7baf6;
  --color-twilight-400: #9799da;
  --color-twilight-500: #7b7cbe;
  --color-twilight-600: #61629f;
  --color-twilight-700: #4b4a87;
  --color-twilight-800: #3a396a;
  --color-twilight-900: #2c2b54;
  --color-twilight-950: #1b1a37;
}

Similar palettes