Discreet Orange to Eternal Darkness Color Palette

About this palette

Discreet Orange to Eternal Darkness is a 4-color cool palette: #FFAF9E (Discreet Orange), #009A7B (Paolo Veronese Green), #504399 (Blueberry), #262742 (Eternal Darkness). It mixes pink, turquoise, purple tones and feels cool overall. The strongest text pairing is #FFAF9E on #262742 with a contrast ratio of 8.18:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Discreet Orange	rgb(255, 175, 158)	hsl(11, 100%, 81%)
Paolo Veronese Green	rgb(0, 154, 123)	hsl(168, 100%, 30%)
Blueberry	rgb(80, 67, 153)	hsl(249, 39%, 43%)
Eternal Darkness	rgb(38, 39, 66)	hsl(238, 27%, 20%)

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.18:1 Very good#FFAF9E on #262742
Aa8.18:1 Very good#262742 on #FFAF9E
Aa4.56:1 Good#FFAF9E on #504399
Aa4.56:1 Good#504399 on #FFAF9E
Aa4.07:1 Poor#009A7B on #262742
Aa4.07:1 Poor#262742 on #009A7B

Color blindness preview

CSS variables

/* Discreet Orange to Eternal Darkness — https://swatchly.xyz/palette/ffaf9e-009a7b-504399-262742 */
:root {
  --discreet-orange: #ffaf9e;
  --paolo-veronese-green: #009a7b;
  --blueberry: #504399;
  --eternal-darkness: #262742;
}

Tailwind CSS v4

/* Discreet Orange to Eternal Darkness — https://swatchly.xyz/palette/ffaf9e-009a7b-504399-262742 */
@theme {
  --color-discreet-orange: #ffaf9e;
  --color-discreet-orange-50: #fff5f3;
  --color-discreet-orange-100: #ffe9e5;
  --color-discreet-orange-200: #ffcfc5;
  --color-discreet-orange-300: #ffaf9e;
  --color-discreet-orange-400: #d99081;
  --color-discreet-orange-500: #bd7363;
  --color-discreet-orange-600: #9e5849;
  --color-discreet-orange-700: #824235;
  --color-discreet-orange-800: #683026;
  --color-discreet-orange-900: #52231a;
  --color-discreet-orange-950: #35140d;
  --color-paolo-veronese-green: #009a7b;
  --color-paolo-veronese-green-50: #d8fff1;
  --color-paolo-veronese-green-100: #b8fbe4;
  --color-paolo-veronese-green-200: #97eacf;
  --color-paolo-veronese-green-300: #73d5b7;
  --color-paolo-veronese-green-400: #41b697;
  --color-paolo-veronese-green-500: #009a7b;
  --color-paolo-veronese-green-600: #007c63;
  --color-paolo-veronese-green-700: #00634e;
  --color-paolo-veronese-green-800: #004d3d;
  --color-paolo-veronese-green-900: #003c2e;
  --color-paolo-veronese-green-950: #00261c;
  --color-blueberry: #504399;
  --color-blueberry-50: #f4f4ff;
  --color-blueberry-100: #e9e9ff;
  --color-blueberry-200: #d3d2ff;
  --color-blueberry-300: #bbb7ff;
  --color-blueberry-400: #9b93ed;
  --color-blueberry-500: #8076d1;
  --color-blueberry-600: #665bb2;
  --color-blueberry-700: #504399;
  --color-blueberry-800: #3e3478;
  --color-blueberry-900: #2f2660;
  --color-blueberry-950: #1d1640;
  --color-eternal-darkness: #262742;
  --color-eternal-darkness-50: #f3f4ff;
  --color-eternal-darkness-100: #e7e9ff;
  --color-eternal-darkness-200: #d3d5f0;
  --color-eternal-darkness-300: #bcbedc;
  --color-eternal-darkness-400: #9a9dbd;
  --color-eternal-darkness-500: #7d80a0;
  --color-eternal-darkness-600: #626482;
  --color-eternal-darkness-700: #4a4c67;
  --color-eternal-darkness-800: #37394f;
  --color-eternal-darkness-900: #262742;
  --color-eternal-darkness-950: #161724;
}