Salty Ice to Elite Teal color palette

C2E7FFSalty Ice 81A7F7Fennel Flower 1CA1E4Homeworld 126AC1Matt Blue 004D51Nocturnal Expedition 00312FElite Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Salty Ice to Elite Teal is a 6-color cool, gradient palette: #C2E7FF (Salty Ice), #81A7F7 (Fennel Flower), #1CA1E4 (Homeworld), #126AC1 (Matt Blue), #004D51 (Nocturnal Expedition), #00312F (Elite Teal). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #C2E7FF on #00312F with a contrast ratio of 10.92:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Salty Ice	rgb(194, 231, 255)	hsl(204, 100%, 88%)
Fennel Flower	rgb(129, 167, 247)	hsl(221, 88%, 74%)
Homeworld	rgb(28, 161, 228)	hsl(200, 79%, 50%)
Matt Blue	rgb(18, 106, 193)	hsl(210, 83%, 41%)
Nocturnal Expedition	rgb(0, 77, 81)	hsl(183, 100%, 16%)
Elite Teal	rgb(0, 49, 47)	hsl(178, 100%, 10%)

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.

Aa10.92:1 Very good#C2E7FF on #00312F
Aa10.92:1 Very good#00312F on #C2E7FF
Aa7.42:1 Very good#C2E7FF on #004D51
Aa7.42:1 Very good#004D51 on #C2E7FF
Aa5.95:1 Good#81A7F7 on #00312F
Aa5.95:1 Good#00312F on #81A7F7
Aa4.91:1 Good#1CA1E4 on #00312F
Aa4.91:1 Good#00312F on #1CA1E4

Color blindness preview

CSS variables

/* Salty Ice to Elite Teal — https://swatchly.xyz/palette/c2e7ff-81a7f7-1ca1e4-126ac1-004d51-00312f */
:root {
  --salty-ice: #c2e7ff;
  --fennel-flower: #81a7f7;
  --homeworld: #1ca1e4;
  --matt-blue: #126ac1;
  --nocturnal-expedition: #004d51;
  --elite-teal: #00312f;
}

Tailwind CSS v4

/* Salty Ice to Elite Teal — https://swatchly.xyz/palette/c2e7ff-81a7f7-1ca1e4-126ac1-004d51-00312f */
@theme {
  --color-salty-ice: #c2e7ff;
  --color-salty-ice-50: #f8fcff;
  --color-salty-ice-100: #e8f6ff;
  --color-salty-ice-200: #c2e7ff;
  --color-salty-ice-300: #b0cee1;
  --color-salty-ice-400: #8badc2;
  --color-salty-ice-500: #6d90a6;
  --color-salty-ice-600: #527388;
  --color-salty-ice-700: #3d5b6e;
  --color-salty-ice-800: #2c4656;
  --color-salty-ice-900: #1f3644;
  --color-salty-ice-950: #11212b;
  --color-fennel-flower: #81a7f7;
  --color-fennel-flower-50: #f4f8ff;
  --color-fennel-flower-100: #e7efff;
  --color-fennel-flower-200: #ccddff;
  --color-fennel-flower-300: #acc7ff;
  --color-fennel-flower-400: #81a7f7;
  --color-fennel-flower-500: #668ad7;
  --color-fennel-flower-600: #4b6db8;
  --color-fennel-flower-700: #375599;
  --color-fennel-flower-800: #27417c;
  --color-fennel-flower-900: #1b3163;
  --color-fennel-flower-950: #0d1d40;
  --color-homeworld: #1ca1e4;
  --color-homeworld-50: #e4f4ff;
  --color-homeworld-100: #cceaff;
  --color-homeworld-200: #9ed8ff;
  --color-homeworld-300: #5fc2ff;
  --color-homeworld-400: #1ca1e4;
  --color-homeworld-500: #0086c2;
  --color-homeworld-600: #006c9e;
  --color-homeworld-700: #00567f;
  --color-homeworld-800: #004465;
  --color-homeworld-900: #003551;
  --color-homeworld-950: #002236;
  --color-matt-blue: #126ac1;
  --color-matt-blue-50: #eff6ff;
  --color-matt-blue-100: #deedff;
  --color-matt-blue-200: #bcdaff;
  --color-matt-blue-300: #93c4ff;
  --color-matt-blue-400: #57a3fb;
  --color-matt-blue-500: #3686df;
  --color-matt-blue-600: #126ac1;
  --color-matt-blue-700: #00539f;
  --color-matt-blue-800: #00417e;
  --color-matt-blue-900: #003263;
  --color-matt-blue-950: #001e41;
  --color-nocturnal-expedition: #004d51;
  --color-nocturnal-expedition-50: #dbfdff;
  --color-nocturnal-expedition-100: #cdf4f6;
  --color-nocturnal-expedition-200: #b3e2e4;
  --color-nocturnal-expedition-300: #97ccd0;
  --color-nocturnal-expedition-400: #72aeb2;
  --color-nocturnal-expedition-500: #549396;
  --color-nocturnal-expedition-600: #3a777b;
  --color-nocturnal-expedition-700: #256063;
  --color-nocturnal-expedition-800: #004d51;
  --color-nocturnal-expedition-900: #0c3b3d;
  --color-nocturnal-expedition-950: #042527;
  --color-elite-teal: #00312f;
  --color-elite-teal-50: #e2fbf9;
  --color-elite-teal-100: #d5f2f0;
  --color-elite-teal-200: #bde0dd;
  --color-elite-teal-300: #a3cac7;
  --color-elite-teal-400: #7ea9a6;
  --color-elite-teal-500: #608c89;
  --color-elite-teal-600: #456f6d;
  --color-elite-teal-700: #305654;
  --color-elite-teal-800: #20413f;
  --color-elite-teal-900: #00312f;
  --color-elite-teal-950: #0a1c1b;
}