AtomSphere

Palette mit 9 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

AtomSphere

Palette mit 9 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 9 Farben Kühl Gemischt Komplementär red cyan violet space

Likes 15

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #290569;
  --c-vibrant-2: #753FEF;
  --c-vibrant-3: #AB80F3;
  --c-vibrant-4: #FFFFFF;
  --c-vibrant-5: #A7FFF6;
  --c-vibrant-6: #02DBEE;
  --c-vibrant-7: #CB0544;
  --c-vibrant-8: #FF1B4C;
  --c-vibrant-9: #FF4388;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Blackmail (#290569). Sie vereint Blackmail, Bluish Purple, Purple Illusionist, White, Frostbite, Thousand Sons Blue, Flame Lily, Fly Agaric und Sasquatch Socks in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #290569 auf #FFFFFF mit 15,91:1.

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

Farben im Detail

Blackmail #290569

RGB: rgb(41, 5, 105)
HSL: hsl(262, 91%, 22%)
Luminanz: 0,016

Bluish Purple #753FEF

RGB: rgb(117, 63, 239)
HSL: hsl(258, 85%, 59%)
Luminanz: 0,136

Purple Illusionist #AB80F3

RGB: rgb(171, 128, 243)
HSL: hsl(262, 83%, 73%)
Luminanz: 0,306

White #FFFFFF

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

Frostbite #A7FFF6

RGB: rgb(167, 255, 246)
HSL: hsl(174, 100%, 83%)
Luminanz: 0,864

Thousand Sons Blue #02DBEE

RGB: rgb(2, 219, 238)
HSL: hsl(185, 98%, 47%)
Luminanz: 0,569

Flame Lily #CB0544

RGB: rgb(203, 5, 68)
HSL: hsl(341, 95%, 41%)
Luminanz: 0,132

Fly Agaric #FF1B4C

RGB: rgb(255, 27, 76)
HSL: hsl(347, 100%, 55%)
Luminanz: 0,226

Sasquatch Socks #FF4388

RGB: rgb(255, 67, 136)
HSL: hsl(338, 100%, 63%)
Luminanz: 0,271

Kontrast & Barrierefreiheit

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

Aa #290569 auf #FFFFFF 15,91:1 AAA

Aa #290569 auf #A7FFF6 13,85:1 AAA

Aa #290569 auf #02DBEE 9,37:1 AAA

Aa #FFFFFF auf #CB0544 5,76:1 AA

Aa #753FEF auf #FFFFFF 5,65:1 AA

Aa #290569 auf #AB80F3 5,39:1 AA

Aa #A7FFF6 auf #CB0544 5,02:1 AA

Aa #753FEF auf #A7FFF6 4,92:1 AA

Aa #290569 auf #FF4388 4,86:1 AA

Aa #290569 auf #FF1B4C 4,18:1 AA (großer Text)

Aa #FFFFFF auf #FF1B4C 3,81:1 AA (großer Text)

Aa #02DBEE auf #CB0544 3,39:1 AA (großer Text)

Aa #753FEF auf #02DBEE 3,33:1 AA (großer Text)

Aa #A7FFF6 auf #FF1B4C 3,32:1 AA (großer Text)

Aa #FFFFFF auf #FF4388 3,28:1 AA (großer Text)

Aa #AB80F3 auf #FFFFFF 2,95:1 Nicht bestanden

Aa #A7FFF6 auf #FF4388 2,85:1 Nicht bestanden

Aa #290569 auf #753FEF 2,81:1 Nicht bestanden

Aa #290569 auf #CB0544 2,76:1 Nicht bestanden

Aa #AB80F3 auf #A7FFF6 2,57:1 Nicht bestanden

Aa #02DBEE auf #FF1B4C 2,24:1 Nicht bestanden

Aa #AB80F3 auf #CB0544 1,95:1 Nicht bestanden

Aa #02DBEE auf #FF4388 1,93:1 Nicht bestanden

Aa #753FEF auf #AB80F3 1,92:1 Nicht bestanden

Aa #CB0544 auf #FF4388 1,76:1 Nicht bestanden

Aa #AB80F3 auf #02DBEE 1,74:1 Nicht bestanden

Aa #753FEF auf #FF4388 1,73:1 Nicht bestanden

Aa #FFFFFF auf #02DBEE 1,70:1 Nicht bestanden

Aa #CB0544 auf #FF1B4C 1,51:1 Nicht bestanden

Aa #753FEF auf #FF1B4C 1,48:1 Nicht bestanden

Aa #A7FFF6 auf #02DBEE 1,48:1 Nicht bestanden

Aa #AB80F3 auf #FF1B4C 1,29:1 Nicht bestanden

Aa #FF1B4C auf #FF4388 1,16:1 Nicht bestanden

Aa #FFFFFF auf #A7FFF6 1,15:1 Nicht bestanden

Aa #AB80F3 auf #FF4388 1,11:1 Nicht bestanden

Aa #753FEF auf #CB0544 1,02:1 Nicht bestanden

AtomSphere

AtomSphere

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen