Start generating

Greenhouse to Nevermind Nirvana color palette

505E2EGreenhouse9B674FArgan Oil033741Nordic NoirF8EBFFStrawberry Bonbon82AB67Sage62CBEENevermind Nirvana
Open in generator Export PNG, PDF, ASE…

About this palette

Greenhouse to Nevermind Nirvana is a 6-color cool palette: #505E2E (Greenhouse), #9B674F (Argan Oil), #033741 (Nordic Noir), #F8EBFF (Strawberry Bonbon), #82AB67 (Sage), #62CBEE (Nevermind Nirvana). It mixes green, brown, turquoise, white, blue tones and feels cool overall. The strongest text pairing is #033741 on #F8EBFF with a contrast ratio of 11.26:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Greenhousergb(80, 94, 46)hsl(78, 34%, 27%)
Argan Oilrgb(155, 103, 79)hsl(19, 32%, 46%)
Nordic Noirrgb(3, 55, 65)hsl(190, 91%, 13%)
Strawberry Bonbonrgb(248, 235, 255)hsl(279, 100%, 96%)
Sagergb(130, 171, 103)hsl(96, 29%, 54%)
Nevermind Nirvanargb(98, 203, 238)hsl(195, 80%, 66%)

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.26:1 Very good#033741 on #F8EBFF
  • Aa11.26:1 Very good#F8EBFF on #033741
  • Aa6.94:1 Good#033741 on #62CBEE
  • Aa6.94:1 Good#62CBEE on #033741
  • Aa6.14:1 Good#505E2E on #F8EBFF
  • Aa6.14:1 Good#F8EBFF on #505E2E
  • Aa4.90:1 Good#033741 on #82AB67
  • Aa4.90:1 Good#82AB67 on #033741

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Greenhouse to Nevermind Nirvana — https://swatchly.xyz/palette/505e2e-9b674f-033741-f8ebff-82ab67-62cbee */
:root {
  --greenhouse: #505e2e;
  --argan-oil: #9b674f;
  --nordic-noir: #033741;
  --strawberry-bonbon: #f8ebff;
  --sage: #82ab67;
  --nevermind-nirvana: #62cbee;
}

Tailwind CSS v4

/* Greenhouse to Nevermind Nirvana — https://swatchly.xyz/palette/505e2e-9b674f-033741-f8ebff-82ab67-62cbee */
@theme {
  --color-greenhouse: #505e2e;
  --color-greenhouse-50: #f0fadd;
  --color-greenhouse-100: #e5f1d0;
  --color-greenhouse-200: #d1deb7;
  --color-greenhouse-300: #bac99d;
  --color-greenhouse-400: #9baa7a;
  --color-greenhouse-500: #808f5d;
  --color-greenhouse-600: #667545;
  --color-greenhouse-700: #505e2e;
  --color-greenhouse-800: #3e4922;
  --color-greenhouse-900: #2f3917;
  --color-greenhouse-950: #1c230b;
  --color-argan-oil: #9b674f;
  --color-argan-oil-50: #fff2ec;
  --color-argan-oil-100: #ffe7dd;
  --color-argan-oil-200: #fbd1bd;
  --color-argan-oil-300: #eabaa4;
  --color-argan-oil-400: #cf9b83;
  --color-argan-oil-500: #b68068;
  --color-argan-oil-600: #9b674f;
  --color-argan-oil-700: #7f4f39;
  --color-argan-oil-800: #663c29;
  --color-argan-oil-900: #502d1c;
  --color-argan-oil-950: #341a0e;
  --color-nordic-noir: #033741;
  --color-nordic-noir-50: #e4faff;
  --color-nordic-noir-100: #d4f1f9;
  --color-nordic-noir-200: #bbdfe8;
  --color-nordic-noir-300: #a0c9d3;
  --color-nordic-noir-400: #7daab5;
  --color-nordic-noir-500: #5f8e99;
  --color-nordic-noir-600: #46727d;
  --color-nordic-noir-700: #315b64;
  --color-nordic-noir-800: #22464f;
  --color-nordic-noir-900: #033741;
  --color-nordic-noir-950: #0b2126;
  --color-strawberry-bonbon: #f8ebff;
  --color-strawberry-bonbon-50: #f8ebff;
  --color-strawberry-bonbon-100: #ece4f1;
  --color-strawberry-bonbon-200: #dad0df;
  --color-strawberry-bonbon-300: #c5bacb;
  --color-strawberry-bonbon-400: #a79bad;
  --color-strawberry-bonbon-500: #8c8092;
  --color-strawberry-bonbon-600: #726778;
  --color-strawberry-bonbon-700: #5b5160;
  --color-strawberry-bonbon-800: #473f4c;
  --color-strawberry-bonbon-900: #37303b;
  --color-strawberry-bonbon-950: #221d25;
  --color-sage: #82ab67;
  --color-sage-50: #e4fdd5;
  --color-sage-100: #d7f3c6;
  --color-sage-200: #bfe0ab;
  --color-sage-300: #a5ca8e;
  --color-sage-400: #82ab67;
  --color-sage-500: #68904d;
  --color-sage-600: #507535;
  --color-sage-700: #3c5e23;
  --color-sage-800: #2d4b16;
  --color-sage-900: #213a0c;
  --color-sage-950: #132505;
  --color-nevermind-nirvana: #62cbee;
  --color-nevermind-nirvana-50: #e1f7ff;
  --color-nevermind-nirvana-100: #c6efff;
  --color-nevermind-nirvana-200: #94e0fb;
  --color-nevermind-nirvana-300: #62cbee;
  --color-nevermind-nirvana-400: #44abcc;
  --color-nevermind-nirvana-500: #1690b2;
  --color-nevermind-nirvana-600: #007592;
  --color-nevermind-nirvana-700: #005d75;
  --color-nevermind-nirvana-800: #00495c;
  --color-nevermind-nirvana-900: #003949;
  --color-nevermind-nirvana-950: #00242f;
}

Similar palettes