Start generating

Sunken Harbour to Peach Fuzz color palette

003E4ASunken Harbour5D4F00Ayahuasca Vine876800Muddy Brown7B86EBOrchidFF7F78Salmon SashimiFFC3BEPeach Fuzz
Open in generator Export PNG, PDF, ASE…

About this palette

Sunken Harbour to Peach Fuzz is a 6-color warm palette: #003E4A (Sunken Harbour), #5D4F00 (Ayahuasca Vine), #876800 (Muddy Brown), #7B86EB (Orchid), #FF7F78 (Salmon Sashimi), #FFC3BE (Peach Fuzz). It mixes blue, brown, purple, red, pink tones and feels warm overall. The strongest text pairing is #003E4A on #FFC3BE with a contrast ratio of 7.72:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sunken Harbourrgb(0, 62, 74)hsl(190, 100%, 15%)
Ayahuasca Vinergb(93, 79, 0)hsl(51, 100%, 18%)
Muddy Brownrgb(135, 104, 0)hsl(46, 100%, 26%)
Orchidrgb(123, 134, 235)hsl(234, 74%, 70%)
Salmon Sashimirgb(255, 127, 120)hsl(3, 100%, 74%)
Peach Fuzzrgb(255, 195, 190)hsl(5, 100%, 87%)

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.72:1 Very good#003E4A on #FFC3BE
  • Aa7.72:1 Very good#FFC3BE on #003E4A
  • Aa5.34:1 Good#5D4F00 on #FFC3BE
  • Aa5.34:1 Good#FFC3BE on #5D4F00
  • Aa4.79:1 Good#003E4A on #FF7F78
  • Aa4.79:1 Good#FF7F78 on #003E4A
  • Aa3.61:1 Poor#003E4A on #7B86EB
  • Aa3.61:1 Poor#7B86EB on #003E4A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sunken Harbour to Peach Fuzz — https://swatchly.xyz/palette/003e4a-5d4f00-876800-7b86eb-ff7f78-ffc3be */
:root {
  --sunken-harbour: #003e4a;
  --ayahuasca-vine: #5d4f00;
  --muddy-brown: #876800;
  --orchid: #7b86eb;
  --salmon-sashimi: #ff7f78;
  --peach-fuzz: #ffc3be;
}

Tailwind CSS v4

/* Sunken Harbour to Peach Fuzz — https://swatchly.xyz/palette/003e4a-5d4f00-876800-7b86eb-ff7f78-ffc3be */
@theme {
  --color-sunken-harbour: #003e4a;
  --color-sunken-harbour-50: #e5f9ff;
  --color-sunken-harbour-100: #d1f2fb;
  --color-sunken-harbour-200: #b8dfea;
  --color-sunken-harbour-300: #9ccad6;
  --color-sunken-harbour-400: #79acb9;
  --color-sunken-harbour-500: #5d919e;
  --color-sunken-harbour-600: #437784;
  --color-sunken-harbour-700: #30606c;
  --color-sunken-harbour-800: #214d57;
  --color-sunken-harbour-900: #003e4a;
  --color-sunken-harbour-950: #0a262d;
  --color-ayahuasca-vine: #5d4f00;
  --color-ayahuasca-vine-50: #fef6d1;
  --color-ayahuasca-vine-100: #f5ecc3;
  --color-ayahuasca-vine-200: #e2d7a6;
  --color-ayahuasca-vine-300: #ccbf86;
  --color-ayahuasca-vine-400: #ad9f5f;
  --color-ayahuasca-vine-500: #918240;
  --color-ayahuasca-vine-600: #746725;
  --color-ayahuasca-vine-700: #5d4f00;
  --color-ayahuasca-vine-800: #483d04;
  --color-ayahuasca-vine-900: #382f00;
  --color-ayahuasca-vine-950: #231d00;
  --color-muddy-brown: #876800;
  --color-muddy-brown-50: #fff4db;
  --color-muddy-brown-100: #feeab8;
  --color-muddy-brown-200: #eed69a;
  --color-muddy-brown-300: #dabe7a;
  --color-muddy-brown-400: #bd9e50;
  --color-muddy-brown-500: #a2832d;
  --color-muddy-brown-600: #876800;
  --color-muddy-brown-700: #6b5200;
  --color-muddy-brown-800: #544000;
  --color-muddy-brown-900: #413100;
  --color-muddy-brown-950: #291e00;
  --color-orchid: #7b86eb;
  --color-orchid-50: #f5f7ff;
  --color-orchid-100: #ebeeff;
  --color-orchid-200: #d4dbff;
  --color-orchid-300: #bac5ff;
  --color-orchid-400: #96a2ff;
  --color-orchid-500: #7b86eb;
  --color-orchid-600: #6069ca;
  --color-orchid-700: #4a50aa;
  --color-orchid-800: #383c8b;
  --color-orchid-900: #292c6f;
  --color-orchid-950: #181949;
  --color-salmon-sashimi: #ff7f78;
  --color-salmon-sashimi-50: #fff6f5;
  --color-salmon-sashimi-100: #ffebe9;
  --color-salmon-sashimi-200: #ffd2cd;
  --color-salmon-sashimi-300: #ffb3ac;
  --color-salmon-sashimi-400: #ff7f78;
  --color-salmon-sashimi-500: #dd615c;
  --color-salmon-sashimi-600: #bc4341;
  --color-salmon-sashimi-700: #9c2c2c;
  --color-salmon-sashimi-800: #7e1a1d;
  --color-salmon-sashimi-900: #630d12;
  --color-salmon-sashimi-950: #400407;
  --color-peach-fuzz: #ffc3be;
  --color-peach-fuzz-50: #ffeeed;
  --color-peach-fuzz-100: #ffe0dd;
  --color-peach-fuzz-200: #ffc3be;
  --color-peach-fuzz-300: #e3b0ab;
  --color-peach-fuzz-400: #c68f8b;
  --color-peach-fuzz-500: #ab7470;
  --color-peach-fuzz-600: #8e5b57;
  --color-peach-fuzz-700: #744643;
  --color-peach-fuzz-800: #5e3633;
  --color-peach-fuzz-900: #4a2826;
  --color-peach-fuzz-950: #301716;
}

Similar palettes