Power Outage
#301C46
Likes
21
Farben
10
CSS-Variablen
:root {
--c-vibrant-1: #301C46;
--c-vibrant-2: #283073;
--c-vibrant-3: #6941C0;
--c-vibrant-4: #8F5CFF;
--c-vibrant-5: #70E2FF;
--c-vibrant-6: #76FFFA;
--c-vibrant-7: #FFFFFF;
--c-vibrant-8: #B4FFC2;
--c-vibrant-9: #5AFF89;
--c-vibrant-10: #4B9C86;
}Über diese Palette
Diese lebendige Palette mit 10 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Power Outage (#301C46). Sie vereint Power Outage, Blue Rose, Dragonlord Purple, Purple Honeycreeper, Athena Blue, Ancient Ice, White, Light Mint, Thallium Flame und Wintergreen Shadow in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 45. Davon erreichen 15 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #301C46 auf #FFFFFF mit 15,22:1.
Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.
Farben im Detail
Blue Rose
#283073
Dragonlord Purple
#6941C0
Purple Honeycreeper
#8F5CFF
Athena Blue
#70E2FF
Ancient Ice
#76FFFA
White
#FFFFFF
Light Mint
#B4FFC2
Thallium Flame
#5AFF89
Wintergreen Shadow
#4B9C86
Kontrast & Barrierefreiheit
15 von 45 Farbpaaren erreichen die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext.
Aa
#301C46 auf #FFFFFF
15,22:1
AAA
Aa
#301C46 auf #B4FFC2
13,06:1
AAA
Aa
#301C46 auf #76FFFA
12,65:1
AAA
Aa
#283073 auf #FFFFFF
11,93:1
AAA
Aa
#301C46 auf #5AFF89
11,66:1
AAA
Aa
#283073 auf #B4FFC2
10,24:1
AAA
Aa
#301C46 auf #70E2FF
10,15:1
AAA
Aa
#283073 auf #76FFFA
9,91:1
AAA
Aa
#283073 auf #5AFF89
9,14:1
AAA
Aa
#283073 auf #70E2FF
7,96:1
AAA
Aa
#6941C0 auf #FFFFFF
6,74:1
AA
Aa
#6941C0 auf #B4FFC2
5,78:1
AA
Aa
#6941C0 auf #76FFFA
5,60:1
AA
Aa
#6941C0 auf #5AFF89
5,16:1
AA
Aa
#301C46 auf #4B9C86
4,64:1
AA
Aa
#6941C0 auf #70E2FF
4,49:1
AA (großer Text)
Aa
#8F5CFF auf #FFFFFF
4,08:1
AA (großer Text)
Aa
#301C46 auf #8F5CFF
3,73:1
AA (großer Text)
Aa
#283073 auf #4B9C86
3,63:1
AA (großer Text)
Aa
#8F5CFF auf #B4FFC2
3,50:1
AA (großer Text)
Aa
#8F5CFF auf #76FFFA
3,39:1
AA (großer Text)
Aa
#FFFFFF auf #4B9C86
3,28:1
AA (großer Text)
Aa
#8F5CFF auf #5AFF89
3,13:1
AA (großer Text)
Aa
#283073 auf #8F5CFF
2,92:1
Nicht bestanden
Aa
#B4FFC2 auf #4B9C86
2,82:1
Nicht bestanden
Aa
#76FFFA auf #4B9C86
2,73:1
Nicht bestanden
Aa
#8F5CFF auf #70E2FF
2,72:1
Nicht bestanden
Aa
#5AFF89 auf #4B9C86
2,52:1
Nicht bestanden
Aa
#301C46 auf #6941C0
2,26:1
Nicht bestanden
Aa
#70E2FF auf #4B9C86
2,19:1
Nicht bestanden
Aa
#6941C0 auf #4B9C86
2,05:1
Nicht bestanden
Aa
#283073 auf #6941C0
1,77:1
Nicht bestanden
Aa
#6941C0 auf #8F5CFF
1,65:1
Nicht bestanden
Aa
#70E2FF auf #FFFFFF
1,50:1
Nicht bestanden
Aa
#FFFFFF auf #5AFF89
1,30:1
Nicht bestanden
Aa
#70E2FF auf #B4FFC2
1,29:1
Nicht bestanden
Aa
#301C46 auf #283073
1,28:1
Nicht bestanden
Aa
#70E2FF auf #76FFFA
1,25:1
Nicht bestanden
Aa
#8F5CFF auf #4B9C86
1,24:1
Nicht bestanden
Aa
#76FFFA auf #FFFFFF
1,20:1
Nicht bestanden
Aa
#FFFFFF auf #B4FFC2
1,17:1
Nicht bestanden
Aa
#70E2FF auf #5AFF89
1,15:1
Nicht bestanden
Aa
#B4FFC2 auf #5AFF89
1,12:1
Nicht bestanden
Aa
#76FFFA auf #5AFF89
1,08:1
Nicht bestanden
Aa
#76FFFA auf #B4FFC2
1,03:1
Nicht bestanden
Ähnliche Paletten
#222831
#393E46
#00ADB5
#EEEEEE
#F9F7F7
#DBE2EF
#3F72AF
#112D4E
#1B262C
#0F4C75
#3282B8
#BBE1FA
#08D9D6
#252A34
#FF2E63
#EAEAEA
#27374D
#526D82
#9DB2BF
#DDE6ED
#364F6B
#3FC1C9
#F5F5F5
#FC5185
#E4F9F5
#30E3CA
#11999E
#40514E
#F0F5F9
#C9D6DF
#52616B
#1E2022