Start generating

Opulent Blue to Koopa Green Shell color palette

0859EFOpulent Blue007FC5Honolulu BlueED3A81Extra FuchsiaD58A00Fleur de Sel CaramelEB7EF4Pinkling6DD458Koopa Green Shell
Open in generator Export PNG, PDF, ASE…

About this palette

Opulent Blue to Koopa Green Shell is a 6-color vibrant, cool, neon palette: #0859EF (Opulent Blue), #007FC5 (Honolulu Blue), #ED3A81 (Extra Fuchsia), #D58A00 (Fleur de Sel Caramel), #EB7EF4 (Pinkling), #6DD458 (Koopa Green Shell). It mixes blue, pink, orange, green tones and feels cool overall. The strongest text pairing is #0859EF on #6DD458 with a contrast ratio of 3.04:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Opulent Bluergb(8, 89, 239)hsl(219, 94%, 48%)
Honolulu Bluergb(0, 127, 197)hsl(201, 100%, 39%)
Extra Fuchsiargb(237, 58, 129)hsl(336, 83%, 58%)
Fleur de Sel Caramelrgb(213, 138, 0)hsl(39, 100%, 42%)
Pinklingrgb(235, 126, 244)hsl(295, 84%, 73%)
Koopa Green Shellrgb(109, 212, 88)hsl(110, 59%, 59%)

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.

  • Aa3.04:1 Poor#0859EF on #6DD458
  • Aa3.04:1 Poor#6DD458 on #0859EF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Opulent Blue to Koopa Green Shell — https://swatchly.xyz/palette/0859ef-007fc5-ed3a81-d58a00-eb7ef4-6dd458 */
:root {
  --opulent-blue: #0859ef;
  --honolulu-blue: #007fc5;
  --extra-fuchsia: #ed3a81;
  --fleur-de-sel-caramel: #d58a00;
  --pinkling: #eb7ef4;
  --koopa-green-shell: #6dd458;
}

Tailwind CSS v4

/* Opulent Blue to Koopa Green Shell — https://swatchly.xyz/palette/0859ef-007fc5-ed3a81-d58a00-eb7ef4-6dd458 */
@theme {
  --color-opulent-blue: #0859ef;
  --color-opulent-blue-50: #f0f5ff;
  --color-opulent-blue-100: #e1ecff;
  --color-opulent-blue-200: #c2d8ff;
  --color-opulent-blue-300: #9ec1ff;
  --color-opulent-blue-400: #6b9eff;
  --color-opulent-blue-500: #397cff;
  --color-opulent-blue-600: #0859ef;
  --color-opulent-blue-700: #0044c4;
  --color-opulent-blue-800: #00359c;
  --color-opulent-blue-900: #00287c;
  --color-opulent-blue-950: #001753;
  --color-honolulu-blue: #007fc5;
  --color-honolulu-blue-50: #edf7ff;
  --color-honolulu-blue-100: #dff0ff;
  --color-honolulu-blue-200: #bee1ff;
  --color-honolulu-blue-300: #95cfff;
  --color-honolulu-blue-400: #58b3f8;
  --color-honolulu-blue-500: #3399e0;
  --color-honolulu-blue-600: #007fc5;
  --color-honolulu-blue-700: #00659e;
  --color-honolulu-blue-800: #004e7c;
  --color-honolulu-blue-900: #003c61;
  --color-honolulu-blue-950: #00253f;
  --color-extra-fuchsia: #ed3a81;
  --color-extra-fuchsia-50: #fff2f5;
  --color-extra-fuchsia-100: #ffe6eb;
  --color-extra-fuchsia-200: #ffcad7;
  --color-extra-fuchsia-300: #ffa7bf;
  --color-extra-fuchsia-400: #ff6c9d;
  --color-extra-fuchsia-500: #ed3a81;
  --color-extra-fuchsia-600: #ca0966;
  --color-extra-fuchsia-700: #a30050;
  --color-extra-fuchsia-800: #81003e;
  --color-extra-fuchsia-900: #65002f;
  --color-extra-fuchsia-950: #41001c;
  --color-fleur-de-sel-caramel: #d58a00;
  --color-fleur-de-sel-caramel-50: #fff1e1;
  --color-fleur-de-sel-caramel-100: #ffe4c4;
  --color-fleur-de-sel-caramel-200: #ffc987;
  --color-fleur-de-sel-caramel-300: #f1ae56;
  --color-fleur-de-sel-caramel-400: #d58a00;
  --color-fleur-de-sel-caramel-500: #b27200;
  --color-fleur-de-sel-caramel-600: #905c00;
  --color-fleur-de-sel-caramel-700: #734800;
  --color-fleur-de-sel-caramel-800: #5b3800;
  --color-fleur-de-sel-caramel-900: #472b00;
  --color-fleur-de-sel-caramel-950: #2e1a00;
  --color-pinkling: #eb7ef4;
  --color-pinkling-50: #fff7ff;
  --color-pinkling-100: #feecff;
  --color-pinkling-200: #fcd0ff;
  --color-pinkling-300: #faaeff;
  --color-pinkling-400: #eb7ef4;
  --color-pinkling-500: #c960d2;
  --color-pinkling-600: #a93fb3;
  --color-pinkling-700: #8b2694;
  --color-pinkling-800: #6f1277;
  --color-pinkling-900: #57055d;
  --color-pinkling-950: #37003c;
  --color-koopa-green-shell: #6dd458;
  --color-koopa-green-shell-50: #d3ffca;
  --color-koopa-green-shell-100: #b7faaa;
  --color-koopa-green-shell-200: #99e789;
  --color-koopa-green-shell-300: #6dd458;
  --color-koopa-green-shell-400: #50b43b;
  --color-koopa-green-shell-500: #2f9a10;
  --color-koopa-green-shell-600: #207d00;
  --color-koopa-green-shell-700: #186400;
  --color-koopa-green-shell-800: #114f00;
  --color-koopa-green-shell-900: #0b3f00;
  --color-koopa-green-shell-950: #042700;
}

Similar palettes