Wondrous Wisteria to Teal With It color palette

9FB0EDWondrous Wisteria DDDA85Garlic Toast 003F51Maniac Mansion C0745DHimalayan Salt 00677BTeal With It

Open in generator Export PNG, PDF, ASE…

About this palette

Wondrous Wisteria to Teal With It is a 5-color cool, vintage palette: #9FB0ED (Wondrous Wisteria), #DDDA85 (Garlic Toast), #003F51 (Maniac Mansion), #C0745D (Himalayan Salt), #00677B (Teal With It). It mixes blue, yellow, red tones and feels cool overall. The strongest text pairing is #DDDA85 on #003F51 with a contrast ratio of 7.89:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wondrous Wisteria	rgb(159, 176, 237)	hsl(227, 68%, 78%)
Garlic Toast	rgb(221, 218, 133)	hsl(58, 56%, 69%)
Maniac Mansion	rgb(0, 63, 81)	hsl(193, 100%, 16%)
Himalayan Salt	rgb(192, 116, 93)	hsl(14, 44%, 56%)
Teal With It	rgb(0, 103, 123)	hsl(190, 100%, 24%)

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.89:1 Very good#DDDA85 on #003F51
Aa7.89:1 Very good#003F51 on #DDDA85
Aa5.41:1 Good#9FB0ED on #003F51
Aa5.41:1 Good#003F51 on #9FB0ED
Aa4.48:1 Poor#DDDA85 on #00677B
Aa4.48:1 Poor#00677B on #DDDA85
Aa3.22:1 Poor#003F51 on #C0745D
Aa3.22:1 Poor#C0745D on #003F51

Color blindness preview

CSS variables

/* Wondrous Wisteria to Teal With It — https://swatchly.xyz/palette/9fb0ed-ddda85-003f51-c0745d-00677b */
:root {
  --wondrous-wisteria: #9fb0ed;
  --garlic-toast: #ddda85;
  --maniac-mansion: #003f51;
  --himalayan-salt: #c0745d;
  --teal-with-it: #00677b;
}

Tailwind CSS v4

/* Wondrous Wisteria to Teal With It — https://swatchly.xyz/palette/9fb0ed-ddda85-003f51-c0745d-00677b */
@theme {
  --color-wondrous-wisteria: #9fb0ed;
  --color-wondrous-wisteria-50: #e8edff;
  --color-wondrous-wisteria-100: #d7e1ff;
  --color-wondrous-wisteria-200: #bbcafc;
  --color-wondrous-wisteria-300: #9fb0ed;
  --color-wondrous-wisteria-400: #8393cd;
  --color-wondrous-wisteria-500: #6b7ab3;
  --color-wondrous-wisteria-600: #546298;
  --color-wondrous-wisteria-700: #424e7e;
  --color-wondrous-wisteria-800: #333d68;
  --color-wondrous-wisteria-900: #273055;
  --color-wondrous-wisteria-950: #171d37;
  --color-garlic-toast: #ddda85;
  --color-garlic-toast-50: #f8f7c8;
  --color-garlic-toast-100: #eeedb8;
  --color-garlic-toast-200: #ddda85;
  --color-garlic-toast-300: #c6c37c;
  --color-garlic-toast-400: #a7a454;
  --color-garlic-toast-500: #8d8934;
  --color-garlic-toast-600: #736e15;
  --color-garlic-toast-700: #5c5800;
  --color-garlic-toast-800: #484500;
  --color-garlic-toast-900: #373500;
  --color-garlic-toast-950: #222100;
  --color-maniac-mansion: #003f51;
  --color-maniac-mansion-50: #e8f8ff;
  --color-maniac-mansion-100: #d0f2ff;
  --color-maniac-mansion-200: #b7dfef;
  --color-maniac-mansion-300: #9bc9dc;
  --color-maniac-mansion-400: #78abbf;
  --color-maniac-mansion-500: #5c91a5;
  --color-maniac-mansion-600: #43778b;
  --color-maniac-mansion-700: #2f6172;
  --color-maniac-mansion-800: #214e5d;
  --color-maniac-mansion-900: #003f51;
  --color-maniac-mansion-950: #0a2832;
  --color-himalayan-salt: #c0745d;
  --color-himalayan-salt-50: #fff3ef;
  --color-himalayan-salt-100: #ffe7e0;
  --color-himalayan-salt-200: #ffcdbe;
  --color-himalayan-salt-300: #f6b19d;
  --color-himalayan-salt-400: #db9079;
  --color-himalayan-salt-500: #c0745d;
  --color-himalayan-salt-600: #a15943;
  --color-himalayan-salt-700: #85432f;
  --color-himalayan-salt-800: #6b3120;
  --color-himalayan-salt-900: #542415;
  --color-himalayan-salt-950: #371409;
  --color-teal-with-it: #00677b;
  --color-teal-with-it-50: #e6f9ff;
  --color-teal-with-it-100: #cbf3ff;
  --color-teal-with-it-200: #abe4f4;
  --color-teal-with-it-300: #8dcfe2;
  --color-teal-with-it-400: #66b2c6;
  --color-teal-with-it-500: #4698ac;
  --color-teal-with-it-600: #297d92;
  --color-teal-with-it-700: #00677b;
  --color-teal-with-it-800: #005161;
  --color-teal-with-it-900: #003e4b;
  --color-teal-with-it-950: #002730;
}