Black-Hearted to Praise the Sun color palette

441824Black-Hearted 00665FPeacock Pride 00A3A2Silken Jade ACBAF5Purple Illusion F5F3D6Praise the Sun

Open in generator Export PNG, PDF, ASE…

About this palette

Black-Hearted to Praise the Sun is a 5-color cool, vintage palette: #441824 (Black-Hearted), #00665F (Peacock Pride), #00A3A2 (Silken Jade), #ACBAF5 (Purple Illusion), #F5F3D6 (Praise the Sun). It mixes red, turquoise, blue, white tones and feels cool overall. The strongest text pairing is #441824 on #F5F3D6 with a contrast ratio of 13.32:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black-Hearted	rgb(68, 24, 36)	hsl(344, 48%, 18%)
Peacock Pride	rgb(0, 102, 95)	hsl(176, 100%, 20%)
Silken Jade	rgb(0, 163, 162)	hsl(180, 100%, 32%)
Purple Illusion	rgb(172, 186, 245)	hsl(228, 78%, 82%)
Praise the Sun	rgb(245, 243, 214)	hsl(56, 61%, 90%)

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.

Aa13.32:1 Super#441824 on #F5F3D6
Aa13.32:1 Super#F5F3D6 on #441824
Aa7.92:1 Very good#441824 on #ACBAF5
Aa7.92:1 Very good#ACBAF5 on #441824
Aa6.09:1 Good#00665F on #F5F3D6
Aa6.09:1 Good#F5F3D6 on #00665F
Aa4.82:1 Good#441824 on #00A3A2
Aa4.82:1 Good#00A3A2 on #441824

Color blindness preview

CSS variables

/* Black-Hearted to Praise the Sun — https://swatchly.xyz/palette/441824-00665f-00a3a2-acbaf5-f5f3d6 */
:root {
  --black-hearted: #441824;
  --peacock-pride: #00665f;
  --silken-jade: #00a3a2;
  --purple-illusion: #acbaf5;
  --praise-the-sun: #f5f3d6;
}

Tailwind CSS v4

/* Black-Hearted to Praise the Sun — https://swatchly.xyz/palette/441824-00665f-00a3a2-acbaf5-f5f3d6 */
@theme {
  --color-black-hearted: #441824;
  --color-black-hearted-50: #fff1f3;
  --color-black-hearted-100: #ffe3e8;
  --color-black-hearted-200: #f6cad2;
  --color-black-hearted-300: #e3b2bb;
  --color-black-hearted-400: #c48f99;
  --color-black-hearted-500: #a6717c;
  --color-black-hearted-600: #875660;
  --color-black-hearted-700: #6b3f49;
  --color-black-hearted-800: #522d36;
  --color-black-hearted-900: #441824;
  --color-black-hearted-950: #251115;
  --color-peacock-pride: #00665f;
  --color-peacock-pride-50: #d6fffa;
  --color-peacock-pride-100: #c7f7f0;
  --color-peacock-pride-200: #ace5de;
  --color-peacock-pride-300: #8ed1c9;
  --color-peacock-pride-400: #67b3ab;
  --color-peacock-pride-500: #479890;
  --color-peacock-pride-600: #2a7d75;
  --color-peacock-pride-700: #00665f;
  --color-peacock-pride-800: #00504a;
  --color-peacock-pride-900: #003e39;
  --color-peacock-pride-950: #002724;
  --color-silken-jade: #00a3a2;
  --color-silken-jade-50: #dcfffe;
  --color-silken-jade-100: #bafdfb;
  --color-silken-jade-200: #9cedeb;
  --color-silken-jade-300: #79dad8;
  --color-silken-jade-400: #47bdbc;
  --color-silken-jade-500: #00a3a2;
  --color-silken-jade-600: #008382;
  --color-silken-jade-700: #006867;
  --color-silken-jade-800: #005151;
  --color-silken-jade-900: #003e3e;
  --color-silken-jade-950: #002626;
  --color-purple-illusion: #acbaf5;
  --color-purple-illusion-50: #f0f3ff;
  --color-purple-illusion-100: #e2e8ff;
  --color-purple-illusion-200: #c7d2ff;
  --color-purple-illusion-300: #acbaf5;
  --color-purple-illusion-400: #8e9bd2;
  --color-purple-illusion-500: #7480b7;
  --color-purple-illusion-600: #5b669b;
  --color-purple-illusion-700: #475080;
  --color-purple-illusion-800: #363e68;
  --color-purple-illusion-900: #293053;
  --color-purple-illusion-950: #181d36;
  --color-praise-the-sun: #f5f3d6;
  --color-praise-the-sun-50: #f5f3d6;
  --color-praise-the-sun-100: #eae9d7;
  --color-praise-the-sun-200: #d8d6c1;
  --color-praise-the-sun-300: #c2c0a9;
  --color-praise-the-sun-400: #a4a288;
  --color-praise-the-sun-500: #89876d;
  --color-praise-the-sun-600: #6f6d54;
  --color-praise-the-sun-700: #585640;
  --color-praise-the-sun-800: #454330;
  --color-praise-the-sun-900: #353423;
  --color-praise-the-sun-950: #212014;
}