Hatoba Pigeon to Vintage Bloom color palette

9A8CA0Hatoba Pigeon 655169Hibernation 6A7D64Emerald City 353B30Black Olive EEF8E5Homoeopathic Lime C3B1CCVintage Bloom

Open in generator Export PNG, PDF, ASE…

About this palette

Hatoba Pigeon to Vintage Bloom is a 6-color muted palette: #9A8CA0 (Hatoba Pigeon), #655169 (Hibernation), #6A7D64 (Emerald City), #353B30 (Black Olive), #EEF8E5 (Homoeopathic Lime), #C3B1CC (Vintage Bloom). It mixes gray, purple, green, white tones and feels cool overall. The strongest text pairing is #353B30 on #EEF8E5 with a contrast ratio of 10.55:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hatoba Pigeon	rgb(154, 140, 160)	hsl(282, 10%, 59%)
Hibernation	rgb(101, 81, 105)	hsl(290, 13%, 36%)
Emerald City	rgb(106, 125, 100)	hsl(106, 11%, 44%)
Black Olive	rgb(53, 59, 48)	hsl(93, 10%, 21%)
Homoeopathic Lime	rgb(238, 248, 229)	hsl(92, 58%, 94%)
Vintage Bloom	rgb(195, 177, 204)	hsl(280, 21%, 75%)

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.55:1 Very good#353B30 on #EEF8E5
Aa10.55:1 Very good#EEF8E5 on #353B30
Aa6.54:1 Good#655169 on #EEF8E5
Aa6.54:1 Good#EEF8E5 on #655169
Aa5.76:1 Good#353B30 on #C3B1CC
Aa5.76:1 Good#C3B1CC on #353B30
Aa4.06:1 Poor#6A7D64 on #EEF8E5
Aa4.06:1 Poor#EEF8E5 on #6A7D64

Color blindness preview

CSS variables

/* Hatoba Pigeon to Vintage Bloom — https://swatchly.xyz/palette/9a8ca0-655169-6a7d64-353b30-eef8e5-c3b1cc */
:root {
  --hatoba-pigeon: #9a8ca0;
  --hibernation: #655169;
  --emerald-city: #6a7d64;
  --black-olive: #353b30;
  --homoeopathic-lime: #eef8e5;
  --vintage-bloom: #c3b1cc;
}

Tailwind CSS v4

/* Hatoba Pigeon to Vintage Bloom — https://swatchly.xyz/palette/9a8ca0-655169-6a7d64-353b30-eef8e5-c3b1cc */
@theme {
  --color-hatoba-pigeon: #9a8ca0;
  --color-hatoba-pigeon-50: #fcf4ff;
  --color-hatoba-pigeon-100: #f5ecf9;
  --color-hatoba-pigeon-200: #e4d9e9;
  --color-hatoba-pigeon-300: #d0c4d5;
  --color-hatoba-pigeon-400: #b3a6b9;
  --color-hatoba-pigeon-500: #9a8ca0;
  --color-hatoba-pigeon-600: #7d7083;
  --color-hatoba-pigeon-700: #645769;
  --color-hatoba-pigeon-800: #4e4352;
  --color-hatoba-pigeon-900: #3b323f;
  --color-hatoba-pigeon-950: #241e27;
  --color-hibernation: #655169;
  --color-hibernation-50: #fdf0ff;
  --color-hibernation-100: #f4e5f7;
  --color-hibernation-200: #e3d1e6;
  --color-hibernation-300: #cebbd2;
  --color-hibernation-400: #b09bb5;
  --color-hibernation-500: #96809a;
  --color-hibernation-600: #7b6780;
  --color-hibernation-700: #655169;
  --color-hibernation-800: #4f3f52;
  --color-hibernation-900: #3d2f40;
  --color-hibernation-950: #271d29;
  --color-emerald-city: #6a7d64;
  --color-emerald-city-50: #edf9ea;
  --color-emerald-city-100: #e5f2e1;
  --color-emerald-city-200: #d2e1cd;
  --color-emerald-city-300: #bccdb6;
  --color-emerald-city-400: #9db097;
  --color-emerald-city-500: #83967d;
  --color-emerald-city-600: #6a7d64;
  --color-emerald-city-700: #52644d;
  --color-emerald-city-800: #3f4e3a;
  --color-emerald-city-900: #2f3c2b;
  --color-emerald-city-950: #1c2519;
  --color-black-olive: #353b30;
  --color-black-olive-50: #f2f7ef;
  --color-black-olive-100: #e8ede4;
  --color-black-olive-200: #d4dacf;
  --color-black-olive-300: #bdc3b8;
  --color-black-olive-400: #9ea599;
  --color-black-olive-500: #848b7e;
  --color-black-olive-600: #6b7266;
  --color-black-olive-700: #565c51;
  --color-black-olive-800: #444a40;
  --color-black-olive-900: #353b30;
  --color-black-olive-950: #22251f;
  --color-homoeopathic-lime: #eef8e5;
  --color-homoeopathic-lime-50: #eef8e5;
  --color-homoeopathic-lime-100: #e6ede1;
  --color-homoeopathic-lime-200: #d2dacc;
  --color-homoeopathic-lime-300: #bbc4b4;
  --color-homoeopathic-lime-400: #9ca594;
  --color-homoeopathic-lime-500: #818a78;
  --color-homoeopathic-lime-600: #676f5f;
  --color-homoeopathic-lime-700: #51584a;
  --color-homoeopathic-lime-800: #3e4538;
  --color-homoeopathic-lime-900: #2f352a;
  --color-homoeopathic-lime-950: #1d2119;
  --color-vintage-bloom: #c3b1cc;
  --color-vintage-bloom-50: #f7ecfd;
  --color-vintage-bloom-100: #ede0f3;
  --color-vintage-bloom-200: #d9cae0;
  --color-vintage-bloom-300: #c3b1cc;
  --color-vintage-bloom-400: #a594ad;
  --color-vintage-bloom-500: #8b7a93;
  --color-vintage-bloom-600: #716179;
  --color-vintage-bloom-700: #5b4d62;
  --color-vintage-bloom-800: #483c4e;
  --color-vintage-bloom-900: #392e3e;
  --color-vintage-bloom-950: #241c27;
}