Latesummer

Palette mit 9 Farben · Neutral · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Latesummer

Palette mit 9 Farben · Temperatur: Neutral · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 9 Farben Neutral Gemischt Komplementär

Likes 5

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #254E70;
  --c-vibrant-2: #37718E;
  --c-vibrant-3: #8EE3EF;
  --c-vibrant-4: #A30000;
  --c-vibrant-5: #FF7700;
  --c-vibrant-6: #E8C547;
  --c-vibrant-7: #118A45;
  --c-vibrant-8: #60B426;
  --c-vibrant-9: #BED558;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton Photon Barrier (#8EE3EF) bis zum dunkelsten Ton Blue Tang (#254E70). Sie vereint Blue Tang, Living Stream, Photon Barrier, Stanger Red, Lucky Orange, Liberator Gold, The Wild Apothecary, Chasm Green und Frog Prince in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #254E70 auf #8EE3EF mit 5,99:1.

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

Farben im Detail

Blue Tang #254E70

RGB: rgb(37, 78, 112)
HSL: hsl(207, 50%, 29%)
Luminanz: 0,070

Living Stream #37718E

RGB: rgb(55, 113, 142)
HSL: hsl(200, 44%, 39%)
Luminanz: 0,146

Photon Barrier #8EE3EF

RGB: rgb(142, 227, 239)
HSL: hsl(187, 75%, 75%)
Luminanz: 0,669

Stanger Red #A30000

RGB: rgb(163, 0, 0)
HSL: hsl(0, 100%, 32%)
Luminanz: 0,078

Lucky Orange #FF7700

RGB: rgb(255, 119, 0)
HSL: hsl(28, 100%, 50%)
Luminanz: 0,345

Liberator Gold #E8C547

RGB: rgb(232, 197, 71)
HSL: hsl(47, 78%, 59%)
Luminanz: 0,575

The Wild Apothecary #118A45

RGB: rgb(17, 138, 69)
HSL: hsl(146, 78%, 30%)
Luminanz: 0,187

Chasm Green #60B426

RGB: rgb(96, 180, 38)
HSL: hsl(95, 65%, 43%)
Luminanz: 0,353

Frog Prince #BED558

RGB: rgb(190, 213, 88)
HSL: hsl(71, 60%, 59%)
Luminanz: 0,592

Kontrast & Barrierefreiheit

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

Aa #254E70 auf #8EE3EF 5,99:1 AA

Aa #8EE3EF auf #A30000 5,62:1 AA

Aa #254E70 auf #BED558 5,35:1 AA

Aa #254E70 auf #E8C547 5,21:1 AA

Aa #A30000 auf #BED558 5,02:1 AA

Aa #A30000 auf #E8C547 4,89:1 AA

Aa #37718E auf #8EE3EF 3,67:1 AA (großer Text)

Aa #254E70 auf #60B426 3,35:1 AA (großer Text)

Aa #254E70 auf #FF7700 3,28:1 AA (großer Text)

Aa #37718E auf #BED558 3,28:1 AA (großer Text)

Aa #37718E auf #E8C547 3,19:1 AA (großer Text)

Aa #A30000 auf #60B426 3,15:1 AA (großer Text)

Aa #A30000 auf #FF7700 3,09:1 AA (großer Text)

Aa #8EE3EF auf #118A45 3,03:1 AA (großer Text)

Aa #118A45 auf #BED558 2,71:1 Nicht bestanden

Aa #E8C547 auf #118A45 2,64:1 Nicht bestanden

Aa #37718E auf #60B426 2,06:1 Nicht bestanden

Aa #37718E auf #FF7700 2,02:1 Nicht bestanden

Aa #254E70 auf #118A45 1,98:1 Nicht bestanden

Aa #A30000 auf #118A45 1,86:1 Nicht bestanden

Aa #8EE3EF auf #FF7700 1,82:1 Nicht bestanden

Aa #8EE3EF auf #60B426 1,79:1 Nicht bestanden

Aa #118A45 auf #60B426 1,70:1 Nicht bestanden

Aa #FF7700 auf #118A45 1,66:1 Nicht bestanden

Aa #254E70 auf #37718E 1,63:1 Nicht bestanden

Aa #FF7700 auf #BED558 1,63:1 Nicht bestanden

Aa #60B426 auf #BED558 1,60:1 Nicht bestanden

Aa #FF7700 auf #E8C547 1,59:1 Nicht bestanden

Aa #E8C547 auf #60B426 1,55:1 Nicht bestanden

Aa #37718E auf #A30000 1,53:1 Nicht bestanden

Aa #37718E auf #118A45 1,21:1 Nicht bestanden

Aa #8EE3EF auf #E8C547 1,15:1 Nicht bestanden

Aa #8EE3EF auf #BED558 1,12:1 Nicht bestanden

Aa #254E70 auf #A30000 1,06:1 Nicht bestanden

Aa #E8C547 auf #BED558 1,03:1 Nicht bestanden

Aa #FF7700 auf #60B426 1,02:1 Nicht bestanden

Latesummer

Latesummer

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen