Start generating

Heavenly Sky to Wakame Green color palette

768DAFHeavenly SkyDEA57DLunatic Lynx008A9CWaikikiFFE7DCSlightly in Love292D47Midnight Masquerade006172Wakame Green
Open in generator Export PNG, PDF, ASE…

About this palette

Heavenly Sky to Wakame Green is a 6-color cool palette: #768DAF (Heavenly Sky), #DEA57D (Lunatic Lynx), #008A9C (Waikiki), #FFE7DC (Slightly in Love), #292D47 (Midnight Masquerade), #006172 (Wakame Green). It mixes blue, orange, turquoise, white, purple tones and feels cool overall. The strongest text pairing is #FFE7DC on #292D47 with a contrast ratio of 11.35:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Heavenly Skyrgb(118, 141, 175)hsl(216, 26%, 57%)
Lunatic Lynxrgb(222, 165, 125)hsl(25, 60%, 68%)
Waikikirgb(0, 138, 156)hsl(187, 100%, 31%)
Slightly in Lovergb(255, 231, 220)hsl(19, 100%, 93%)
Midnight Masqueradergb(41, 45, 71)hsl(232, 27%, 22%)
Wakame Greenrgb(0, 97, 114)hsl(189, 100%, 22%)

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.35:1 Very good#FFE7DC on #292D47
  • Aa11.35:1 Very good#292D47 on #FFE7DC
  • Aa6.27:1 Good#DEA57D on #292D47
  • Aa6.27:1 Good#292D47 on #DEA57D
  • Aa6.00:1 Good#FFE7DC on #006172
  • Aa6.00:1 Good#006172 on #FFE7DC
  • Aa3.97:1 Poor#768DAF on #292D47
  • Aa3.97:1 Poor#292D47 on #768DAF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Heavenly Sky to Wakame Green — https://swatchly.xyz/palette/768daf-dea57d-008a9c-ffe7dc-292d47-006172 */
:root {
  --heavenly-sky: #768daf;
  --lunatic-lynx: #dea57d;
  --waikiki: #008a9c;
  --slightly-in-love: #ffe7dc;
  --midnight-masquerade: #292d47;
  --wakame-green: #006172;
}

Tailwind CSS v4

/* Heavenly Sky to Wakame Green — https://swatchly.xyz/palette/768daf-dea57d-008a9c-ffe7dc-292d47-006172 */
@theme {
  --color-heavenly-sky: #768daf;
  --color-heavenly-sky-50: #f1f7ff;
  --color-heavenly-sky-100: #e3eeff;
  --color-heavenly-sky-200: #cadcf7;
  --color-heavenly-sky-300: #b2c6e5;
  --color-heavenly-sky-400: #91a8c9;
  --color-heavenly-sky-500: #768daf;
  --color-heavenly-sky-600: #5b7192;
  --color-heavenly-sky-700: #465a77;
  --color-heavenly-sky-800: #34465f;
  --color-heavenly-sky-900: #26354b;
  --color-heavenly-sky-950: #162030;
  --color-lunatic-lynx: #dea57d;
  --color-lunatic-lynx-50: #ffe9da;
  --color-lunatic-lynx-100: #ffd9bf;
  --color-lunatic-lynx-200: #f0c1a0;
  --color-lunatic-lynx-300: #dea57d;
  --color-lunatic-lynx-400: #bf8962;
  --color-lunatic-lynx-500: #a57049;
  --color-lunatic-lynx-600: #8a5833;
  --color-lunatic-lynx-700: #724522;
  --color-lunatic-lynx-800: #5d3516;
  --color-lunatic-lynx-900: #4b290e;
  --color-lunatic-lynx-950: #311805;
  --color-waikiki: #008a9c;
  --color-waikiki-50: #dcf9ff;
  --color-waikiki-100: #b6f3ff;
  --color-waikiki-200: #93e0ee;
  --color-waikiki-300: #6ec8d9;
  --color-waikiki-400: #3da8ba;
  --color-waikiki-500: #008a9c;
  --color-waikiki-600: #006f7e;
  --color-waikiki-700: #005965;
  --color-waikiki-800: #004650;
  --color-waikiki-900: #00363f;
  --color-waikiki-950: #002328;
  --color-slightly-in-love: #ffe7dc;
  --color-slightly-in-love-50: #fff4ef;
  --color-slightly-in-love-100: #ffe7dc;
  --color-slightly-in-love-200: #e6d5cd;
  --color-slightly-in-love-300: #d1bdb4;
  --color-slightly-in-love-400: #b29d93;
  --color-slightly-in-love-500: #978178;
  --color-slightly-in-love-600: #7b675e;
  --color-slightly-in-love-700: #635148;
  --color-slightly-in-love-800: #4e3e37;
  --color-slightly-in-love-900: #3d2f29;
  --color-slightly-in-love-950: #261d18;
  --color-midnight-masquerade: #292d47;
  --color-midnight-masquerade-50: #f2f5ff;
  --color-midnight-masquerade-100: #e6eaff;
  --color-midnight-masquerade-200: #d1d6ef;
  --color-midnight-masquerade-300: #babfdc;
  --color-midnight-masquerade-400: #999fbe;
  --color-midnight-masquerade-500: #7d83a2;
  --color-midnight-masquerade-600: #626885;
  --color-midnight-masquerade-700: #4c516b;
  --color-midnight-masquerade-800: #3a3e54;
  --color-midnight-masquerade-900: #292d47;
  --color-midnight-masquerade-950: #191b29;
  --color-wakame-green: #006172;
  --color-wakame-green-50: #e5faff;
  --color-wakame-green-100: #c9f4ff;
  --color-wakame-green-200: #abe2f0;
  --color-wakame-green-300: #8dcddd;
  --color-wakame-green-400: #66afc0;
  --color-wakame-green-500: #4693a5;
  --color-wakame-green-600: #2a7889;
  --color-wakame-green-700: #006172;
  --color-wakame-green-800: #004c5a;
  --color-wakame-green-900: #003a46;
  --color-wakame-green-950: #00252c;
}

Similar palettes