2sois

Palette mit 6 Farben · Warm · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

2sois

Palette mit 6 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 6 Farben Warm Gemischt Komplementär

Likes 24

Farben 6

CSS-Variablen

:root {
  --c-vibrant-1: #17283C;
  --c-vibrant-2: #7D6FB8;
  --c-vibrant-3: #C986F6;
  --c-vibrant-4: #F9C4AD;
  --c-vibrant-5: #FEF6F2;
  --c-vibrant-6: #F6623E;
}

Über diese Palette

Diese lebendige Palette mit 6 Farben reicht vom hellsten Ton Pink Diminishing (#FEF6F2) bis zum dunkelsten Ton Cool Balaclavas Are Forever (#17283C). Sie vereint Cool Balaclavas Are Forever, Venus Violet, Grass Pink Orchid, Coral Bisque, Pink Diminishing und Vermilion Orange in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 15. Davon erreichen 4 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #17283C auf #FEF6F2 mit 14:1.

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

Farben im Detail

Cool Balaclavas Are Forever #17283C

RGB: rgb(23, 40, 60)
HSL: hsl(212, 45%, 16%)
Luminanz: 0,020

Venus Violet #7D6FB8

RGB: rgb(125, 111, 184)
HSL: hsl(252, 34%, 58%)
Luminanz: 0,192

Grass Pink Orchid #C986F6

RGB: rgb(201, 134, 246)
HSL: hsl(276, 86%, 75%)
Luminanz: 0,361

Coral Bisque #F9C4AD

RGB: rgb(249, 196, 173)
HSL: hsl(18, 86%, 83%)
Luminanz: 0,626

Pink Diminishing #FEF6F2

RGB: rgb(254, 246, 242)
HSL: hsl(20, 86%, 97%)
Luminanz: 0,934

Vermilion Orange #F6623E

RGB: rgb(246, 98, 62)
HSL: hsl(12, 91%, 60%)
Luminanz: 0,287

Kontrast & Barrierefreiheit

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

Aa #17283C auf #FEF6F2 14,00:1 AAA

Aa #17283C auf #F9C4AD 9,63:1 AAA

Aa #17283C auf #C986F6 5,85:1 AA

Aa #17283C auf #F6623E 4,79:1 AA

Aa #7D6FB8 auf #FEF6F2 4,07:1 AA (großer Text)

Aa #17283C auf #7D6FB8 3,44:1 AA (großer Text)

Aa #FEF6F2 auf #F6623E 2,92:1 Nicht bestanden

Aa #7D6FB8 auf #F9C4AD 2,80:1 Nicht bestanden

Aa #C986F6 auf #FEF6F2 2,39:1 Nicht bestanden

Aa #F9C4AD auf #F6623E 2,01:1 Nicht bestanden

Aa #7D6FB8 auf #C986F6 1,70:1 Nicht bestanden

Aa #C986F6 auf #F9C4AD 1,64:1 Nicht bestanden

Aa #F9C4AD auf #FEF6F2 1,45:1 Nicht bestanden

Aa #7D6FB8 auf #F6623E 1,39:1 Nicht bestanden

Aa #C986F6 auf #F6623E 1,22:1 Nicht bestanden

2sois

2sois

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen