CYBEAR9

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

Zurück zur Bibliothek

CYBEAR9

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

Bearbeiten

Lebendig 9 Farben Warm Gemischt Komplementär vibrant colorful synthwave

Likes 74

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #FFDD4E;
  --c-vibrant-2: #FF6E49;
  --c-vibrant-3: #FF0044;
  --c-vibrant-4: #C50044;
  --c-vibrant-5: #800044;
  --c-vibrant-6: #470044;
  --c-vibrant-7: #150044;
  --c-vibrant-8: #090032;
  --c-vibrant-9: #000019;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton Royal Star (#FFDD4E) bis zum dunkelsten Ton Benthic Black (#000019). Sie vereint Royal Star, Outrageous Orange, Cherry Soda, Ruby, Wine, Jacarta, Floppy Disk, Erebus Blue und Benthic Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 13 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFDD4E auf #000019 mit 15,49:1.

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

Farben im Detail

Royal Star #FFDD4E

RGB: rgb(255, 221, 78)
HSL: hsl(48, 100%, 65%)
Luminanz: 0,735

Outrageous Orange #FF6E49

RGB: rgb(255, 110, 73)
HSL: hsl(12, 100%, 64%)
Luminanz: 0,329

Cherry Soda #FF0044

RGB: rgb(255, 0, 68)
HSL: hsl(344, 100%, 50%)
Luminanz: 0,217

Ruby #C50044

RGB: rgb(197, 0, 68)
HSL: hsl(339, 100%, 39%)
Luminanz: 0,123

Wine #800044

RGB: rgb(128, 0, 68)
HSL: hsl(328, 100%, 25%)
Luminanz: 0,050

Jacarta #470044

RGB: rgb(71, 0, 68)
HSL: hsl(303, 100%, 14%)
Luminanz: 0,018

Floppy Disk #150044

RGB: rgb(21, 0, 68)
HSL: hsl(259, 100%, 13%)
Luminanz: 0,006

Erebus Blue #090032

RGB: rgb(9, 0, 50)
HSL: hsl(251, 100%, 10%)
Luminanz: 0,003

Benthic Black #000019

RGB: rgb(0, 0, 25)
HSL: hsl(240, 100%, 5%)
Luminanz: 0,001

Kontrast & Barrierefreiheit

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

Aa #FFDD4E auf #000019 15,49:1 AAA

Aa #FFDD4E auf #090032 14,85:1 AAA

Aa #FFDD4E auf #150044 14,08:1 AAA

Aa #FFDD4E auf #470044 11,62:1 AAA

Aa #FFDD4E auf #800044 7,85:1 AAA

Aa #FF6E49 auf #000019 7,47:1 AAA

Aa #FF6E49 auf #090032 7,17:1 AAA

Aa #FF6E49 auf #150044 6,79:1 AA

Aa #FF6E49 auf #470044 5,61:1 AA

Aa #FF0044 auf #000019 5,26:1 AA

Aa #FF0044 auf #090032 5,04:1 AA

Aa #FF0044 auf #150044 4,78:1 AA

Aa #FFDD4E auf #C50044 4,54:1 AA

Aa #FF0044 auf #470044 3,95:1 AA (großer Text)

Aa #FF6E49 auf #800044 3,79:1 AA (großer Text)

Aa #C50044 auf #000019 3,41:1 AA (großer Text)

Aa #C50044 auf #090032 3,27:1 AA (großer Text)

Aa #C50044 auf #150044 3,10:1 AA (großer Text)

Aa #FFDD4E auf #FF0044 2,94:1 Nicht bestanden

Aa #FF0044 auf #800044 2,67:1 Nicht bestanden

Aa #C50044 auf #470044 2,56:1 Nicht bestanden

Aa #FF6E49 auf #C50044 2,19:1 Nicht bestanden

Aa #FFDD4E auf #FF6E49 2,07:1 Nicht bestanden

Aa #800044 auf #000019 1,97:1 Nicht bestanden

Aa #800044 auf #090032 1,89:1 Nicht bestanden

Aa #800044 auf #150044 1,79:1 Nicht bestanden

Aa #C50044 auf #800044 1,73:1 Nicht bestanden

Aa #FF0044 auf #C50044 1,54:1 Nicht bestanden

Aa #800044 auf #470044 1,48:1 Nicht bestanden

Aa #FF6E49 auf #FF0044 1,42:1 Nicht bestanden

Aa #470044 auf #000019 1,33:1 Nicht bestanden

Aa #470044 auf #090032 1,28:1 Nicht bestanden

Aa #470044 auf #150044 1,21:1 Nicht bestanden

Aa #150044 auf #000019 1,10:1 Nicht bestanden

Aa #150044 auf #090032 1,05:1 Nicht bestanden

Aa #090032 auf #000019 1,04:1 Nicht bestanden

CYBEAR9

CYBEAR9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen