Pitch Black to Lucky You Color Palette

About this palette

Pitch Black to Lucky You is a 5-color muted, gradient palette: #4B3A3E (Pitch Black), #3E675B (June Ivy), #6D90A7 (Treasure Map Waters), #CBB3A6 (Garden Snail), #FAD9DD (Lucky You). It mixes gray, turquoise, blue, pink tones and feels cool overall. The strongest text pairing is #4B3A3E on #FAD9DD with a contrast ratio of 8.12:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch Black	rgb(75, 58, 62)	hsl(346, 13%, 26%)
June Ivy	rgb(62, 103, 91)	hsl(162, 25%, 32%)
Treasure Map Waters	rgb(109, 144, 167)	hsl(204, 25%, 54%)
Garden Snail	rgb(203, 179, 166)	hsl(21, 26%, 72%)
Lucky You	rgb(250, 217, 221)	hsl(353, 77%, 92%)

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.12:1 Very good#4B3A3E on #FAD9DD
Aa8.12:1 Very good#FAD9DD on #4B3A3E
Aa5.34:1 Good#4B3A3E on #CBB3A6
Aa5.34:1 Good#CBB3A6 on #4B3A3E
Aa4.86:1 Good#3E675B on #FAD9DD
Aa4.86:1 Good#FAD9DD on #3E675B
Aa3.20:1 Poor#3E675B on #CBB3A6
Aa3.20:1 Poor#CBB3A6 on #3E675B

Color blindness preview

CSS variables

/* Pitch Black to Lucky You — https://swatchly.xyz/palette/4b3a3e-3e675b-6d90a7-cbb3a6-fad9dd */
:root {
  --pitch-black: #4b3a3e;
  --june-ivy: #3e675b;
  --treasure-map-waters: #6d90a7;
  --garden-snail: #cbb3a6;
  --lucky-you: #fad9dd;
}

Tailwind CSS v4

/* Pitch Black to Lucky You — https://swatchly.xyz/palette/4b3a3e-3e675b-6d90a7-cbb3a6-fad9dd */
@theme {
  --color-pitch-black: #4b3a3e;
  --color-pitch-black-50: #fef2f4;
  --color-pitch-black-100: #f5e7ea;
  --color-pitch-black-200: #e3d3d6;
  --color-pitch-black-300: #cdbbbf;
  --color-pitch-black-400: #ae9a9f;
  --color-pitch-black-500: #927f83;
  --color-pitch-black-600: #766468;
  --color-pitch-black-700: #5e4e51;
  --color-pitch-black-800: #4b3a3e;
  --color-pitch-black-900: #392d2f;
  --color-pitch-black-950: #231b1d;
  --color-june-ivy: #3e675b;
  --color-june-ivy-50: #e3fcf3;
  --color-june-ivy-100: #d7f2e9;
  --color-june-ivy-200: #c1e2d7;
  --color-june-ivy-300: #a9cec2;
  --color-june-ivy-400: #88b0a3;
  --color-june-ivy-500: #6c9689;
  --color-june-ivy-600: #547d70;
  --color-june-ivy-700: #3e675b;
  --color-june-ivy-800: #2e5147;
  --color-june-ivy-900: #213f36;
  --color-june-ivy-950: #122821;
  --color-treasure-map-waters: #6d90a7;
  --color-treasure-map-waters-50: #edf8ff;
  --color-treasure-map-waters-100: #dbf0ff;
  --color-treasure-map-waters-200: #c4def0;
  --color-treasure-map-waters-300: #abc9de;
  --color-treasure-map-waters-400: #89abc1;
  --color-treasure-map-waters-500: #6d90a7;
  --color-treasure-map-waters-600: #53748a;
  --color-treasure-map-waters-700: #3d5c70;
  --color-treasure-map-waters-800: #2d4859;
  --color-treasure-map-waters-900: #203746;
  --color-treasure-map-waters-950: #11222d;
  --color-garden-snail: #cbb3a6;
  --color-garden-snail-50: #fcede6;
  --color-garden-snail-100: #f2e2d9;
  --color-garden-snail-200: #dfccc2;
  --color-garden-snail-300: #cbb3a6;
  --color-garden-snail-400: #ac9589;
  --color-garden-snail-500: #927c6f;
  --color-garden-snail-600: #786358;
  --color-garden-snail-700: #614e44;
  --color-garden-snail-800: #4e3d34;
  --color-garden-snail-900: #3d2f28;
  --color-garden-snail-950: #271d17;
  --color-lucky-you: #fad9dd;
  --color-lucky-you-50: #fce8ea;
  --color-lucky-you-100: #fad9dd;
  --color-lucky-you-200: #e2c9cc;
  --color-lucky-you-300: #cfb3b7;
  --color-lucky-you-400: #b29598;
  --color-lucky-you-500: #987b7f;
  --color-lucky-you-600: #7e6266;
  --color-lucky-you-700: #674e51;
  --color-lucky-you-800: #513c3f;
  --color-lucky-you-900: #402d30;
  --color-lucky-you-950: #281b1d;
}