Start generating

Pistachio to Oceanic Noir color palette

96C175Pistachio9F5766Cherry BerryFFD1D7Love Fumes5B8EC9Marina3B421DForestry122938Oceanic Noir
Open in generator Export PNG, PDF, ASE…

About this palette

Pistachio to Oceanic Noir is a 6-color cool palette: #96C175 (Pistachio), #9F5766 (Cherry Berry), #FFD1D7 (Love Fumes), #5B8EC9 (Marina), #3B421D (Forestry), #122938 (Oceanic Noir). It mixes green, red, pink, blue tones and feels cool overall. The strongest text pairing is #FFD1D7 on #122938 with a contrast ratio of 10.97:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pistachiorgb(150, 193, 117)hsl(94, 38%, 61%)
Cherry Berryrgb(159, 87, 102)hsl(348, 29%, 48%)
Love Fumesrgb(255, 209, 215)hsl(352, 100%, 91%)
Marinargb(91, 142, 201)hsl(212, 50%, 57%)
Forestryrgb(59, 66, 29)hsl(71, 39%, 19%)
Oceanic Noirrgb(18, 41, 56)hsl(204, 51%, 15%)

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.97:1 Very good#FFD1D7 on #122938
  • Aa10.97:1 Very good#122938 on #FFD1D7
  • Aa7.74:1 Very good#FFD1D7 on #3B421D
  • Aa7.74:1 Very good#3B421D on #FFD1D7
  • Aa7.27:1 Very good#96C175 on #122938
  • Aa7.27:1 Very good#122938 on #96C175
  • Aa5.13:1 Good#96C175 on #3B421D
  • Aa5.13:1 Good#3B421D on #96C175

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pistachio to Oceanic Noir — https://swatchly.xyz/palette/96c175-9f5766-ffd1d7-5b8ec9-3b421d-122938 */
:root {
  --pistachio: #96c175;
  --cherry-berry: #9f5766;
  --love-fumes: #ffd1d7;
  --marina: #5b8ec9;
  --forestry: #3b421d;
  --oceanic-noir: #122938;
}

Tailwind CSS v4

/* Pistachio to Oceanic Noir — https://swatchly.xyz/palette/96c175-9f5766-ffd1d7-5b8ec9-3b421d-122938 */
@theme {
  --color-pistachio: #96c175;
  --color-pistachio-50: #dcf8c9;
  --color-pistachio-100: #cdecb7;
  --color-pistachio-200: #b4d89a;
  --color-pistachio-300: #96c175;
  --color-pistachio-400: #7ba45a;
  --color-pistachio-500: #628a41;
  --color-pistachio-600: #4c722a;
  --color-pistachio-700: #3a5c19;
  --color-pistachio-800: #2c4a0d;
  --color-pistachio-900: #213b06;
  --color-pistachio-950: #132501;
  --color-cherry-berry: #9f5766;
  --color-cherry-berry-50: #fff1f3;
  --color-cherry-berry-100: #ffe4e8;
  --color-cherry-berry-200: #ffc9d2;
  --color-cherry-berry-300: #f2aeba;
  --color-cherry-berry-400: #d68c9a;
  --color-cherry-berry-500: #bb717f;
  --color-cherry-berry-600: #9f5766;
  --color-cherry-berry-700: #824250;
  --color-cherry-berry-800: #69303d;
  --color-cherry-berry-900: #53232e;
  --color-cherry-berry-950: #36131c;
  --color-love-fumes: #ffd1d7;
  --color-love-fumes-50: #fff8f9;
  --color-love-fumes-100: #ffecee;
  --color-love-fumes-200: #ffd1d7;
  --color-love-fumes-300: #e1bcc1;
  --color-love-fumes-400: #c39a9f;
  --color-love-fumes-500: #a67d82;
  --color-love-fumes-600: #896267;
  --color-love-fumes-700: #6e4b50;
  --color-love-fumes-800: #57393d;
  --color-love-fumes-900: #442b2e;
  --color-love-fumes-950: #2c191c;
  --color-marina: #5b8ec9;
  --color-marina-50: #f0f7ff;
  --color-marina-100: #e1eeff;
  --color-marina-200: #c1ddff;
  --color-marina-300: #9cc8fd;
  --color-marina-400: #78a9e3;
  --color-marina-500: #5b8ec9;
  --color-marina-600: #4172aa;
  --color-marina-700: #2c5a8d;
  --color-marina-800: #1d4673;
  --color-marina-900: #12355b;
  --color-marina-950: #07203c;
  --color-forestry: #3b421d;
  --color-forestry-50: #f3f9e1;
  --color-forestry-100: #e8efd4;
  --color-forestry-200: #d4dcbd;
  --color-forestry-300: #bdc5a1;
  --color-forestry-400: #9ca57e;
  --color-forestry-500: #808961;
  --color-forestry-600: #656d48;
  --color-forestry-700: #4e5534;
  --color-forestry-800: #3b421d;
  --color-forestry-900: #2d321a;
  --color-forestry-950: #1b1f0d;
  --color-oceanic-noir: #122938;
  --color-oceanic-noir-50: #ecf7ff;
  --color-oceanic-noir-100: #ddeefa;
  --color-oceanic-noir-200: #c6dbe9;
  --color-oceanic-noir-300: #adc5d5;
  --color-oceanic-noir-400: #8ca5b8;
  --color-oceanic-noir-500: #728c9e;
  --color-oceanic-noir-600: #5a7284;
  --color-oceanic-noir-700: #465d6d;
  --color-oceanic-noir-800: #364b59;
  --color-oceanic-noir-900: #2a3c48;
  --color-oceanic-noir-950: #122938;
}

Similar palettes