Fennel Flower to Pine Scented Lagoon color palette

63A9FFFennel Flower 00A6CAGummy Dolphins 006CECEpic Blue 5FF1E3Poseidon Jr.004C5DNocturnal Expedition 006E6CPine Scented Lagoon

Open in generator Export PNG, PDF, ASE…

About this palette

Fennel Flower to Pine Scented Lagoon is a 6-color cool palette: #63A9FF (Fennel Flower), #00A6CA (Gummy Dolphins), #006CEC (Epic Blue), #5FF1E3 (Poseidon Jr.), #004C5D (Nocturnal Expedition), #006E6C (Pine Scented Lagoon). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #5FF1E3 on #004C5D with a contrast ratio of 6.92:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fennel Flower	rgb(99, 169, 255)	hsl(213, 100%, 69%)
Gummy Dolphins	rgb(0, 166, 202)	hsl(191, 100%, 40%)
Epic Blue	rgb(0, 108, 236)	hsl(213, 100%, 46%)
Poseidon Jr.	rgb(95, 241, 227)	hsl(174, 84%, 66%)
Nocturnal Expedition	rgb(0, 76, 93)	hsl(191, 100%, 18%)
Pine Scented Lagoon	rgb(0, 110, 108)	hsl(179, 100%, 22%)

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.92:1 Good#5FF1E3 on #004C5D
Aa6.92:1 Good#004C5D on #5FF1E3
Aa4.40:1 Poor#5FF1E3 on #006E6C
Aa4.40:1 Poor#006E6C on #5FF1E3
Aa3.95:1 Poor#63A9FF on #004C5D
Aa3.95:1 Poor#004C5D on #63A9FF
Aa3.48:1 Poor#006CEC on #5FF1E3
Aa3.48:1 Poor#5FF1E3 on #006CEC

Color blindness preview

CSS variables

/* Fennel Flower to Pine Scented Lagoon — https://swatchly.xyz/palette/63a9ff-00a6ca-006cec-5ff1e3-004c5d-006e6c */
:root {
  --fennel-flower: #63a9ff;
  --gummy-dolphins: #00a6ca;
  --epic-blue: #006cec;
  --poseidon-jr: #5ff1e3;
  --nocturnal-expedition: #004c5d;
  --pine-scented-lagoon: #006e6c;
}

Tailwind CSS v4

/* Fennel Flower to Pine Scented Lagoon — https://swatchly.xyz/palette/63a9ff-00a6ca-006cec-5ff1e3-004c5d-006e6c */
@theme {
  --color-fennel-flower: #63a9ff;
  --color-fennel-flower-50: #f2f8ff;
  --color-fennel-flower-100: #e3efff;
  --color-fennel-flower-200: #c3deff;
  --color-fennel-flower-300: #9dc9ff;
  --color-fennel-flower-400: #63a9ff;
  --color-fennel-flower-500: #478cdf;
  --color-fennel-flower-600: #2a6fbf;
  --color-fennel-flower-700: #1357a0;
  --color-fennel-flower-800: #034383;
  --color-fennel-flower-900: #003267;
  --color-fennel-flower-950: #001e43;
  --color-gummy-dolphins: #00a6ca;
  --color-gummy-dolphins-50: #dcf6ff;
  --color-gummy-dolphins-100: #bdeeff;
  --color-gummy-dolphins-200: #82defb;
  --color-gummy-dolphins-300: #59c7e8;
  --color-gummy-dolphins-400: #00a6ca;
  --color-gummy-dolphins-500: #008aa9;
  --color-gummy-dolphins-600: #007089;
  --color-gummy-dolphins-700: #00596e;
  --color-gummy-dolphins-800: #004758;
  --color-gummy-dolphins-900: #003845;
  --color-gummy-dolphins-950: #00242e;
  --color-epic-blue: #006cec;
  --color-epic-blue-50: #eff6ff;
  --color-epic-blue-100: #e2eeff;
  --color-epic-blue-200: #c5dcff;
  --color-epic-blue-300: #a3c8ff;
  --color-epic-blue-400: #6ea8ff;
  --color-epic-blue-500: #398aff;
  --color-epic-blue-600: #006cec;
  --color-epic-blue-700: #0055be;
  --color-epic-blue-800: #004296;
  --color-epic-blue-900: #003276;
  --color-epic-blue-950: #001e4e;
  --color-poseidon-jr: #5ff1e3;
  --color-poseidon-jr-50: #d3fff9;
  --color-poseidon-jr-100: #acfcf2;
  --color-poseidon-jr-200: #5ff1e3;
  --color-poseidon-jr-300: #60d7cb;
  --color-poseidon-jr-400: #15b9ac;
  --color-poseidon-jr-500: #009a90;
  --color-poseidon-jr-600: #007c74;
  --color-poseidon-jr-700: #00635c;
  --color-poseidon-jr-800: #004e48;
  --color-poseidon-jr-900: #003c37;
  --color-poseidon-jr-950: #002622;
  --color-nocturnal-expedition: #004c5d;
  --color-nocturnal-expedition-50: #e6f9ff;
  --color-nocturnal-expedition-100: #cdf3ff;
  --color-nocturnal-expedition-200: #b2e0ef;
  --color-nocturnal-expedition-300: #96cbdc;
  --color-nocturnal-expedition-400: #71acbf;
  --color-nocturnal-expedition-500: #5391a4;
  --color-nocturnal-expedition-600: #397688;
  --color-nocturnal-expedition-700: #255f6f;
  --color-nocturnal-expedition-800: #004c5d;
  --color-nocturnal-expedition-900: #0b3a46;
  --color-nocturnal-expedition-950: #04242d;
  --color-pine-scented-lagoon: #006e6c;
  --color-pine-scented-lagoon-50: #d5fffd;
  --color-pine-scented-lagoon-100: #c4f7f4;
  --color-pine-scented-lagoon-200: #abe7e4;
  --color-pine-scented-lagoon-300: #8ed4d1;
  --color-pine-scented-lagoon-400: #67b7b4;
  --color-pine-scented-lagoon-500: #479e9b;
  --color-pine-scented-lagoon-600: #2a8482;
  --color-pine-scented-lagoon-700: #006e6c;
  --color-pine-scented-lagoon-800: #005655;
  --color-pine-scented-lagoon-900: #004341;
  --color-pine-scented-lagoon-950: #002a29;
}