Start generating

Cucumber Queen to Quiet Jade color palette

307948Cucumber Queen193825Darkest Forest94C29CIrish Spring6BA976Primavera326343Forest SerenadeB1DDC0Quiet Jade
Open in generator Export PNG, PDF, ASE…

About this palette

Cucumber Queen to Quiet Jade is a 6-color cool, earthy, monochromatic palette: #307948 (Cucumber Queen), #193825 (Darkest Forest), #94C29C (Irish Spring), #6BA976 (Primavera), #326343 (Forest Serenade), #B1DDC0 (Quiet Jade). It mixes green tones and feels cool overall. The strongest text pairing is #193825 on #B1DDC0 with a contrast ratio of 8.55:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cucumber Queenrgb(48, 121, 72)hsl(140, 43%, 33%)
Darkest Forestrgb(25, 56, 37)hsl(143, 38%, 16%)
Irish Springrgb(148, 194, 156)hsl(130, 27%, 67%)
Primaverargb(107, 169, 118)hsl(131, 26%, 54%)
Forest Serenadergb(50, 99, 67)hsl(141, 33%, 29%)
Quiet Jadergb(177, 221, 192)hsl(140, 39%, 78%)

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.

  • Aa8.55:1 Very good#193825 on #B1DDC0
  • Aa8.55:1 Very good#B1DDC0 on #193825
  • Aa6.40:1 Good#193825 on #94C29C
  • Aa6.40:1 Good#94C29C on #193825
  • Aa4.66:1 Good#326343 on #B1DDC0
  • Aa4.66:1 Good#B1DDC0 on #326343
  • Aa4.63:1 Good#193825 on #6BA976
  • Aa4.63:1 Good#6BA976 on #193825

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cucumber Queen to Quiet Jade — https://swatchly.xyz/palette/307948-193825-94c29c-6ba976-326343-b1ddc0 */
:root {
  --cucumber-queen: #307948;
  --darkest-forest: #193825;
  --irish-spring: #94c29c;
  --primavera: #6ba976;
  --forest-serenade: #326343;
  --quiet-jade: #b1ddc0;
}

Tailwind CSS v4

/* Cucumber Queen to Quiet Jade — https://swatchly.xyz/palette/307948-193825-94c29c-6ba976-326343-b1ddc0 */
@theme {
  --color-cucumber-queen: #307948;
  --color-cucumber-queen-50: #dfffe5;
  --color-cucumber-queen-100: #cbf8d5;
  --color-cucumber-queen-200: #b0e6bc;
  --color-cucumber-queen-300: #92d0a1;
  --color-cucumber-queen-400: #6cb17f;
  --color-cucumber-queen-500: #4d9562;
  --color-cucumber-queen-600: #307948;
  --color-cucumber-queen-700: #1e6136;
  --color-cucumber-queen-800: #104d27;
  --color-cucumber-queen-900: #073c1c;
  --color-cucumber-queen-950: #02260f;
  --color-darkest-forest: #193825;
  --color-darkest-forest-50: #e7fbed;
  --color-darkest-forest-100: #dcf2e2;
  --color-darkest-forest-200: #c5dfcd;
  --color-darkest-forest-300: #accab5;
  --color-darkest-forest-400: #89aa94;
  --color-darkest-forest-500: #6d8f78;
  --color-darkest-forest-600: #53735e;
  --color-darkest-forest-700: #3e5b48;
  --color-darkest-forest-800: #2e4737;
  --color-darkest-forest-900: #193825;
  --color-darkest-forest-950: #122118;
  --color-irish-spring: #94c29c;
  --color-irish-spring-50: #dbf7e0;
  --color-irish-spring-100: #cdecd2;
  --color-irish-spring-200: #b3d8b9;
  --color-irish-spring-300: #94c29c;
  --color-irish-spring-400: #78a480;
  --color-irish-spring-500: #5f8b67;
  --color-irish-spring-600: #487250;
  --color-irish-spring-700: #365c3e;
  --color-irish-spring-800: #284a2f;
  --color-irish-spring-900: #1d3a24;
  --color-irish-spring-950: #102514;
  --color-primavera: #6ba976;
  --color-primavera-50: #d9fddd;
  --color-primavera-100: #c9f3cf;
  --color-primavera-200: #aedfb5;
  --color-primavera-300: #91c99a;
  --color-primavera-400: #6ba976;
  --color-primavera-500: #518f5d;
  --color-primavera-600: #3a7546;
  --color-primavera-700: #285e34;
  --color-primavera-800: #1b4b26;
  --color-primavera-900: #113b1c;
  --color-primavera-950: #07260f;
  --color-forest-serenade: #326343;
  --color-forest-serenade-50: #e1fee9;
  --color-forest-serenade-100: #d4f5dd;
  --color-forest-serenade-200: #bde3c7;
  --color-forest-serenade-300: #a2ceaf;
  --color-forest-serenade-400: #7fb08e;
  --color-forest-serenade-500: #639572;
  --color-forest-serenade-600: #497a59;
  --color-forest-serenade-700: #326343;
  --color-forest-serenade-800: #264d34;
  --color-forest-serenade-900: #1a3c26;
  --color-forest-serenade-950: #0d2616;
  --color-quiet-jade: #b1ddc0;
  --color-quiet-jade-50: #def8e7;
  --color-quiet-jade-100: #d1eeda;
  --color-quiet-jade-200: #b1ddc0;
  --color-quiet-jade-300: #a0c6ad;
  --color-quiet-jade-400: #80a88e;
  --color-quiet-jade-500: #658e74;
  --color-quiet-jade-600: #4d745b;
  --color-quiet-jade-700: #395e47;
  --color-quiet-jade-800: #2a4b37;
  --color-quiet-jade-900: #1e3a29;
  --color-quiet-jade-950: #102418;
}

Similar palettes