Médor9

Palette mit 9 Farben · Warm · Gemischt · Harmonie: Analog

Zurück zur Bibliothek

Médor9

Palette mit 9 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Analog

Bearbeiten

Lebendig 9 Farben Warm Gemischt Analog 9colors dog

Likes 19

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #E5E5E5;
  --c-vibrant-2: #E8C53C;
  --c-vibrant-3: #BAB200;
  --c-vibrant-4: #D88C1A;
  --c-vibrant-5: #BC6336;
  --c-vibrant-6: #666600;
  --c-vibrant-7: #68294E;
  --c-vibrant-8: #47211A;
  --c-vibrant-9: #270E0E;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton Cold Morning (#E5E5E5) bis zum dunkelsten Ton Italian Roast (#270E0E). Sie vereint Cold Morning, Lime Drop, Muddy Yellow, Apricot Chicken, Smoke Tree, Earthy Khaki Green, Ebizome Purple, Marmite und Italian Roast in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #E5E5E5 auf #270E0E mit 14,43:1.

Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.

Farben im Detail

Cold Morning #E5E5E5

RGB: rgb(229, 229, 229)
HSL: hsl(0, 0%, 90%)
Luminanz: 0,784

Lime Drop #E8C53C

RGB: rgb(232, 197, 60)
HSL: hsl(48, 79%, 57%)
Luminanz: 0,574

Muddy Yellow #BAB200

RGB: rgb(186, 178, 0)
HSL: hsl(57, 100%, 36%)
Luminanz: 0,423

Apricot Chicken #D88C1A

RGB: rgb(216, 140, 26)
HSL: hsl(36, 79%, 47%)
Luminanz: 0,334

Smoke Tree #BC6336

RGB: rgb(188, 99, 54)
HSL: hsl(20, 55%, 47%)
Luminanz: 0,199

Earthy Khaki Green #666600

RGB: rgb(102, 102, 0)
HSL: hsl(60, 100%, 20%)
Luminanz: 0,123

Ebizome Purple #68294E

RGB: rgb(104, 41, 78)
HSL: hsl(325, 43%, 28%)
Luminanz: 0,051

Marmite #47211A

RGB: rgb(71, 33, 26)
HSL: hsl(9, 46%, 19%)
Luminanz: 0,025

Italian Roast #270E0E

RGB: rgb(39, 14, 14)
HSL: hsl(0, 47%, 10%)
Luminanz: 0,008

Kontrast & Barrierefreiheit

12 von 36 Farbpaaren erreichen die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext.

Aa #E5E5E5 auf #270E0E 14,43:1 AAA

Aa #E5E5E5 auf #47211A 11,11:1 AAA

Aa #E8C53C auf #270E0E 10,80:1 AAA

Aa #E8C53C auf #47211A 8,32:1 AAA

Aa #E5E5E5 auf #68294E 8,27:1 AAA

Aa #BAB200 auf #270E0E 8,18:1 AAA

Aa #D88C1A auf #270E0E 6,65:1 AA

Aa #BAB200 auf #47211A 6,30:1 AA

Aa #E8C53C auf #68294E 6,19:1 AA

Aa #D88C1A auf #47211A 5,12:1 AA

Aa #E5E5E5 auf #666600 4,81:1 AA

Aa #BAB200 auf #68294E 4,69:1 AA

Aa #BC6336 auf #270E0E 4,31:1 AA (großer Text)

Aa #D88C1A auf #68294E 3,81:1 AA (großer Text)

Aa #E8C53C auf #666600 3,60:1 AA (großer Text)

Aa #E5E5E5 auf #BC6336 3,35:1 AA (großer Text)

Aa #BC6336 auf #47211A 3,32:1 AA (großer Text)

Aa #666600 auf #270E0E 3,00:1 AA (großer Text)

Aa #BAB200 auf #666600 2,73:1 Nicht bestanden

Aa #E8C53C auf #BC6336 2,51:1 Nicht bestanden

Aa #BC6336 auf #68294E 2,47:1 Nicht bestanden

Aa #666600 auf #47211A 2,31:1 Nicht bestanden

Aa #D88C1A auf #666600 2,22:1 Nicht bestanden

Aa #E5E5E5 auf #D88C1A 2,17:1 Nicht bestanden

Aa #BAB200 auf #BC6336 1,90:1 Nicht bestanden

Aa #E5E5E5 auf #BAB200 1,76:1 Nicht bestanden

Aa #68294E auf #270E0E 1,74:1 Nicht bestanden

Aa #666600 auf #68294E 1,72:1 Nicht bestanden

Aa #E8C53C auf #D88C1A 1,62:1 Nicht bestanden

Aa #D88C1A auf #BC6336 1,54:1 Nicht bestanden

Aa #BC6336 auf #666600 1,44:1 Nicht bestanden

Aa #E5E5E5 auf #E8C53C 1,34:1 Nicht bestanden

Aa #68294E auf #47211A 1,34:1 Nicht bestanden

Aa #E8C53C auf #BAB200 1,32:1 Nicht bestanden

Aa #47211A auf #270E0E 1,30:1 Nicht bestanden

Aa #BAB200 auf #D88C1A 1,23:1 Nicht bestanden

Médor9

Médor9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen