Start generating

Black Market to Breath of Celery color palette

231F3EBlack Market7A3E0EHazelnut ChocolateDDA37ALes Demoiselles d’Avignon517B9BZenithD9E5C4Breath of Celery
Open in generator Export PNG, PDF, ASE…

About this palette

Black Market to Breath of Celery is a 5-color cool, earthy, vintage palette: #231F3E (Black Market), #7A3E0E (Hazelnut Chocolate), #DDA37A (Les Demoiselles d’Avignon), #517B9B (Zenith), #D9E5C4 (Breath of Celery). It mixes purple, brown, orange, blue, green tones and feels cool overall. The strongest text pairing is #231F3E on #D9E5C4 with a contrast ratio of 11.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Black Marketrgb(35, 31, 62)hsl(248, 33%, 18%)
Hazelnut Chocolatergb(122, 62, 14)hsl(27, 79%, 27%)
Les Demoiselles d’Avignonrgb(221, 163, 122)hsl(25, 59%, 67%)
Zenithrgb(81, 123, 155)hsl(206, 31%, 46%)
Breath of Celeryrgb(217, 229, 196)hsl(82, 39%, 83%)

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.

  • Aa11.93:1 Very good#231F3E on #D9E5C4
  • Aa11.93:1 Very good#D9E5C4 on #231F3E
  • Aa7.18:1 Very good#231F3E on #DDA37A
  • Aa7.18:1 Very good#DDA37A on #231F3E
  • Aa6.32:1 Good#7A3E0E on #D9E5C4
  • Aa6.32:1 Good#D9E5C4 on #7A3E0E
  • Aa3.80:1 Poor#7A3E0E on #DDA37A
  • Aa3.80:1 Poor#DDA37A on #7A3E0E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Black Market to Breath of Celery — https://swatchly.xyz/palette/231f3e-7a3e0e-dda37a-517b9b-d9e5c4 */
:root {
  --black-market: #231f3e;
  --hazelnut-chocolate: #7a3e0e;
  --les-demoiselles-d-avignon: #dda37a;
  --zenith: #517b9b;
  --breath-of-celery: #d9e5c4;
}

Tailwind CSS v4

/* Black Market to Breath of Celery — https://swatchly.xyz/palette/231f3e-7a3e0e-dda37a-517b9b-d9e5c4 */
@theme {
  --color-black-market: #231f3e;
  --color-black-market-50: #f4f4ff;
  --color-black-market-100: #e9e9ff;
  --color-black-market-200: #d5d4f3;
  --color-black-market-300: #bebddf;
  --color-black-market-400: #9f9dc2;
  --color-black-market-500: #8582a8;
  --color-black-market-600: #6c698d;
  --color-black-market-700: #565475;
  --color-black-market-800: #44425f;
  --color-black-market-900: #36344d;
  --color-black-market-950: #231f3e;
  --color-hazelnut-chocolate: #7a3e0e;
  --color-hazelnut-chocolate-50: #fff2eb;
  --color-hazelnut-chocolate-100: #ffe5d6;
  --color-hazelnut-chocolate-200: #ffcaa9;
  --color-hazelnut-chocolate-300: #ecb08a;
  --color-hazelnut-chocolate-400: #cf8e64;
  --color-hazelnut-chocolate-500: #b27146;
  --color-hazelnut-chocolate-600: #93562c;
  --color-hazelnut-chocolate-700: #7a3e0e;
  --color-hazelnut-chocolate-800: #5f300c;
  --color-hazelnut-chocolate-900: #4b2405;
  --color-hazelnut-chocolate-950: #311401;
  --color-les-demoiselles-d-avignon: #dda37a;
  --color-les-demoiselles-d-avignon-50: #ffe8d8;
  --color-les-demoiselles-d-avignon-100: #ffd7bc;
  --color-les-demoiselles-d-avignon-200: #efbf9d;
  --color-les-demoiselles-d-avignon-300: #dda37a;
  --color-les-demoiselles-d-avignon-400: #be875f;
  --color-les-demoiselles-d-avignon-500: #a46e47;
  --color-les-demoiselles-d-avignon-600: #8a5731;
  --color-les-demoiselles-d-avignon-700: #724421;
  --color-les-demoiselles-d-avignon-800: #5d3515;
  --color-les-demoiselles-d-avignon-900: #4c290d;
  --color-les-demoiselles-d-avignon-950: #311805;
  --color-zenith: #517b9b;
  --color-zenith-50: #ecf7ff;
  --color-zenith-100: #ddf0ff;
  --color-zenith-200: #c0e0fa;
  --color-zenith-300: #a7cce9;
  --color-zenith-400: #85aece;
  --color-zenith-500: #6a94b5;
  --color-zenith-600: #517b9b;
  --color-zenith-700: #3b627f;
  --color-zenith-800: #2a4c66;
  --color-zenith-900: #1d3a50;
  --color-zenith-950: #0e2434;
  --color-breath-of-celery: #d9e5c4;
  --color-breath-of-celery-50: #f7fdec;
  --color-breath-of-celery-100: #eef5e2;
  --color-breath-of-celery-200: #d9e5c4;
  --color-breath-of-celery-300: #c2ccb1;
  --color-breath-of-celery-400: #a1ab8e;
  --color-breath-of-celery-500: #848f70;
  --color-breath-of-celery-600: #697356;
  --color-breath-of-celery-700: #515b40;
  --color-breath-of-celery-800: #3e462f;
  --color-breath-of-celery-900: #2f3622;
  --color-breath-of-celery-950: #1d2113;
}

Similar palettes