Pine Scented Lagoon to One Year of Rain color palette

007077Pine Scented Lagoon 002424Sunken Ship 00140CJedi Night 003D11Melancholia 234662One Year of Rain

Open in generator Export PNG, PDF, ASE…

About this palette

Pine Scented Lagoon to One Year of Rain is a 5-color dark, cool palette: #007077 (Pine Scented Lagoon), #002424 (Sunken Ship), #00140C (Jedi Night), #003D11 (Melancholia), #234662 (One Year of Rain). It mixes turquoise, black, green, blue tones and feels cool overall. The strongest text pairing is #007077 on #00140C with a contrast ratio of 3.24:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Scented Lagoon	rgb(0, 112, 119)	hsl(184, 100%, 23%)
Sunken Ship	rgb(0, 36, 36)	hsl(180, 100%, 7%)
Jedi Night	rgb(0, 20, 12)	hsl(156, 100%, 4%)
Melancholia	rgb(0, 61, 17)	hsl(137, 100%, 12%)
One Year of Rain	rgb(35, 70, 98)	hsl(207, 47%, 26%)

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.24:1 Poor#007077 on #00140C
Aa3.24:1 Poor#00140C on #007077

Color blindness preview

CSS variables

/* Pine Scented Lagoon to One Year of Rain — https://swatchly.xyz/palette/007077-002424-00140c-003d11-234662 */
:root {
  --pine-scented-lagoon: #007077;
  --sunken-ship: #002424;
  --jedi-night: #00140c;
  --melancholia: #003d11;
  --one-year-of-rain: #234662;
}

Tailwind CSS v4

/* Pine Scented Lagoon to One Year of Rain — https://swatchly.xyz/palette/007077-002424-00140c-003d11-234662 */
@theme {
  --color-pine-scented-lagoon: #007077;
  --color-pine-scented-lagoon-50: #dcfcff;
  --color-pine-scented-lagoon-100: #c0f5f9;
  --color-pine-scented-lagoon-200: #a2e1e6;
  --color-pine-scented-lagoon-300: #80cad0;
  --color-pine-scented-lagoon-400: #55aab1;
  --color-pine-scented-lagoon-500: #328d94;
  --color-pine-scented-lagoon-600: #007077;
  --color-pine-scented-lagoon-700: #00595f;
  --color-pine-scented-lagoon-800: #00464a;
  --color-pine-scented-lagoon-900: #00363a;
  --color-pine-scented-lagoon-950: #002225;
  --color-sunken-ship: #002424;
  --color-sunken-ship-50: #e5fafa;
  --color-sunken-ship-100: #d9f1f0;
  --color-sunken-ship-200: #c2dedd;
  --color-sunken-ship-300: #a8c8c8;
  --color-sunken-ship-400: #86a9a9;
  --color-sunken-ship-500: #6a8e8d;
  --color-sunken-ship-600: #507372;
  --color-sunken-ship-700: #3c5b5b;
  --color-sunken-ship-800: #2c4747;
  --color-sunken-ship-900: #1f3736;
  --color-sunken-ship-950: #002424;
  --color-jedi-night: #00140c;
  --color-jedi-night-50: #eafaf2;
  --color-jedi-night-100: #def0e8;
  --color-jedi-night-200: #c8ddd4;
  --color-jedi-night-300: #b0c7bd;
  --color-jedi-night-400: #8ea99d;
  --color-jedi-night-500: #6f8a7e;
  --color-jedi-night-600: #536c61;
  --color-jedi-night-700: #3c5148;
  --color-jedi-night-800: #293b33;
  --color-jedi-night-900: #1a2822;
  --color-jedi-night-950: #00140c;
  --color-melancholia: #003d11;
  --color-melancholia-50: #e0ffe2;
  --color-melancholia-100: #d3f6d5;
  --color-melancholia-200: #bae4be;
  --color-melancholia-300: #9fcfa3;
  --color-melancholia-400: #7bb181;
  --color-melancholia-500: #5e9564;
  --color-melancholia-600: #44794b;
  --color-melancholia-700: #306137;
  --color-melancholia-800: #214c28;
  --color-melancholia-900: #003d11;
  --color-melancholia-950: #0a240f;
  --color-one-year-of-rain: #234662;
  --color-one-year-of-rain-50: #edf7ff;
  --color-one-year-of-rain-100: #dbeeff;
  --color-one-year-of-rain-200: #bfdcf5;
  --color-one-year-of-rain-300: #a5c5e2;
  --color-one-year-of-rain-400: #82a6c5;
  --color-one-year-of-rain-500: #668baa;
  --color-one-year-of-rain-600: #4d708e;
  --color-one-year-of-rain-700: #395974;
  --color-one-year-of-rain-800: #234662;
  --color-one-year-of-rain-900: #1d3649;
  --color-one-year-of-rain-950: #10212f;
}