Munsell Blue to St. Tropaz color palette

0094AEMunsell Blue 746539Himalaya 7C9BD1Wisteria Blue FFBDAEHard Candy 003033Elite Teal 3C5174St. Tropaz

Open in generator Export PNG, PDF, ASE…

About this palette

Munsell Blue to St. Tropaz is a 6-color cool palette: #0094AE (Munsell Blue), #746539 (Himalaya), #7C9BD1 (Wisteria Blue), #FFBDAE (Hard Candy), #003033 (Elite Teal), #3C5174 (St. Tropaz). It mixes blue, brown, pink, turquoise tones and feels cool overall. The strongest text pairing is #FFBDAE on #003033 with a contrast ratio of 8.94:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Munsell Blue	rgb(0, 148, 174)	hsl(189, 100%, 34%)
Himalaya	rgb(116, 101, 57)	hsl(45, 34%, 34%)
Wisteria Blue	rgb(124, 155, 209)	hsl(218, 48%, 65%)
Hard Candy	rgb(255, 189, 174)	hsl(11, 100%, 84%)
Elite Teal	rgb(0, 48, 51)	hsl(184, 100%, 10%)
St. Tropaz	rgb(60, 81, 116)	hsl(218, 32%, 35%)

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.

Aa8.94:1 Very good#FFBDAE on #003033
Aa8.94:1 Very good#003033 on #FFBDAE
Aa5.08:1 Good#7C9BD1 on #003033
Aa5.08:1 Good#003033 on #7C9BD1
Aa5.01:1 Good#FFBDAE on #3C5174
Aa5.01:1 Good#3C5174 on #FFBDAE
Aa3.98:1 Poor#0094AE on #003033
Aa3.98:1 Poor#003033 on #0094AE

Color blindness preview

CSS variables

/* Munsell Blue to St. Tropaz — https://swatchly.xyz/palette/0094ae-746539-7c9bd1-ffbdae-003033-3c5174 */
:root {
  --munsell-blue: #0094ae;
  --himalaya: #746539;
  --wisteria-blue: #7c9bd1;
  --hard-candy: #ffbdae;
  --elite-teal: #003033;
  --st-tropaz: #3c5174;
}

Tailwind CSS v4

/* Munsell Blue to St. Tropaz — https://swatchly.xyz/palette/0094ae-746539-7c9bd1-ffbdae-003033-3c5174 */
@theme {
  --color-munsell-blue: #0094ae;
  --color-munsell-blue-50: #e4f9ff;
  --color-munsell-blue-100: #c8f3ff;
  --color-munsell-blue-200: #97e5f9;
  --color-munsell-blue-300: #73cfe6;
  --color-munsell-blue-400: #41b0ca;
  --color-munsell-blue-500: #0094ae;
  --color-munsell-blue-600: #00778d;
  --color-munsell-blue-700: #005f70;
  --color-munsell-blue-800: #004a58;
  --color-munsell-blue-900: #003945;
  --color-munsell-blue-950: #00242c;
  --color-himalaya: #746539;
  --color-himalaya-50: #fef5db;
  --color-himalaya-100: #f4eacc;
  --color-himalaya-200: #e1d5b2;
  --color-himalaya-300: #cbbd95;
  --color-himalaya-400: #ac9d70;
  --color-himalaya-500: #908054;
  --color-himalaya-600: #746539;
  --color-himalaya-700: #5d5029;
  --color-himalaya-800: #493e1c;
  --color-himalaya-900: #392f12;
  --color-himalaya-950: #241d08;
  --color-wisteria-blue: #7c9bd1;
  --color-wisteria-blue-50: #ecf3ff;
  --color-wisteria-blue-100: #dbe8ff;
  --color-wisteria-blue-200: #bad4ff;
  --color-wisteria-blue-300: #9fbced;
  --color-wisteria-blue-400: #7c9bd1;
  --color-wisteria-blue-500: #6381b5;
  --color-wisteria-blue-600: #4b6799;
  --color-wisteria-blue-700: #39527e;
  --color-wisteria-blue-800: #2a4067;
  --color-wisteria-blue-900: #1f3152;
  --color-wisteria-blue-950: #111f37;
  --color-hard-candy: #ffbdae;
  --color-hard-candy-50: #ffeae6;
  --color-hard-candy-100: #ffdbd3;
  --color-hard-candy-200: #ffbdae;
  --color-hard-candy-300: #e4aa9d;
  --color-hard-candy-400: #c88b7d;
  --color-hard-candy-500: #ad7163;
  --color-hard-candy-600: #91584c;
  --color-hard-candy-700: #774439;
  --color-hard-candy-800: #61342b;
  --color-hard-candy-900: #4c271f;
  --color-hard-candy-950: #321611;
  --color-elite-teal: #003033;
  --color-elite-teal-50: #e2fbfc;
  --color-elite-teal-100: #d5f2f3;
  --color-elite-teal-200: #bddfe1;
  --color-elite-teal-300: #a3c9cc;
  --color-elite-teal-400: #7ea9ab;
  --color-elite-teal-500: #608b8e;
  --color-elite-teal-600: #456f71;
  --color-elite-teal-700: #305558;
  --color-elite-teal-800: #204042;
  --color-elite-teal-900: #003033;
  --color-elite-teal-950: #091b1c;
  --color-st-tropaz: #3c5174;
  --color-st-tropaz-50: #f0f5ff;
  --color-st-tropaz-100: #e0ecff;
  --color-st-tropaz-200: #c5d8f7;
  --color-st-tropaz-300: #abc0e3;
  --color-st-tropaz-400: #89a0c6;
  --color-st-tropaz-500: #6d84aa;
  --color-st-tropaz-600: #53688c;
  --color-st-tropaz-700: #3c5174;
  --color-st-tropaz-800: #2e3f5a;
  --color-st-tropaz-900: #223047;
  --color-st-tropaz-950: #131d2e;
}