Pine Scented Lagoon to Night Kite Color Palette

About this palette

Pine Scented Lagoon to Night Kite is a 5-color cool palette: #007074 (Pine Scented Lagoon), #5B8BFF (Skinny Jeans), #71C0ED (Blue Mana), #9BF0FB (Permafrost), #00516D (Night Kite). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #9BF0FB on #00516D with a contrast ratio of 6.78:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Scented Lagoon	rgb(0, 112, 116)	hsl(182, 100%, 23%)
Skinny Jeans	rgb(91, 139, 255)	hsl(222, 100%, 68%)
Blue Mana	rgb(113, 192, 237)	hsl(202, 78%, 69%)
Permafrost	rgb(155, 240, 251)	hsl(187, 92%, 80%)
Night Kite	rgb(0, 81, 109)	hsl(195, 100%, 21%)

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.

Aa6.78:1 Good#9BF0FB on #00516D
Aa6.78:1 Good#00516D on #9BF0FB
Aa4.55:1 Good#007074 on #9BF0FB
Aa4.55:1 Good#9BF0FB on #007074
Aa4.36:1 Poor#71C0ED on #00516D
Aa4.36:1 Poor#00516D on #71C0ED

Color blindness preview

CSS variables

/* Pine Scented Lagoon to Night Kite — https://swatchly.xyz/palette/007074-5b8bff-71c0ed-9bf0fb-00516d */
:root {
  --pine-scented-lagoon: #007074;
  --skinny-jeans: #5b8bff;
  --blue-mana: #71c0ed;
  --permafrost: #9bf0fb;
  --night-kite: #00516d;
}

Tailwind CSS v4

/* Pine Scented Lagoon to Night Kite — https://swatchly.xyz/palette/007074-5b8bff-71c0ed-9bf0fb-00516d */
@theme {
  --color-pine-scented-lagoon: #007074;
  --color-pine-scented-lagoon-50: #d8feff;
  --color-pine-scented-lagoon-100: #c1f5f7;
  --color-pine-scented-lagoon-200: #a2e1e4;
  --color-pine-scented-lagoon-300: #80cacd;
  --color-pine-scented-lagoon-400: #55aaae;
  --color-pine-scented-lagoon-500: #328d91;
  --color-pine-scented-lagoon-600: #007074;
  --color-pine-scented-lagoon-700: #00595c;
  --color-pine-scented-lagoon-800: #004648;
  --color-pine-scented-lagoon-900: #003638;
  --color-pine-scented-lagoon-950: #002223;
  --color-skinny-jeans: #5b8bff;
  --color-skinny-jeans-50: #f4f7ff;
  --color-skinny-jeans-100: #e8f0ff;
  --color-skinny-jeans-200: #cfdeff;
  --color-skinny-jeans-300: #b0c9ff;
  --color-skinny-jeans-400: #83a9ff;
  --color-skinny-jeans-500: #5b8bff;
  --color-skinny-jeans-600: #406ddd;
  --color-skinny-jeans-700: #2c53bb;
  --color-skinny-jeans-800: #1d3e9a;
  --color-skinny-jeans-900: #122d7c;
  --color-skinny-jeans-950: #071a52;
  --color-blue-mana: #71c0ed;
  --color-blue-mana-50: #dff3ff;
  --color-blue-mana-100: #c6e9ff;
  --color-blue-mana-200: #9ad7fb;
  --color-blue-mana-300: #71c0ed;
  --color-blue-mana-400: #55a2cd;
  --color-blue-mana-500: #3788b3;
  --color-blue-mana-600: #1b6f97;
  --color-blue-mana-700: #02597d;
  --color-blue-mana-800: #004765;
  --color-blue-mana-900: #003850;
  --color-blue-mana-950: #002334;
  --color-permafrost: #9bf0fb;
  --color-permafrost-50: #f1fdff;
  --color-permafrost-100: #d5faff;
  --color-permafrost-200: #9bf0fb;
  --color-permafrost-300: #91d5de;
  --color-permafrost-400: #66b5bf;
  --color-permafrost-500: #4298a3;
  --color-permafrost-600: #217c86;
  --color-permafrost-700: #00626c;
  --color-permafrost-800: #004c53;
  --color-permafrost-900: #003b41;
  --color-permafrost-950: #002529;
  --color-night-kite: #00516d;
  --color-night-kite-50: #eaf8ff;
  --color-night-kite-100: #d4f0ff;
  --color-night-kite-200: #afe0f8;
  --color-night-kite-300: #94cbe7;
  --color-night-kite-400: #70aecc;
  --color-night-kite-500: #5294b2;
  --color-night-kite-600: #387a97;
  --color-night-kite-700: #24637f;
  --color-night-kite-800: #00516d;
  --color-night-kite-900: #093e53;
  --color-night-kite-950: #022837;
}