Fading Horizon to Dogwood color palette

42256DFading Horizon 4E49B4Royal Nightcore 008D65Viridian 55BA91Bleached Olive FFAF70Apricot FFE8E0Dogwood

Open in generator Export PNG, PDF, ASE…

About this palette

Fading Horizon to Dogwood is a 6-color cool palette: #42256D (Fading Horizon), #4E49B4 (Royal Nightcore), #008D65 (Viridian), #55BA91 (Bleached Olive), #FFAF70 (Apricot), #FFE8E0 (Dogwood). It mixes purple, green, orange, white tones and feels cool overall. The strongest text pairing is #42256D on #FFE8E0 with a contrast ratio of 10.41:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fading Horizon	rgb(66, 37, 109)	hsl(264, 49%, 29%)
Royal Nightcore	rgb(78, 73, 180)	hsl(243, 42%, 50%)
Viridian	rgb(0, 141, 101)	hsl(163, 100%, 28%)
Bleached Olive	rgb(85, 186, 145)	hsl(156, 42%, 53%)
Apricot	rgb(255, 175, 112)	hsl(26, 100%, 72%)
Dogwood	rgb(255, 232, 224)	hsl(15, 100%, 94%)

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.

Aa10.41:1 Very good#42256D on #FFE8E0
Aa10.41:1 Very good#FFE8E0 on #42256D
Aa6.77:1 Good#42256D on #FFAF70
Aa6.77:1 Good#FFAF70 on #42256D
Aa6.09:1 Good#4E49B4 on #FFE8E0
Aa6.09:1 Good#FFE8E0 on #4E49B4
Aa5.14:1 Good#42256D on #55BA91
Aa5.14:1 Good#55BA91 on #42256D

Color blindness preview

CSS variables

/* Fading Horizon to Dogwood — https://swatchly.xyz/palette/42256d-4e49b4-008d65-55ba91-ffaf70-ffe8e0 */
:root {
  --fading-horizon: #42256d;
  --royal-nightcore: #4e49b4;
  --viridian: #008d65;
  --bleached-olive: #55ba91;
  --apricot: #ffaf70;
  --dogwood: #ffe8e0;
}

Tailwind CSS v4

/* Fading Horizon to Dogwood — https://swatchly.xyz/palette/42256d-4e49b4-008d65-55ba91-ffaf70-ffe8e0 */
@theme {
  --color-fading-horizon: #42256d;
  --color-fading-horizon-50: #f6f3ff;
  --color-fading-horizon-100: #eee7ff;
  --color-fading-horizon-200: #ddceff;
  --color-fading-horizon-300: #c9b3fb;
  --color-fading-horizon-400: #ac92e1;
  --color-fading-horizon-500: #9277c7;
  --color-fading-horizon-600: #785eaa;
  --color-fading-horizon-700: #62498f;
  --color-fading-horizon-800: #4f3877;
  --color-fading-horizon-900: #42256d;
  --color-fading-horizon-950: #291a42;
  --color-royal-nightcore: #4e49b4;
  --color-royal-nightcore-50: #f3f4ff;
  --color-royal-nightcore-100: #e7eaff;
  --color-royal-nightcore-200: #d1d5ff;
  --color-royal-nightcore-300: #b7bdff;
  --color-royal-nightcore-400: #9499ff;
  --color-royal-nightcore-500: #7a7beb;
  --color-royal-nightcore-600: #6261cd;
  --color-royal-nightcore-700: #4e49b4;
  --color-royal-nightcore-800: #3c3891;
  --color-royal-nightcore-900: #2e2975;
  --color-royal-nightcore-950: #1c174f;
  --color-viridian: #008d65;
  --color-viridian-50: #dbffee;
  --color-viridian-100: #c0fee1;
  --color-viridian-200: #a5eecd;
  --color-viridian-300: #86dcb7;
  --color-viridian-400: #5bc098;
  --color-viridian-500: #35a77d;
  --color-viridian-600: #008d65;
  --color-viridian-700: #007050;
  --color-viridian-800: #00583d;
  --color-viridian-900: #00432e;
  --color-viridian-950: #002a1c;
  --color-bleached-olive: #55ba91;
  --color-bleached-olive-50: #dfffef;
  --color-bleached-olive-100: #c2fce0;
  --color-bleached-olive-200: #a5ebcb;
  --color-bleached-olive-300: #85d7b3;
  --color-bleached-olive-400: #55ba91;
  --color-bleached-olive-500: #359d76;
  --color-bleached-olive-600: #08815c;
  --color-bleached-olive-700: #006748;
  --color-bleached-olive-800: #005037;
  --color-bleached-olive-900: #003e2a;
  --color-bleached-olive-950: #002719;
  --color-apricot: #ffaf70;
  --color-apricot-50: #fff4ed;
  --color-apricot-100: #ffe8d8;
  --color-apricot-200: #ffcfab;
  --color-apricot-300: #ffaf70;
  --color-apricot-400: #da9055;
  --color-apricot-500: #be7333;
  --color-apricot-600: #a05811;
  --color-apricot-700: #814400;
  --color-apricot-800: #663400;
  --color-apricot-900: #4f2700;
  --color-apricot-950: #331700;
  --color-dogwood: #ffe8e0;
  --color-dogwood-50: #fff5f1;
  --color-dogwood-100: #ffe8e0;
  --color-dogwood-200: #e6d5d0;
  --color-dogwood-300: #d1beb7;
  --color-dogwood-400: #b29e96;
  --color-dogwood-500: #96827b;
  --color-dogwood-600: #7b6760;
  --color-dogwood-700: #62514b;
  --color-dogwood-800: #4e3e39;
  --color-dogwood-900: #3c302b;
  --color-dogwood-950: #261d1a;
}