Seafarer to Frozen Landscape Color Palette

About this palette

Seafarer to Frozen Landscape is a 5-color warm, vintage palette: #214E6E (Seafarer), #794E63 (Hibernation), #A4657D (Cinnapink), #B4B667 (Motherland), #B0E1FF (Frozen Landscape). It mixes blue, red, yellow tones and feels warm overall. The strongest text pairing is #214E6E on #B0E1FF with a contrast ratio of 6.33:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seafarer	rgb(33, 78, 110)	hsl(205, 54%, 28%)
Hibernation	rgb(121, 78, 99)	hsl(331, 22%, 39%)
Cinnapink	rgb(164, 101, 125)	hsl(337, 26%, 52%)
Motherland	rgb(180, 182, 103)	hsl(62, 35%, 56%)
Frozen Landscape	rgb(176, 225, 255)	hsl(203, 100%, 85%)

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.33:1 Good#214E6E on #B0E1FF
Aa6.33:1 Good#B0E1FF on #214E6E
Aa4.89:1 Good#794E63 on #B0E1FF
Aa4.89:1 Good#B0E1FF on #794E63
Aa4.13:1 Poor#214E6E on #B4B667
Aa4.13:1 Poor#B4B667 on #214E6E
Aa3.19:1 Poor#794E63 on #B4B667
Aa3.19:1 Poor#B4B667 on #794E63

Color blindness preview

CSS variables

/* Seafarer to Frozen Landscape — https://swatchly.xyz/palette/214e6e-794e63-a4657d-b4b667-b0e1ff */
:root {
  --seafarer: #214e6e;
  --hibernation: #794e63;
  --cinnapink: #a4657d;
  --motherland: #b4b667;
  --frozen-landscape: #b0e1ff;
}

Tailwind CSS v4

/* Seafarer to Frozen Landscape — https://swatchly.xyz/palette/214e6e-794e63-a4657d-b4b667-b0e1ff */
@theme {
  --color-seafarer: #214e6e;
  --color-seafarer-50: #edf7ff;
  --color-seafarer-100: #daeeff;
  --color-seafarer-200: #b9ddf9;
  --color-seafarer-300: #a0c8e8;
  --color-seafarer-400: #7eaacd;
  --color-seafarer-500: #6290b3;
  --color-seafarer-600: #4a7698;
  --color-seafarer-700: #366080;
  --color-seafarer-800: #214e6e;
  --color-seafarer-900: #1b3c54;
  --color-seafarer-950: #0e2638;
  --color-hibernation: #794e63;
  --color-hibernation-50: #fff1f7;
  --color-hibernation-100: #ffe2ef;
  --color-hibernation-200: #f2cdde;
  --color-hibernation-300: #e0b6c9;
  --color-hibernation-400: #c497ac;
  --color-hibernation-500: #aa7c92;
  --color-hibernation-600: #906379;
  --color-hibernation-700: #794e63;
  --color-hibernation-800: #603c4e;
  --color-hibernation-900: #4b2d3c;
  --color-hibernation-950: #311b26;
  --color-cinnapink: #a4657d;
  --color-cinnapink-50: #ffeef3;
  --color-cinnapink-100: #ffdce8;
  --color-cinnapink-200: #f7c0d3;
  --color-cinnapink-300: #e2a5bb;
  --color-cinnapink-400: #c2829a;
  --color-cinnapink-500: #a4657d;
  --color-cinnapink-600: #884e65;
  --color-cinnapink-700: #703b50;
  --color-cinnapink-800: #5a2d3f;
  --color-cinnapink-900: #482131;
  --color-cinnapink-950: #2f131f;
  --color-motherland: #b4b667;
  --color-motherland-50: #fcfed6;
  --color-motherland-100: #f5f7cb;
  --color-motherland-200: #e4e6b1;
  --color-motherland-300: #d0d395;
  --color-motherland-400: #b4b667;
  --color-motherland-500: #96974a;
  --color-motherland-600: #797a2a;
  --color-motherland-700: #606010;
  --color-motherland-800: #4a4a00;
  --color-motherland-900: #373800;
  --color-motherland-950: #212100;
  --color-frozen-landscape: #b0e1ff;
  --color-frozen-landscape-50: #edf8ff;
  --color-frozen-landscape-100: #daf1ff;
  --color-frozen-landscape-200: #b0e1ff;
  --color-frozen-landscape-300: #a0c9e2;
  --color-frozen-landscape-400: #7ca9c5;
  --color-frozen-landscape-500: #5f8ea9;
  --color-frozen-landscape-600: #45728d;
  --color-frozen-landscape-700: #315b73;
  --color-frozen-landscape-800: #22475c;
  --color-frozen-landscape-900: #173748;
  --color-frozen-landscape-950: #0b222e;
}