Super Rare Jade to Forget-Me-Not color palette

05B8C0Super Rare Jade 8FFFE6Hello Winter 77DABDCabbage 134057Capital Blue 006B70Aqua Obscura 0087C2Forget-Me-Not

Open in generator Export PNG, PDF, ASE…

About this palette

Super Rare Jade to Forget-Me-Not is a 6-color cool palette: #05B8C0 (Super Rare Jade), #8FFFE6 (Hello Winter), #77DABD (Cabbage), #134057 (Capital Blue), #006B70 (Aqua Obscura), #0087C2 (Forget-Me-Not). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #8FFFE6 on #134057 with a contrast ratio of 9.28:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Super Rare Jade	rgb(5, 184, 192)	hsl(183, 95%, 39%)
Hello Winter	rgb(143, 255, 230)	hsl(167, 100%, 78%)
Cabbage	rgb(119, 218, 189)	hsl(162, 57%, 66%)
Capital Blue	rgb(19, 64, 87)	hsl(200, 64%, 21%)
Aqua Obscura	rgb(0, 107, 112)	hsl(183, 100%, 22%)
Forget-Me-Not	rgb(0, 135, 194)	hsl(198, 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.

Aa9.28:1 Very good#8FFFE6 on #134057
Aa9.28:1 Very good#134057 on #8FFFE6
Aa6.61:1 Good#77DABD on #134057
Aa6.61:1 Good#134057 on #77DABD
Aa5.28:1 Good#8FFFE6 on #006B70
Aa5.28:1 Good#006B70 on #8FFFE6
Aa4.54:1 Good#05B8C0 on #134057
Aa4.54:1 Good#134057 on #05B8C0

Color blindness preview

CSS variables

/* Super Rare Jade to Forget-Me-Not — https://swatchly.xyz/palette/05b8c0-8fffe6-77dabd-134057-006b70-0087c2 */
:root {
  --super-rare-jade: #05b8c0;
  --hello-winter: #8fffe6;
  --cabbage: #77dabd;
  --capital-blue: #134057;
  --aqua-obscura: #006b70;
  --forget-me-not: #0087c2;
}

Tailwind CSS v4

/* Super Rare Jade to Forget-Me-Not — https://swatchly.xyz/palette/05b8c0-8fffe6-77dabd-134057-006b70-0087c2 */
@theme {
  --color-super-rare-jade: #05b8c0;
  --color-super-rare-jade-50: #dafdff;
  --color-super-rare-jade-100: #b1fbff;
  --color-super-rare-jade-200: #8deaef;
  --color-super-rare-jade-300: #65d5dc;
  --color-super-rare-jade-400: #05b8c0;
  --color-super-rare-jade-500: #0099a0;
  --color-super-rare-jade-600: #007b81;
  --color-super-rare-jade-700: #006267;
  --color-super-rare-jade-800: #004d50;
  --color-super-rare-jade-900: #003b3e;
  --color-super-rare-jade-950: #002527;
  --color-hello-winter: #8fffe6;
  --color-hello-winter-50: #c8fff1;
  --color-hello-winter-100: #8fffe6;
  --color-hello-winter-200: #96e6d3;
  --color-hello-winter-300: #75d2bd;
  --color-hello-winter-400: #46b59f;
  --color-hello-winter-500: #169a84;
  --color-hello-winter-600: #007d6b;
  --color-hello-winter-700: #006455;
  --color-hello-winter-800: #004e42;
  --color-hello-winter-900: #003c33;
  --color-hello-winter-950: #00261f;
  --color-cabbage: #77dabd;
  --color-cabbage-50: #e0fff4;
  --color-cabbage-100: #c3fce9;
  --color-cabbage-200: #a7ebd5;
  --color-cabbage-300: #77dabd;
  --color-cabbage-400: #5ab89e;
  --color-cabbage-500: #349c82;
  --color-cabbage-600: #078067;
  --color-cabbage-700: #006651;
  --color-cabbage-800: #004f3f;
  --color-cabbage-900: #003d2f;
  --color-cabbage-950: #00261d;
  --color-capital-blue: #134057;
  --color-capital-blue-50: #ebf7ff;
  --color-capital-blue-100: #d6efff;
  --color-capital-blue-200: #bbddf2;
  --color-capital-blue-300: #9fc6de;
  --color-capital-blue-400: #7aa5bf;
  --color-capital-blue-500: #5c88a2;
  --color-capital-blue-600: #426c85;
  --color-capital-blue-700: #2e546a;
  --color-capital-blue-800: #134057;
  --color-capital-blue-900: #153140;
  --color-capital-blue-950: #0a1d28;
  --color-aqua-obscura: #006b70;
  --color-aqua-obscura-50: #dafdff;
  --color-aqua-obscura-100: #c5f6f9;
  --color-aqua-obscura-200: #abe6e9;
  --color-aqua-obscura-300: #8ed2d6;
  --color-aqua-obscura-400: #67b5ba;
  --color-aqua-obscura-500: #479ba0;
  --color-aqua-obscura-600: #2a8186;
  --color-aqua-obscura-700: #006b70;
  --color-aqua-obscura-800: #005458;
  --color-aqua-obscura-900: #004144;
  --color-aqua-obscura-950: #00292b;
  --color-forget-me-not: #0087c2;
  --color-forget-me-not-50: #e9f6ff;
  --color-forget-me-not-100: #d2ecff;
  --color-forget-me-not-200: #a5dbff;
  --color-forget-me-not-300: #6ec5fc;
  --color-forget-me-not-400: #3ca5e0;
  --color-forget-me-not-500: #0087c2;
  --color-forget-me-not-600: #006d9d;
  --color-forget-me-not-700: #00567e;
  --color-forget-me-not-800: #004464;
  --color-forget-me-not-900: #00354f;
  --color-forget-me-not-950: #002134;
}