Sunken Harbour to Sun-Kissed Beach color palette

194049Sunken Harbour 2C6974Ocean’s Embrace B18172Dusty Duchess ACD3E1Clear Water DDADA2Sun-Kissed Beach

Open in generator Export PNG, PDF, ASE…

About this palette

Sunken Harbour to Sun-Kissed Beach is a 5-color muted, cool, vintage palette: #194049 (Sunken Harbour), #2C6974 (Ocean’s Embrace), #B18172 (Dusty Duchess), #ACD3E1 (Clear Water), #DDADA2 (Sun-Kissed Beach). It mixes blue, turquoise, red, pink tones and feels cool overall. The strongest text pairing is #194049 on #ACD3E1 with a contrast ratio of 7.03:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunken Harbour	rgb(25, 64, 73)	hsl(191, 49%, 19%)
Ocean’s Embrace	rgb(44, 105, 116)	hsl(189, 45%, 31%)
Dusty Duchess	rgb(177, 129, 114)	hsl(14, 29%, 57%)
Clear Water	rgb(172, 211, 225)	hsl(196, 47%, 78%)
Sun-Kissed Beach	rgb(221, 173, 162)	hsl(11, 46%, 75%)

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.

Aa7.03:1 Very good#194049 on #ACD3E1
Aa7.03:1 Very good#ACD3E1 on #194049
Aa5.65:1 Good#194049 on #DDADA2
Aa5.65:1 Good#DDADA2 on #194049
Aa3.89:1 Poor#2C6974 on #ACD3E1
Aa3.89:1 Poor#ACD3E1 on #2C6974
Aa3.34:1 Poor#194049 on #B18172
Aa3.34:1 Poor#B18172 on #194049

Color blindness preview

CSS variables

/* Sunken Harbour to Sun-Kissed Beach — https://swatchly.xyz/palette/194049-2c6974-b18172-acd3e1-ddada2 */
:root {
  --sunken-harbour: #194049;
  --ocean-s-embrace: #2c6974;
  --dusty-duchess: #b18172;
  --clear-water: #acd3e1;
  --sun-kissed-beach: #ddada2;
}

Tailwind CSS v4

/* Sunken Harbour to Sun-Kissed Beach — https://swatchly.xyz/palette/194049-2c6974-b18172-acd3e1-ddada2 */
@theme {
  --color-sunken-harbour: #194049;
  --color-sunken-harbour-50: #e5faff;
  --color-sunken-harbour-100: #d7f1f7;
  --color-sunken-harbour-200: #bfdee6;
  --color-sunken-harbour-300: #a5c8d1;
  --color-sunken-harbour-400: #84aab4;
  --color-sunken-harbour-500: #69909b;
  --color-sunken-harbour-600: #507781;
  --color-sunken-harbour-700: #3d616a;
  --color-sunken-harbour-800: #2e4e56;
  --color-sunken-harbour-900: #194049;
  --color-sunken-harbour-950: #13282e;
  --color-ocean-s-embrace: #2c6974;
  --color-ocean-s-embrace-50: #e3faff;
  --color-ocean-s-embrace-100: #cef3fb;
  --color-ocean-s-embrace-200: #b6e2eb;
  --color-ocean-s-embrace-300: #9ccfd9;
  --color-ocean-s-embrace-400: #79b2bd;
  --color-ocean-s-embrace-500: #5d98a4;
  --color-ocean-s-embrace-600: #437f8a;
  --color-ocean-s-embrace-700: #2c6974;
  --color-ocean-s-embrace-800: #1e535c;
  --color-ocean-s-embrace-900: #114048;
  --color-ocean-s-embrace-950: #06282e;
  --color-dusty-duchess: #b18172;
  --color-dusty-duchess-50: #fff4f0;
  --color-dusty-duchess-100: #ffe9e2;
  --color-dusty-duchess-200: #f8d2c6;
  --color-dusty-duchess-300: #e6bbae;
  --color-dusty-duchess-400: #cb9c8d;
  --color-dusty-duchess-500: #b18172;
  --color-dusty-duchess-600: #936557;
  --color-dusty-duchess-700: #784e41;
  --color-dusty-duchess-800: #5f3b30;
  --color-dusty-duchess-900: #4b2c23;
  --color-dusty-duchess-950: #301a13;
  --color-clear-water: #acd3e1;
  --color-clear-water-50: #f5fcff;
  --color-clear-water-100: #e1f7ff;
  --color-clear-water-200: #cbe6f0;
  --color-clear-water-300: #acd3e1;
  --color-clear-water-400: #8db1bd;
  --color-clear-water-500: #6f94a1;
  --color-clear-water-600: #537784;
  --color-clear-water-700: #3d5e69;
  --color-clear-water-800: #2c4953;
  --color-clear-water-900: #1e373f;
  --color-clear-water-950: #102228;
  --color-sun-kissed-beach: #ddada2;
  --color-sun-kissed-beach-50: #ffede9;
  --color-sun-kissed-beach-100: #ffded6;
  --color-sun-kissed-beach-200: #eec8bf;
  --color-sun-kissed-beach-300: #ddada2;
  --color-sun-kissed-beach-400: #bd9085;
  --color-sun-kissed-beach-500: #a2756b;
  --color-sun-kissed-beach-600: #875d53;
  --color-sun-kissed-beach-700: #6e4840;
  --color-sun-kissed-beach-800: #593830;
  --color-sun-kissed-beach-900: #462a24;
  --color-sun-kissed-beach-950: #2d1915;
}