Black Cherry to Clear Sky color palette

2F1315Black Cherry 842634Polished Apple 4E7138Botanical 5C9133Asparagus Sultan 6EACDCHigh Seas 9ACBFFClear Sky

Open in generator Export PNG, PDF, ASE…

About this palette

Black Cherry to Clear Sky is a 6-color cool palette: #2F1315 (Black Cherry), #842634 (Polished Apple), #4E7138 (Botanical), #5C9133 (Asparagus Sultan), #6EACDC (High Seas), #9ACBFF (Clear Sky). It mixes brown, red, green, blue tones and feels cool overall. The strongest text pairing is #2F1315 on #9ACBFF with a contrast ratio of 10.09:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(47, 19, 21)	hsl(356, 42%, 13%)
Polished Apple	rgb(132, 38, 52)	hsl(351, 55%, 33%)
Botanical	rgb(78, 113, 56)	hsl(97, 34%, 33%)
Asparagus Sultan	rgb(92, 145, 51)	hsl(94, 48%, 38%)
High Seas	rgb(110, 172, 220)	hsl(206, 61%, 65%)
Clear Sky	rgb(154, 203, 255)	hsl(211, 100%, 80%)

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.09:1 Very good#2F1315 on #9ACBFF
Aa10.09:1 Very good#9ACBFF on #2F1315
Aa7.02:1 Very good#2F1315 on #6EACDC
Aa7.02:1 Very good#6EACDC on #2F1315
Aa5.36:1 Good#842634 on #9ACBFF
Aa5.36:1 Good#9ACBFF on #842634
Aa4.53:1 Good#2F1315 on #5C9133
Aa4.53:1 Good#5C9133 on #2F1315

Color blindness preview

CSS variables

/* Black Cherry to Clear Sky — https://swatchly.xyz/palette/2f1315-842634-4e7138-5c9133-6eacdc-9acbff */
:root {
  --black-cherry: #2f1315;
  --polished-apple: #842634;
  --botanical: #4e7138;
  --asparagus-sultan: #5c9133;
  --high-seas: #6eacdc;
  --clear-sky: #9acbff;
}

Tailwind CSS v4

/* Black Cherry to Clear Sky — https://swatchly.xyz/palette/2f1315-842634-4e7138-5c9133-6eacdc-9acbff */
@theme {
  --color-black-cherry: #2f1315;
  --color-black-cherry-50: #fff1f1;
  --color-black-cherry-100: #fee4e4;
  --color-black-cherry-200: #edcfcf;
  --color-black-cherry-300: #d9b7b8;
  --color-black-cherry-400: #bc9798;
  --color-black-cherry-500: #9f7b7c;
  --color-black-cherry-600: #836161;
  --color-black-cherry-700: #694b4b;
  --color-black-cherry-800: #533839;
  --color-black-cherry-900: #402a2b;
  --color-black-cherry-950: #2f1315;
  --color-polished-apple: #842634;
  --color-polished-apple-50: #fff1f2;
  --color-polished-apple-100: #ffe4e4;
  --color-polished-apple-200: #ffc5c7;
  --color-polished-apple-300: #fda0a5;
  --color-polished-apple-400: #df7b82;
  --color-polished-apple-500: #c05c65;
  --color-polished-apple-600: #9e424c;
  --color-polished-apple-700: #842634;
  --color-polished-apple-800: #661f29;
  --color-polished-apple-900: #51151e;
  --color-polished-apple-950: #350a10;
  --color-botanical: #4e7138;
  --color-botanical-50: #e7fddb;
  --color-botanical-100: #daf3cc;
  --color-botanical-200: #c2e0b1;
  --color-botanical-300: #a8c995;
  --color-botanical-400: #85aa70;
  --color-botanical-500: #698d53;
  --color-botanical-600: #4e7138;
  --color-botanical-700: #3c5a28;
  --color-botanical-800: #2d471b;
  --color-botanical-900: #213712;
  --color-botanical-950: #132308;
  --color-asparagus-sultan: #5c9133;
  --color-asparagus-sultan-50: #e1ffd0;
  --color-asparagus-sultan-100: #d1f6bb;
  --color-asparagus-sultan-200: #b8e49d;
  --color-asparagus-sultan-300: #9cce7d;
  --color-asparagus-sultan-400: #79ae54;
  --color-asparagus-sultan-500: #5c9133;
  --color-asparagus-sultan-600: #447617;
  --color-asparagus-sultan-700: #325f00;
  --color-asparagus-sultan-800: #264b00;
  --color-asparagus-sultan-900: #1c3a00;
  --color-asparagus-sultan-950: #102500;
  --color-high-seas: #6eacdc;
  --color-high-seas-50: #eff8ff;
  --color-high-seas-100: #ddf0ff;
  --color-high-seas-200: #b8dfff;
  --color-high-seas-300: #97cbf4;
  --color-high-seas-400: #6eacdc;
  --color-high-seas-500: #528fbe;
  --color-high-seas-600: #3774a0;
  --color-high-seas-700: #225c84;
  --color-high-seas-800: #13476b;
  --color-high-seas-900: #083754;
  --color-high-seas-950: #022137;
  --color-clear-sky: #9acbff;
  --color-clear-sky-50: #f3f9ff;
  --color-clear-sky-100: #e3f0ff;
  --color-clear-sky-200: #c2dfff;
  --color-clear-sky-300: #9acbff;
  --color-clear-sky-400: #7daada;
  --color-clear-sky-500: #5f8dbe;
  --color-clear-sky-600: #4471a0;
  --color-clear-sky-700: #305984;
  --color-clear-sky-800: #20456a;
  --color-clear-sky-900: #153453;
  --color-clear-sky-950: #0a2037;
}