Start generating

Vinaigrette to Eclipse Elixir color palette

EDDAB1VinaigretteB1A8CFLucius Lilac529BB7Lake Lucerne826849Pastel Brown00587AMoroccan Blue1E1F2DEclipse Elixir
Open in generator Export PNG, PDF, ASE…

About this palette

Vinaigrette to Eclipse Elixir is a 6-color palette: #EDDAB1 (Vinaigrette), #B1A8CF (Lucius Lilac), #529BB7 (Lake Lucerne), #826849 (Pastel Brown), #00587A (Moroccan Blue), #1E1F2D (Eclipse Elixir). It mixes yellow, purple, blue, brown, gray tones and feels cool overall. The strongest text pairing is #EDDAB1 on #1E1F2D with a contrast ratio of 11.84:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Vinaigrettergb(237, 218, 177)hsl(41, 63%, 81%)
Lucius Lilacrgb(177, 168, 207)hsl(254, 29%, 74%)
Lake Lucernergb(82, 155, 183)hsl(197, 41%, 52%)
Pastel Brownrgb(130, 104, 73)hsl(33, 28%, 40%)
Moroccan Bluergb(0, 88, 122)hsl(197, 100%, 24%)
Eclipse Elixirrgb(30, 31, 45)hsl(236, 20%, 15%)

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.84:1 Very good#EDDAB1 on #1E1F2D
  • Aa11.84:1 Very good#1E1F2D on #EDDAB1
  • Aa7.27:1 Very good#B1A8CF on #1E1F2D
  • Aa7.27:1 Very good#1E1F2D on #B1A8CF
  • Aa5.70:1 Good#EDDAB1 on #00587A
  • Aa5.70:1 Good#00587A on #EDDAB1
  • Aa5.22:1 Good#529BB7 on #1E1F2D
  • Aa5.22:1 Good#1E1F2D on #529BB7

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Vinaigrette to Eclipse Elixir — https://swatchly.xyz/palette/eddab1-b1a8cf-529bb7-826849-00587a-1e1f2d */
:root {
  --vinaigrette: #eddab1;
  --lucius-lilac: #b1a8cf;
  --lake-lucerne: #529bb7;
  --pastel-brown: #826849;
  --moroccan-blue: #00587a;
  --eclipse-elixir: #1e1f2d;
}

Tailwind CSS v4

/* Vinaigrette to Eclipse Elixir — https://swatchly.xyz/palette/eddab1-b1a8cf-529bb7-826849-00587a-1e1f2d */
@theme {
  --color-vinaigrette: #eddab1;
  --color-vinaigrette-50: #fff7e7;
  --color-vinaigrette-100: #f9eed6;
  --color-vinaigrette-200: #eddab1;
  --color-vinaigrette-300: #d3c3a1;
  --color-vinaigrette-400: #b4a27d;
  --color-vinaigrette-500: #988660;
  --color-vinaigrette-600: #7c6b46;
  --color-vinaigrette-700: #635432;
  --color-vinaigrette-800: #4e4123;
  --color-vinaigrette-900: #3d3118;
  --color-vinaigrette-950: #261e0c;
  --color-lucius-lilac: #b1a8cf;
  --color-lucius-lilac-50: #faf9ff;
  --color-lucius-lilac-100: #f3f0ff;
  --color-lucius-lilac-200: #e2dcf8;
  --color-lucius-lilac-300: #cec7e7;
  --color-lucius-lilac-400: #b1a8cf;
  --color-lucius-lilac-500: #938ab0;
  --color-lucius-lilac-600: #766e92;
  --color-lucius-lilac-700: #5d5576;
  --color-lucius-lilac-800: #48415d;
  --color-lucius-lilac-900: #363048;
  --color-lucius-lilac-950: #201c2d;
  --color-lake-lucerne: #529bb7;
  --color-lake-lucerne-50: #edf9ff;
  --color-lake-lucerne-100: #daf4ff;
  --color-lake-lucerne-200: #b3e6fb;
  --color-lake-lucerne-300: #97d2ea;
  --color-lake-lucerne-400: #71b5d0;
  --color-lake-lucerne-500: #529bb7;
  --color-lake-lucerne-600: #347e99;
  --color-lake-lucerne-700: #1b647d;
  --color-lake-lucerne-800: #074e64;
  --color-lake-lucerne-900: #003c4e;
  --color-lake-lucerne-950: #002531;
  --color-pastel-brown: #826849;
  --color-pastel-brown-50: #fff3e5;
  --color-pastel-brown-100: #fbe8d3;
  --color-pastel-brown-200: #ead4bb;
  --color-pastel-brown-300: #d6bda1;
  --color-pastel-brown-400: #b89d7e;
  --color-pastel-brown-500: #9d8262;
  --color-pastel-brown-600: #826849;
  --color-pastel-brown-700: #695236;
  --color-pastel-brown-800: #533f26;
  --color-pastel-brown-900: #41301b;
  --color-pastel-brown-950: #291d0e;
  --color-moroccan-blue: #00587a;
  --color-moroccan-blue-50: #ebf7ff;
  --color-moroccan-blue-100: #d6f0ff;
  --color-moroccan-blue-200: #abdffc;
  --color-moroccan-blue-300: #8cc8ea;
  --color-moroccan-blue-400: #65a8cd;
  --color-moroccan-blue-500: #458cb0;
  --color-moroccan-blue-600: #297092;
  --color-moroccan-blue-700: #00587a;
  --color-moroccan-blue-800: #04455f;
  --color-moroccan-blue-900: #00354b;
  --color-moroccan-blue-950: #002130;
  --color-eclipse-elixir: #1e1f2d;
  --color-eclipse-elixir-50: #f3f4ff;
  --color-eclipse-elixir-100: #e9eaf6;
  --color-eclipse-elixir-200: #d5d6e5;
  --color-eclipse-elixir-300: #bec0d0;
  --color-eclipse-elixir-400: #9ea0b2;
  --color-eclipse-elixir-500: #838597;
  --color-eclipse-elixir-600: #696b7c;
  --color-eclipse-elixir-700: #535564;
  --color-eclipse-elixir-800: #41424f;
  --color-eclipse-elixir-900: #32333e;
  --color-eclipse-elixir-950: #1e1f2d;
}

Similar palettes