Seafarer to Treasury Color Palette

About this palette

Seafarer to Treasury is a 5-color warm, vintage palette: #004B6A (Seafarer), #E577CA (Pink Orchid), #0077A6 (Jacuzzi), #1B1900 (Noir Mystique), #D9D497 (Treasury). It mixes blue, pink, brown, yellow tones and feels warm overall. The strongest text pairing is #1B1900 on #D9D497 with a contrast ratio of 11.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seafarer	rgb(0, 75, 106)	hsl(198, 100%, 21%)
Pink Orchid	rgb(229, 119, 202)	hsl(315, 68%, 68%)
Jacuzzi	rgb(0, 119, 166)	hsl(197, 100%, 33%)
Noir Mystique	rgb(27, 25, 0)	hsl(56, 100%, 5%)
Treasury	rgb(217, 212, 151)	hsl(55, 46%, 72%)

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.

Aa11.65:1 Very good#1B1900 on #D9D497
Aa11.65:1 Very good#D9D497 on #1B1900
Aa6.60:1 Good#E577CA on #1B1900
Aa6.60:1 Good#1B1900 on #E577CA
Aa6.24:1 Good#004B6A on #D9D497
Aa6.24:1 Good#D9D497 on #004B6A
Aa3.53:1 Poor#0077A6 on #1B1900
Aa3.53:1 Poor#1B1900 on #0077A6

Color blindness preview

CSS variables

/* Seafarer to Treasury — https://swatchly.xyz/palette/004b6a-e577ca-0077a6-1b1900-d9d497 */
:root {
  --seafarer: #004b6a;
  --pink-orchid: #e577ca;
  --jacuzzi: #0077a6;
  --noir-mystique: #1b1900;
  --treasury: #d9d497;
}

Tailwind CSS v4

/* Seafarer to Treasury — https://swatchly.xyz/palette/004b6a-e577ca-0077a6-1b1900-d9d497 */
@theme {
  --color-seafarer: #004b6a;
  --color-seafarer-50: #ebf7ff;
  --color-seafarer-100: #d6f0ff;
  --color-seafarer-200: #b1dffa;
  --color-seafarer-300: #95c9e8;
  --color-seafarer-400: #70abcd;
  --color-seafarer-500: #5290b2;
  --color-seafarer-600: #387596;
  --color-seafarer-700: #245e7c;
  --color-seafarer-800: #004b6a;
  --color-seafarer-900: #0b3950;
  --color-seafarer-950: #032434;
  --color-pink-orchid: #e577ca;
  --color-pink-orchid-50: #fff2fb;
  --color-pink-orchid-100: #ffe4f6;
  --color-pink-orchid-200: #ffc5ee;
  --color-pink-orchid-300: #fe9fe4;
  --color-pink-orchid-400: #e577ca;
  --color-pink-orchid-500: #c65bac;
  --color-pink-orchid-600: #a63f90;
  --color-pink-orchid-700: #892975;
  --color-pink-orchid-800: #6f195e;
  --color-pink-orchid-900: #570e49;
  --color-pink-orchid-950: #39052f;
  --color-jacuzzi: #0077a6;
  --color-jacuzzi-50: #ebf7ff;
  --color-jacuzzi-100: #d7f0ff;
  --color-jacuzzi-200: #ade0ff;
  --color-jacuzzi-300: #81cdf8;
  --color-jacuzzi-400: #56aedd;
  --color-jacuzzi-500: #3292c2;
  --color-jacuzzi-600: #0077a6;
  --color-jacuzzi-700: #005e85;
  --color-jacuzzi-800: #004a69;
  --color-jacuzzi-900: #003952;
  --color-jacuzzi-950: #002335;
  --color-noir-mystique: #1b1900;
  --color-noir-mystique-50: #f7f6e4;
  --color-noir-mystique-100: #ededd8;
  --color-noir-mystique-200: #dad9c1;
  --color-noir-mystique-300: #c4c3a7;
  --color-noir-mystique-400: #a5a485;
  --color-noir-mystique-500: #888768;
  --color-noir-mystique-600: #6c6b4d;
  --color-noir-mystique-700: #545338;
  --color-noir-mystique-800: #3f3e28;
  --color-noir-mystique-900: #2e2d1b;
  --color-noir-mystique-950: #1b1900;
  --color-treasury: #d9d497;
  --color-treasury-50: #f5f3cf;
  --color-treasury-100: #ebe8c0;
  --color-treasury-200: #d9d497;
  --color-treasury-300: #c2be8a;
  --color-treasury-400: #a5a067;
  --color-treasury-500: #8b864b;
  --color-treasury-600: #716c33;
  --color-treasury-700: #5b5621;
  --color-treasury-800: #484414;
  --color-treasury-900: #38340a;
  --color-treasury-950: #232003;
}