Rosy Brown to Verdant Hush color palette

B59198Rosy Brown A3C4E5Sky High 26384CAstral Nomad 677859Dill E8D1D7Ephemeral Red 4F5943Verdant Hush

Open in generator Export PNG, PDF, ASE…

About this palette

Rosy Brown to Verdant Hush is a 6-color muted, cool palette: #B59198 (Rosy Brown), #A3C4E5 (Sky High), #26384C (Astral Nomad), #677859 (Dill), #E8D1D7 (Ephemeral Red), #4F5943 (Verdant Hush). It mixes pink, blue, green, gray tones and feels cool overall. The strongest text pairing is #26384C on #E8D1D7 with a contrast ratio of 8.29:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rosy Brown	rgb(181, 145, 152)	hsl(348, 20%, 64%)
Sky High	rgb(163, 196, 229)	hsl(210, 56%, 77%)
Astral Nomad	rgb(38, 56, 76)	hsl(212, 33%, 22%)
Dill	rgb(103, 120, 89)	hsl(93, 15%, 41%)
Ephemeral Red	rgb(232, 209, 215)	hsl(344, 33%, 86%)
Verdant Hush	rgb(79, 89, 67)	hsl(87, 14%, 31%)

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.29:1 Very good#26384C on #E8D1D7
Aa8.29:1 Very good#E8D1D7 on #26384C
Aa6.61:1 Good#A3C4E5 on #26384C
Aa6.61:1 Good#26384C on #A3C4E5
Aa5.11:1 Good#E8D1D7 on #4F5943
Aa5.11:1 Good#4F5943 on #E8D1D7
Aa4.26:1 Poor#B59198 on #26384C
Aa4.26:1 Poor#26384C on #B59198

Color blindness preview

CSS variables

/* Rosy Brown to Verdant Hush — https://swatchly.xyz/palette/b59198-a3c4e5-26384c-677859-e8d1d7-4f5943 */
:root {
  --rosy-brown: #b59198;
  --sky-high: #a3c4e5;
  --astral-nomad: #26384c;
  --dill: #677859;
  --ephemeral-red: #e8d1d7;
  --verdant-hush: #4f5943;
}

Tailwind CSS v4

/* Rosy Brown to Verdant Hush — https://swatchly.xyz/palette/b59198-a3c4e5-26384c-677859-e8d1d7-4f5943 */
@theme {
  --color-rosy-brown: #b59198;
  --color-rosy-brown-50: #ffeef1;
  --color-rosy-brown-100: #fae1e5;
  --color-rosy-brown-200: #e8cbd0;
  --color-rosy-brown-300: #d3b2b9;
  --color-rosy-brown-400: #b59198;
  --color-rosy-brown-500: #9a777e;
  --color-rosy-brown-600: #7f5e65;
  --color-rosy-brown-700: #674a50;
  --color-rosy-brown-800: #52393e;
  --color-rosy-brown-900: #412b30;
  --color-rosy-brown-950: #2a1a1e;
  --color-sky-high: #a3c4e5;
  --color-sky-high-50: #edf6ff;
  --color-sky-high-100: #dbedff;
  --color-sky-high-200: #c1daf3;
  --color-sky-high-300: #a3c4e5;
  --color-sky-high-400: #86a4c3;
  --color-sky-high-500: #6a89a8;
  --color-sky-high-600: #516e8c;
  --color-sky-high-700: #3d5872;
  --color-sky-high-800: #2d445c;
  --color-sky-high-900: #213548;
  --color-sky-high-950: #12212f;
  --color-astral-nomad: #26384c;
  --color-astral-nomad-50: #eef6ff;
  --color-astral-nomad-100: #dfedfd;
  --color-astral-nomad-200: #c9d9ec;
  --color-astral-nomad-300: #b0c3d8;
  --color-astral-nomad-400: #90a5bc;
  --color-astral-nomad-500: #758aa1;
  --color-astral-nomad-600: #5c7086;
  --color-astral-nomad-700: #485a6e;
  --color-astral-nomad-800: #374759;
  --color-astral-nomad-900: #26384c;
  --color-astral-nomad-950: #19232e;
  --color-dill: #677859;
  --color-dill-50: #eff9e6;
  --color-dill-100: #e5f1dc;
  --color-dill-200: #d1dfc6;
  --color-dill-300: #bacaae;
  --color-dill-400: #9bac8d;
  --color-dill-500: #809272;
  --color-dill-600: #677859;
  --color-dill-700: #506044;
  --color-dill-800: #3e4b32;
  --color-dill-900: #2e3a25;
  --color-dill-950: #1c2415;
  --color-ephemeral-red: #e8d1d7;
  --color-ephemeral-red-50: #fff2f5;
  --color-ephemeral-red-100: #f6e7eb;
  --color-ephemeral-red-200: #e8d1d7;
  --color-ephemeral-red-300: #cfbbc0;
  --color-ephemeral-red-400: #b09ba1;
  --color-ephemeral-red-500: #958086;
  --color-ephemeral-red-600: #7a666b;
  --color-ephemeral-red-700: #625055;
  --color-ephemeral-red-800: #4d3e42;
  --color-ephemeral-red-900: #3c2f32;
  --color-ephemeral-red-950: #261c1f;
  --color-verdant-hush: #4f5943;
  --color-verdant-hush-50: #f1f8ea;
  --color-verdant-hush-100: #e7eede;
  --color-verdant-hush-200: #d2dbc8;
  --color-verdant-hush-300: #bbc5af;
  --color-verdant-hush-400: #9ba68e;
  --color-verdant-hush-500: #7f8a73;
  --color-verdant-hush-600: #657059;
  --color-verdant-hush-700: #4f5943;
  --color-verdant-hush-800: #3d4534;
  --color-verdant-hush-900: #2f3526;
  --color-verdant-hush-950: #1c2116;
}