NUM_05

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

Zurück zur Bibliothek

NUM_05

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

Bearbeiten

Lebendig 9 Farben Warm Gemischt Komplementär five 5 number num

Likes 5

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #DEE9FF;
  --c-vibrant-2: #FE371B;
  --c-vibrant-3: #FF9700;
  --c-vibrant-4: #F0D922;
  --c-vibrant-5: #00DC23;
  --c-vibrant-6: #00C9FF;
  --c-vibrant-7: #7A4EFF;
  --c-vibrant-8: #FF54DC;
  --c-vibrant-9: #000A21;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton Husky (#DEE9FF) bis zum dunkelsten Ton Melanophobia (#000A21). Sie vereint Husky, Red Card, Barcelona Orange, Spectacular Saffron, Green Wrasse, Vivid Sky Blue, Venetian Nights, Purple Pizzazz und Melanophobia in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 7 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #DEE9FF auf #000A21 mit 16,15:1.

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

Farben im Detail

Husky #DEE9FF

RGB: rgb(222, 233, 255)
HSL: hsl(220, 100%, 94%)
Luminanz: 0,810

Red Card #FE371B

RGB: rgb(254, 55, 27)
HSL: hsl(7, 99%, 55%)
Luminanz: 0,239

Barcelona Orange #FF9700

RGB: rgb(255, 151, 0)
HSL: hsl(36, 100%, 50%)
Luminanz: 0,434

Spectacular Saffron #F0D922

RGB: rgb(240, 217, 34)
HSL: hsl(53, 87%, 54%)
Luminanz: 0,683

Green Wrasse #00DC23

RGB: rgb(0, 220, 35)
HSL: hsl(130, 100%, 43%)
Luminanz: 0,513

Vivid Sky Blue #00C9FF

RGB: rgb(0, 201, 255)
HSL: hsl(193, 100%, 50%)
Luminanz: 0,490

Venetian Nights #7A4EFF

RGB: rgb(122, 78, 255)
HSL: hsl(255, 100%, 65%)
Luminanz: 0,168

Purple Pizzazz #FF54DC

RGB: rgb(255, 84, 220)
HSL: hsl(312, 100%, 66%)
Luminanz: 0,328

Melanophobia #000A21

RGB: rgb(0, 10, 33)
HSL: hsl(222, 100%, 6%)
Luminanz: 0,003

Kontrast & Barrierefreiheit

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

Aa #DEE9FF auf #000A21 16,15:1 AAA

Aa #F0D922 auf #000A21 13,75:1 AAA

Aa #00DC23 auf #000A21 10,57:1 AAA

Aa #00C9FF auf #000A21 10,14:1 AAA

Aa #FF9700 auf #000A21 9,08:1 AAA

Aa #FF54DC auf #000A21 7,09:1 AAA

Aa #FE371B auf #000A21 5,42:1 AA

Aa #7A4EFF auf #000A21 4,09:1 AA (großer Text)

Aa #DEE9FF auf #7A4EFF 3,95:1 AA (großer Text)

Aa #F0D922 auf #7A4EFF 3,36:1 AA (großer Text)

Aa #DEE9FF auf #FE371B 2,98:1 Nicht bestanden

Aa #00DC23 auf #7A4EFF 2,58:1 Nicht bestanden

Aa #FE371B auf #F0D922 2,54:1 Nicht bestanden

Aa #00C9FF auf #7A4EFF 2,48:1 Nicht bestanden

Aa #DEE9FF auf #FF54DC 2,28:1 Nicht bestanden

Aa #FF9700 auf #7A4EFF 2,22:1 Nicht bestanden

Aa #FE371B auf #00DC23 1,95:1 Nicht bestanden

Aa #F0D922 auf #FF54DC 1,94:1 Nicht bestanden

Aa #FE371B auf #00C9FF 1,87:1 Nicht bestanden

Aa #DEE9FF auf #FF9700 1,78:1 Nicht bestanden

Aa #7A4EFF auf #FF54DC 1,73:1 Nicht bestanden

Aa #FE371B auf #FF9700 1,68:1 Nicht bestanden

Aa #DEE9FF auf #00C9FF 1,59:1 Nicht bestanden

Aa #DEE9FF auf #00DC23 1,53:1 Nicht bestanden

Aa #FF9700 auf #F0D922 1,51:1 Nicht bestanden

Aa #00DC23 auf #FF54DC 1,49:1 Nicht bestanden

Aa #00C9FF auf #FF54DC 1,43:1 Nicht bestanden

Aa #F0D922 auf #00C9FF 1,36:1 Nicht bestanden

Aa #FE371B auf #7A4EFF 1,32:1 Nicht bestanden

Aa #FE371B auf #FF54DC 1,31:1 Nicht bestanden

Aa #F0D922 auf #00DC23 1,30:1 Nicht bestanden

Aa #FF9700 auf #FF54DC 1,28:1 Nicht bestanden

Aa #DEE9FF auf #F0D922 1,17:1 Nicht bestanden

Aa #FF9700 auf #00DC23 1,16:1 Nicht bestanden

Aa #FF9700 auf #00C9FF 1,12:1 Nicht bestanden

Aa #00DC23 auf #00C9FF 1,04:1 Nicht bestanden

NUM_05

NUM_05

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen