Sea Paint to Girlie Color Palette

About this palette

Sea Paint to Girlie is a 5-color warm, vintage palette: #004E71 (Sea Paint), #006C9D (Hydra), #AE8100 (Arrowwood), #D78874 (Island Coral), #FFD3CE (Girlie). It mixes blue, yellow, red, pink tones and feels warm overall. The strongest text pairing is #004E71 on #FFD3CE with a contrast ratio of 6.64:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Paint	rgb(0, 78, 113)	hsl(199, 100%, 22%)
Hydra	rgb(0, 108, 157)	hsl(199, 100%, 31%)
Arrowwood	rgb(174, 129, 0)	hsl(44, 100%, 34%)
Island Coral	rgb(215, 136, 116)	hsl(12, 55%, 65%)
Girlie	rgb(255, 211, 206)	hsl(6, 100%, 90%)

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.64:1 Good#004E71 on #FFD3CE
Aa6.64:1 Good#FFD3CE on #004E71
Aa4.26:1 Poor#006C9D on #FFD3CE
Aa4.26:1 Poor#FFD3CE on #006C9D
Aa3.29:1 Poor#004E71 on #D78874
Aa3.29:1 Poor#D78874 on #004E71

Color blindness preview

CSS variables

/* Sea Paint to Girlie — https://swatchly.xyz/palette/004e71-006c9d-ae8100-d78874-ffd3ce */
:root {
  --sea-paint: #004e71;
  --hydra: #006c9d;
  --arrowwood: #ae8100;
  --island-coral: #d78874;
  --girlie: #ffd3ce;
}

Tailwind CSS v4

/* Sea Paint to Girlie — https://swatchly.xyz/palette/004e71-006c9d-ae8100-d78874-ffd3ce */
@theme {
  --color-sea-paint: #004e71;
  --color-sea-paint-50: #ebf7ff;
  --color-sea-paint-100: #d7efff;
  --color-sea-paint-200: #afdffd;
  --color-sea-paint-300: #94caed;
  --color-sea-paint-400: #6facd2;
  --color-sea-paint-500: #5291b8;
  --color-sea-paint-600: #38779c;
  --color-sea-paint-700: #246183;
  --color-sea-paint-800: #004e71;
  --color-sea-paint-900: #093c56;
  --color-sea-paint-950: #022639;
  --color-hydra: #006c9d;
  --color-hydra-50: #ecf7ff;
  --color-hydra-100: #d5eeff;
  --color-hydra-200: #a9dcff;
  --color-hydra-300: #7fc6f5;
  --color-hydra-400: #54a6d8;
  --color-hydra-500: #3088bb;
  --color-hydra-600: #006c9d;
  --color-hydra-700: #00567e;
  --color-hydra-800: #004363;
  --color-hydra-900: #00344e;
  --color-hydra-950: #002033;
  --color-arrowwood: #ae8100;
  --color-arrowwood-50: #fff5e0;
  --color-arrowwood-100: #ffeac1;
  --color-arrowwood-200: #f7d490;
  --color-arrowwood-300: #e5bd6d;
  --color-arrowwood-400: #c99d3c;
  --color-arrowwood-500: #ae8100;
  --color-arrowwood-600: #8c6700;
  --color-arrowwood-700: #705200;
  --color-arrowwood-800: #583f00;
  --color-arrowwood-900: #443000;
  --color-arrowwood-950: #2b1d00;
  --color-island-coral: #d78874;
  --color-island-coral-50: #fff1ed;
  --color-island-coral-100: #ffe3dc;
  --color-island-coral-200: #ffc7b9;
  --color-island-coral-300: #f2ab99;
  --color-island-coral-400: #d78874;
  --color-island-coral-500: #b96d5a;
  --color-island-coral-600: #9c5442;
  --color-island-coral-700: #803f2f;
  --color-island-coral-800: #672f21;
  --color-island-coral-900: #522216;
  --color-island-coral-950: #36130b;
  --color-girlie: #ffd3ce;
  --color-girlie-50: #fff8f8;
  --color-girlie-100: #ffedeb;
  --color-girlie-200: #ffd3ce;
  --color-girlie-300: #e1bdb9;
  --color-girlie-400: #c39b97;
  --color-girlie-500: #a67e7a;
  --color-girlie-600: #89635f;
  --color-girlie-700: #6e4c49;
  --color-girlie-800: #573a37;
  --color-girlie-900: #442b29;
  --color-girlie-950: #2c1a18;
}