Atom 8 ☢

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

Zurück zur Bibliothek

Atom 8 ☢

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär vibrant polyphrog retro atom

Likes 113

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #B30000;
  --c-vibrant-2: #FF8000;
  --c-vibrant-3: #FFFFAA;
  --c-vibrant-4: #6CD900;
  --c-vibrant-5: #008000;
  --c-vibrant-6: #000000;
  --c-vibrant-7: #404080;
  --c-vibrant-8: #888888;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Ginger Lemon Tea (#FFFFAA) bis zum dunkelsten Ton Black (#000000). Sie vereint All Systems Red, Orange Juice, Ginger Lemon Tea, Radioactive Lilypad, Hulk, Black, Jacksons Purple und Argent in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFAA auf #000000 mit 20,14:1.

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

Farben im Detail

All Systems Red #B30000

RGB: rgb(179, 0, 0)
HSL: hsl(0, 100%, 35%)
Luminanz: 0,096

Orange Juice #FF8000

RGB: rgb(255, 128, 0)
HSL: hsl(30, 100%, 50%)
Luminanz: 0,367

Ginger Lemon Tea #FFFFAA

RGB: rgb(255, 255, 170)
HSL: hsl(60, 100%, 83%)
Luminanz: 0,957

Radioactive Lilypad #6CD900

RGB: rgb(108, 217, 0)
HSL: hsl(90, 100%, 43%)
Luminanz: 0,528

Hulk #008000

RGB: rgb(0, 128, 0)
HSL: hsl(120, 100%, 25%)
Luminanz: 0,154

Black #000000

RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
Luminanz: 0,000

Jacksons Purple #404080

RGB: rgb(64, 64, 128)
HSL: hsl(240, 33%, 38%)
Luminanz: 0,063

Argent #888888

RGB: rgb(136, 136, 136)
HSL: hsl(0, 0%, 53%)
Luminanz: 0,246

Kontrast & Barrierefreiheit

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

Aa #FFFFAA auf #000000 20,14:1 AAA

Aa #6CD900 auf #000000 11,56:1 AAA

Aa #FFFFAA auf #404080 8,90:1 AAA

Aa #FF8000 auf #000000 8,34:1 AAA

Aa #B30000 auf #FFFFAA 6,90:1 AA

Aa #000000 auf #888888 5,92:1 AA

Aa #6CD900 auf #404080 5,11:1 AA

Aa #FFFFAA auf #008000 4,93:1 AA

Aa #008000 auf #000000 4,09:1 AA (großer Text)

Aa #B30000 auf #6CD900 3,96:1 AA (großer Text)

Aa #FF8000 auf #404080 3,69:1 AA (großer Text)

Aa #FFFFAA auf #888888 3,40:1 AA (großer Text)

Aa #B30000 auf #000000 2,92:1 Nicht bestanden

Aa #B30000 auf #FF8000 2,86:1 Nicht bestanden

Aa #6CD900 auf #008000 2,83:1 Nicht bestanden

Aa #404080 auf #888888 2,62:1 Nicht bestanden

Aa #FF8000 auf #FFFFAA 2,41:1 Nicht bestanden

Aa #000000 auf #404080 2,26:1 Nicht bestanden

Aa #FF8000 auf #008000 2,04:1 Nicht bestanden

Aa #B30000 auf #888888 2,03:1 Nicht bestanden

Aa #6CD900 auf #888888 1,95:1 Nicht bestanden

Aa #008000 auf #404080 1,81:1 Nicht bestanden

Aa #FFFFAA auf #6CD900 1,74:1 Nicht bestanden

Aa #008000 auf #888888 1,45:1 Nicht bestanden

Aa #FF8000 auf #888888 1,41:1 Nicht bestanden

Aa #B30000 auf #008000 1,40:1 Nicht bestanden

Aa #FF8000 auf #6CD900 1,39:1 Nicht bestanden

Aa #B30000 auf #404080 1,29:1 Nicht bestanden

Atom 8 ☢

Atom 8 ☢

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen