Jedi Night to Seafoam Splashes color palette

04170EJedi Night 17533BMoor-Monster 306B4CForest Serenade 14996ERainforest 8ACDA8Irish Spring B1EDC5Seafoam Splashes

Open in generator Export PNG, PDF, ASE…

About this palette

Jedi Night to Seafoam Splashes is a 6-color cool, earthy, monochromatic palette: #04170E (Jedi Night), #17533B (Moor-Monster), #306B4C (Forest Serenade), #14996E (Rainforest), #8ACDA8 (Irish Spring), #B1EDC5 (Seafoam Splashes). It mixes black, green tones and feels cool overall. The strongest text pairing is #04170E on #B1EDC5 with a contrast ratio of 13.92:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(4, 23, 14)	hsl(152, 70%, 5%)
Moor-Monster	rgb(23, 83, 59)	hsl(156, 57%, 21%)
Forest Serenade	rgb(48, 107, 76)	hsl(148, 38%, 30%)
Rainforest	rgb(20, 153, 110)	hsl(161, 77%, 34%)
Irish Spring	rgb(138, 205, 168)	hsl(147, 40%, 67%)
Seafoam Splashes	rgb(177, 237, 197)	hsl(140, 63%, 81%)

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.

Aa13.92:1 Super#04170E on #B1EDC5
Aa13.92:1 Super#B1EDC5 on #04170E
Aa10.03:1 Very good#04170E on #8ACDA8
Aa10.03:1 Very good#8ACDA8 on #04170E
Aa6.76:1 Good#17533B on #B1EDC5
Aa6.76:1 Good#B1EDC5 on #17533B
Aa5.12:1 Good#04170E on #14996E
Aa5.12:1 Good#14996E on #04170E

Color blindness preview

CSS variables

/* Jedi Night to Seafoam Splashes — https://swatchly.xyz/palette/04170e-17533b-306b4c-14996e-8acda8-b1edc5 */
:root {
  --jedi-night: #04170e;
  --moor-monster: #17533b;
  --forest-serenade: #306b4c;
  --rainforest: #14996e;
  --irish-spring: #8acda8;
  --seafoam-splashes: #b1edc5;
}

Tailwind CSS v4

/* Jedi Night to Seafoam Splashes — https://swatchly.xyz/palette/04170e-17533b-306b4c-14996e-8acda8-b1edc5 */
@theme {
  --color-jedi-night: #04170e;
  --color-jedi-night-50: #ebf9f1;
  --color-jedi-night-100: #e0f0e7;
  --color-jedi-night-200: #caddd3;
  --color-jedi-night-300: #b2c7bb;
  --color-jedi-night-400: #91a89b;
  --color-jedi-night-500: #738a7d;
  --color-jedi-night-600: #576c61;
  --color-jedi-night-700: #405349;
  --color-jedi-night-800: #2d3d35;
  --color-jedi-night-900: #1e2b24;
  --color-jedi-night-950: #04170e;
  --color-moor-monster: #17533b;
  --color-moor-monster-50: #defeed;
  --color-moor-monster-100: #d1f5e2;
  --color-moor-monster-200: #b8e3cd;
  --color-moor-monster-300: #9dcfb6;
  --color-moor-monster-400: #7ab196;
  --color-moor-monster-500: #5e977c;
  --color-moor-monster-600: #447c63;
  --color-moor-monster-700: #30654e;
  --color-moor-monster-800: #17533b;
  --color-moor-monster-900: #163f2e;
  --color-moor-monster-950: #0a281c;
  --color-forest-serenade: #306b4c;
  --color-forest-serenade-50: #deffea;
  --color-forest-serenade-100: #d0f6df;
  --color-forest-serenade-200: #b9e5cb;
  --color-forest-serenade-300: #9fd2b4;
  --color-forest-serenade-400: #7cb594;
  --color-forest-serenade-500: #609b7a;
  --color-forest-serenade-600: #478161;
  --color-forest-serenade-700: #306b4c;
  --color-forest-serenade-800: #22543a;
  --color-forest-serenade-900: #16412b;
  --color-forest-serenade-950: #092a1a;
  --color-rainforest: #14996e;
  --color-rainforest-50: #d9ffec;
  --color-rainforest-100: #b9fbdc;
  --color-rainforest-200: #99e9c5;
  --color-rainforest-300: #76d4ac;
  --color-rainforest-400: #46b58a;
  --color-rainforest-500: #14996e;
  --color-rainforest-600: #007c57;
  --color-rainforest-700: #006345;
  --color-rainforest-800: #004d35;
  --color-rainforest-900: #003c28;
  --color-rainforest-950: #002618;
  --color-irish-spring: #8acda8;
  --color-irish-spring-50: #d7fde7;
  --color-irish-spring-100: #c9f3db;
  --color-irish-spring-200: #aee1c4;
  --color-irish-spring-300: #8acda8;
  --color-irish-spring-400: #6ead8b;
  --color-irish-spring-500: #519370;
  --color-irish-spring-600: #387858;
  --color-irish-spring-700: #256144;
  --color-irish-spring-800: #174d34;
  --color-irish-spring-900: #0d3d27;
  --color-irish-spring-950: #042617;
  --color-seafoam-splashes: #b1edc5;
  --color-seafoam-splashes-50: #e9fff0;
  --color-seafoam-splashes-100: #d7f9e1;
  --color-seafoam-splashes-200: #b1edc5;
  --color-seafoam-splashes-300: #a2d3b2;
  --color-seafoam-splashes-400: #7cb38f;
  --color-seafoam-splashes-500: #5e9773;
  --color-seafoam-splashes-600: #447b59;
  --color-seafoam-splashes-700: #2f6243;
  --color-seafoam-splashes-800: #1f4d32;
  --color-seafoam-splashes-900: #143c25;
  --color-seafoam-splashes-950: #092615;
}