Coral Kiss to Macau color palette

FFDFC5Coral Kiss 5C1743Soul Anchor 3C76A4Naval 006454Philodendron 6CC0FFCooler Than Ever 00C29BMacau

Open in generator Export PNG, PDF, ASE…

About this palette

Coral Kiss to Macau is a 6-color cool palette: #FFDFC5 (Coral Kiss), #5C1743 (Soul Anchor), #3C76A4 (Naval), #006454 (Philodendron), #6CC0FF (Cooler Than Ever), #00C29B (Macau). It mixes orange, red, blue, turquoise tones and feels cool overall. The strongest text pairing is #FFDFC5 on #5C1743 with a contrast ratio of 10.02:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coral Kiss	rgb(255, 223, 197)	hsl(27, 100%, 89%)
Soul Anchor	rgb(92, 23, 67)	hsl(322, 60%, 23%)
Naval	rgb(60, 118, 164)	hsl(207, 46%, 44%)
Philodendron	rgb(0, 100, 84)	hsl(170, 100%, 20%)
Cooler Than Ever	rgb(108, 192, 255)	hsl(206, 100%, 71%)
Macau	rgb(0, 194, 155)	hsl(168, 100%, 38%)

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.02:1 Very good#FFDFC5 on #5C1743
Aa10.02:1 Very good#5C1743 on #FFDFC5
Aa6.40:1 Good#5C1743 on #6CC0FF
Aa6.40:1 Good#6CC0FF on #5C1743
Aa5.63:1 Good#FFDFC5 on #006454
Aa5.63:1 Good#006454 on #FFDFC5
Aa5.54:1 Good#5C1743 on #00C29B
Aa5.54:1 Good#00C29B on #5C1743

Color blindness preview

CSS variables

/* Coral Kiss to Macau — https://swatchly.xyz/palette/ffdfc5-5c1743-3c76a4-006454-6cc0ff-00c29b */
:root {
  --coral-kiss: #ffdfc5;
  --soul-anchor: #5c1743;
  --naval: #3c76a4;
  --philodendron: #006454;
  --cooler-than-ever: #6cc0ff;
  --macau: #00c29b;
}

Tailwind CSS v4

/* Coral Kiss to Macau — https://swatchly.xyz/palette/ffdfc5-5c1743-3c76a4-006454-6cc0ff-00c29b */
@theme {
  --color-coral-kiss: #ffdfc5;
  --color-coral-kiss-50: #ffedde;
  --color-coral-kiss-100: #ffdfc5;
  --color-coral-kiss-200: #e6ceba;
  --color-coral-kiss-300: #d3b8a2;
  --color-coral-kiss-400: #b59981;
  --color-coral-kiss-500: #9b7e66;
  --color-coral-kiss-600: #80654e;
  --color-coral-kiss-700: #68503b;
  --color-coral-kiss-800: #533d2b;
  --color-coral-kiss-900: #412f1f;
  --color-coral-kiss-950: #291c11;
  --color-soul-anchor: #5c1743;
  --color-soul-anchor-50: #fff0f8;
  --color-soul-anchor-100: #ffe2f1;
  --color-soul-anchor-200: #ffc3e3;
  --color-soul-anchor-300: #eea8ce;
  --color-soul-anchor-400: #d386b1;
  --color-soul-anchor-500: #b76b96;
  --color-soul-anchor-600: #9b517c;
  --color-soul-anchor-700: #803d65;
  --color-soul-anchor-800: #692e51;
  --color-soul-anchor-900: #5c1743;
  --color-soul-anchor-950: #381329;
  --color-naval: #3c76a4;
  --color-naval-50: #edf7ff;
  --color-naval-100: #dcefff;
  --color-naval-200: #b9deff;
  --color-naval-300: #98caf4;
  --color-naval-400: #74abda;
  --color-naval-500: #5690c0;
  --color-naval-600: #3c76a4;
  --color-naval-700: #285e87;
  --color-naval-800: #18496e;
  --color-naval-900: #0d3857;
  --color-naval-950: #042339;
  --color-philodendron: #006454;
  --color-philodendron-50: #d9fff4;
  --color-philodendron-100: #c8f7ea;
  --color-philodendron-200: #ace5d6;
  --color-philodendron-300: #8ed1c0;
  --color-philodendron-400: #67b2a0;
  --color-philodendron-500: #479785;
  --color-philodendron-600: #2a7b6a;
  --color-philodendron-700: #006454;
  --color-philodendron-800: #014e41;
  --color-philodendron-900: #003c32;
  --color-philodendron-950: #00261f;
  --color-cooler-than-ever: #6cc0ff;
  --color-cooler-than-ever-50: #e3f2ff;
  --color-cooler-than-ever-100: #cde9ff;
  --color-cooler-than-ever-200: #a3d6ff;
  --color-cooler-than-ever-300: #6cc0ff;
  --color-cooler-than-ever-400: #50a2dd;
  --color-cooler-than-ever-500: #3087c3;
  --color-cooler-than-ever-600: #0f6da6;
  --color-cooler-than-ever-700: #005788;
  --color-cooler-than-ever-800: #00456d;
  --color-cooler-than-ever-900: #003657;
  --color-cooler-than-ever-950: #002238;
  --color-macau: #00c29b;
  --color-macau-50: #e0fff4;
  --color-macau-100: #b9ffe7;
  --color-macau-200: #90f1d2;
  --color-macau-300: #69debb;
  --color-macau-400: #00c29b;
  --color-macau-500: #00a180;
  --color-macau-600: #008267;
  --color-macau-700: #006751;
  --color-macau-800: #00503f;
  --color-macau-900: #003e2f;
  --color-macau-950: #00261c;
}