Lake Lucerne to Botanical Night color palette

559EBBLake Lucerne A2E3E2Aqua Fiesta 45CECESea Serpent 417D96Cry Me a River 006C44Into the Green 203B2CBotanical Night

Open in generator Export PNG, PDF, ASE…

About this palette

Lake Lucerne to Botanical Night is a 6-color cool palette: #559EBB (Lake Lucerne), #A2E3E2 (Aqua Fiesta), #45CECE (Sea Serpent), #417D96 (Cry Me a River), #006C44 (Into the Green), #203B2C (Botanical Night). It mixes blue, turquoise, green tones and feels cool overall. The strongest text pairing is #A2E3E2 on #203B2C with a contrast ratio of 8.48:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lake Lucerne	rgb(85, 158, 187)	hsl(197, 43%, 53%)
Aqua Fiesta	rgb(162, 227, 226)	hsl(179, 54%, 76%)
Sea Serpent	rgb(69, 206, 206)	hsl(180, 58%, 54%)
Cry Me a River	rgb(65, 125, 150)	hsl(198, 40%, 42%)
Into the Green	rgb(0, 108, 68)	hsl(158, 100%, 21%)
Botanical Night	rgb(32, 59, 44)	hsl(147, 30%, 18%)

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.48:1 Very good#A2E3E2 on #203B2C
Aa8.48:1 Very good#203B2C on #A2E3E2
Aa6.37:1 Good#45CECE on #203B2C
Aa6.37:1 Good#203B2C on #45CECE
Aa4.53:1 Good#A2E3E2 on #006C44
Aa4.53:1 Good#006C44 on #A2E3E2
Aa4.06:1 Poor#559EBB on #203B2C
Aa4.06:1 Poor#203B2C on #559EBB

Color blindness preview

CSS variables

/* Lake Lucerne to Botanical Night — https://swatchly.xyz/palette/559ebb-a2e3e2-45cece-417d96-006c44-203b2c */
:root {
  --lake-lucerne: #559ebb;
  --aqua-fiesta: #a2e3e2;
  --sea-serpent: #45cece;
  --cry-me-a-river: #417d96;
  --into-the-green: #006c44;
  --botanical-night: #203b2c;
}

Tailwind CSS v4

/* Lake Lucerne to Botanical Night — https://swatchly.xyz/palette/559ebb-a2e3e2-45cece-417d96-006c44-203b2c */
@theme {
  --color-lake-lucerne: #559ebb;
  --color-lake-lucerne-50: #eefaff;
  --color-lake-lucerne-100: #ddf4ff;
  --color-lake-lucerne-200: #b6e7fd;
  --color-lake-lucerne-300: #9ad4ed;
  --color-lake-lucerne-400: #74b7d3;
  --color-lake-lucerne-500: #559ebb;
  --color-lake-lucerne-600: #36809c;
  --color-lake-lucerne-700: #1d6680;
  --color-lake-lucerne-800: #085066;
  --color-lake-lucerne-900: #003d50;
  --color-lake-lucerne-950: #002532;
  --color-aqua-fiesta: #a2e3e2;
  --color-aqua-fiesta-50: #d8fcfb;
  --color-aqua-fiesta-100: #caf2f1;
  --color-aqua-fiesta-200: #a2e3e2;
  --color-aqua-fiesta-300: #94cbca;
  --color-aqua-fiesta-400: #70adac;
  --color-aqua-fiesta-500: #529291;
  --color-aqua-fiesta-600: #387776;
  --color-aqua-fiesta-700: #255f5f;
  --color-aqua-fiesta-800: #164b4b;
  --color-aqua-fiesta-900: #0b3a3a;
  --color-aqua-fiesta-950: #042525;
  --color-sea-serpent: #45cece;
  --color-sea-serpent-50: #bbfffe;
  --color-sea-serpent-100: #a7f5f4;
  --color-sea-serpent-200: #83e2e2;
  --color-sea-serpent-300: #45cece;
  --color-sea-serpent-400: #1bafaf;
  --color-sea-serpent-500: #009393;
  --color-sea-serpent-600: #007777;
  --color-sea-serpent-700: #005f5f;
  --color-sea-serpent-800: #004b4c;
  --color-sea-serpent-900: #003b3b;
  --color-sea-serpent-950: #002525;
  --color-cry-me-a-river: #417d96;
  --color-cry-me-a-river-50: #e9f8ff;
  --color-cry-me-a-river-100: #d6f2ff;
  --color-cry-me-a-river-200: #b7e2f6;
  --color-cry-me-a-river-300: #9ccee5;
  --color-cry-me-a-river-400: #78b1ca;
  --color-cry-me-a-river-500: #5b97b0;
  --color-cry-me-a-river-600: #417d96;
  --color-cry-me-a-river-700: #2b647b;
  --color-cry-me-a-river-800: #1a4e62;
  --color-cry-me-a-river-900: #0e3c4d;
  --color-cry-me-a-river-950: #052532;
  --color-into-the-green: #006c44;
  --color-into-the-green-50: #ddffeb;
  --color-into-the-green-100: #c6fadc;
  --color-into-the-green-200: #ace9c6;
  --color-into-the-green-300: #8ed5ae;
  --color-into-the-green-400: #67b88d;
  --color-into-the-green-500: #479d72;
  --color-into-the-green-600: #2a835a;
  --color-into-the-green-700: #006c44;
  --color-into-the-green-800: #005534;
  --color-into-the-green-900: #004127;
  --color-into-the-green-950: #002917;
  --color-botanical-night: #203b2c;
  --color-botanical-night-50: #e9faef;
  --color-botanical-night-100: #ddf1e5;
  --color-botanical-night-200: #c7ded0;
  --color-botanical-night-300: #aec9b8;
  --color-botanical-night-400: #8daa98;
  --color-botanical-night-500: #718f7d;
  --color-botanical-night-600: #587464;
  --color-botanical-night-700: #435d4e;
  --color-botanical-night-800: #334a3c;
  --color-botanical-night-900: #203b2c;
  --color-botanical-night-950: #16241c;
}