FURY

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

Zurück zur Bibliothek

FURY

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär

Likes 14

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #A10A03;
  --c-vibrant-2: #DB1804;
  --c-vibrant-3: #F43B45;
  --c-vibrant-4: #C20FF0;
  --c-vibrant-5: #FBB4FC;
  --c-vibrant-6: #FFFFFF;
  --c-vibrant-7: #01FFFF;
  --c-vibrant-8: #23A8F3;
  --c-vibrant-9: #2F1D4D;
  --c-vibrant-10: #541947;
  --c-vibrant-11: #0D0A2A;
  --c-vibrant-12: #000000;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Gory Red, Orko, Red Salsa, Promiscuous Pink, Strawberry Buttercream, White, Cyan, Button Blue, Elderberry, Violet Carmine, Mysterious Depths und Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 24 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #000000 mit 21:1.

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

Farben im Detail

Gory Red #A10A03

RGB: rgb(161, 10, 3)
HSL: hsl(3, 96%, 32%)
Luminanz: 0,078

Orko #DB1804

RGB: rgb(219, 24, 4)
HSL: hsl(6, 96%, 44%)
Luminanz: 0,157

Red Salsa #F43B45

RGB: rgb(244, 59, 69)
HSL: hsl(357, 89%, 59%)
Luminanz: 0,228

Promiscuous Pink #C20FF0

RGB: rgb(194, 15, 240)
HSL: hsl(288, 88%, 50%)
Luminanz: 0,181

Strawberry Buttercream #FBB4FC

RGB: rgb(251, 180, 252)
HSL: hsl(299, 92%, 85%)
Luminanz: 0,602

White #FFFFFF

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

Cyan #01FFFF

RGB: rgb(1, 255, 255)
HSL: hsl(180, 100%, 50%)
Luminanz: 0,788

Button Blue #23A8F3

RGB: rgb(35, 168, 243)
HSL: hsl(202, 90%, 55%)
Luminanz: 0,348

Elderberry #2F1D4D

RGB: rgb(47, 29, 77)
HSL: hsl(263, 45%, 21%)
Luminanz: 0,020

Violet Carmine #541947

RGB: rgb(84, 25, 71)
HSL: hsl(313, 54%, 21%)
Luminanz: 0,030

Mysterious Depths #0D0A2A

RGB: rgb(13, 10, 42)
HSL: hsl(246, 62%, 10%)
Luminanz: 0,005

Black #000000

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

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #000000 21,00:1 AAA

Aa #FFFFFF auf #0D0A2A 19,20:1 AAA

Aa #01FFFF auf #000000 16,75:1 AAA

Aa #01FFFF auf #0D0A2A 15,31:1 AAA

Aa #FFFFFF auf #2F1D4D 14,96:1 AAA

Aa #FFFFFF auf #541947 13,07:1 AAA

Aa #FBB4FC auf #000000 13,04:1 AAA

Aa #01FFFF auf #2F1D4D 11,93:1 AAA

Aa #FBB4FC auf #0D0A2A 11,92:1 AAA

Aa #01FFFF auf #541947 10,42:1 AAA

Aa #FBB4FC auf #2F1D4D 9,29:1 AAA

Aa #A10A03 auf #FFFFFF 8,20:1 AAA

Aa #FBB4FC auf #541947 8,11:1 AAA

Aa #23A8F3 auf #000000 7,97:1 AAA

Aa #23A8F3 auf #0D0A2A 7,28:1 AAA

Aa #A10A03 auf #01FFFF 6,54:1 AA

Aa #23A8F3 auf #2F1D4D 5,68:1 AA

Aa #F43B45 auf #000000 5,56:1 AA

Aa #A10A03 auf #FBB4FC 5,09:1 AA

Aa #F43B45 auf #0D0A2A 5,08:1 AA

Aa #DB1804 auf #FFFFFF 5,07:1 AA

Aa #23A8F3 auf #541947 4,96:1 AA

Aa #C20FF0 auf #000000 4,62:1 AA

Aa #C20FF0 auf #FFFFFF 4,55:1 AA

Aa #C20FF0 auf #0D0A2A 4,22:1 AA (großer Text)

Aa #DB1804 auf #000000 4,14:1 AA (großer Text)

Aa #DB1804 auf #01FFFF 4,04:1 AA (großer Text)

Aa #F43B45 auf #2F1D4D 3,96:1 AA (großer Text)

Aa #DB1804 auf #0D0A2A 3,79:1 AA (großer Text)

Aa #F43B45 auf #FFFFFF 3,78:1 AA (großer Text)

Aa #C20FF0 auf #01FFFF 3,63:1 AA (großer Text)

Aa #F43B45 auf #541947 3,46:1 AA (großer Text)

Aa #C20FF0 auf #2F1D4D 3,29:1 AA (großer Text)

Aa #DB1804 auf #FBB4FC 3,15:1 AA (großer Text)

Aa #A10A03 auf #23A8F3 3,11:1 AA (großer Text)

Aa #F43B45 auf #01FFFF 3,01:1 AA (großer Text)

Aa #DB1804 auf #2F1D4D 2,95:1 Nicht bestanden

Aa #C20FF0 auf #541947 2,88:1 Nicht bestanden

Aa #C20FF0 auf #FBB4FC 2,82:1 Nicht bestanden

Aa #FFFFFF auf #23A8F3 2,64:1 Nicht bestanden

Aa #DB1804 auf #541947 2,58:1 Nicht bestanden

Aa #A10A03 auf #000000 2,56:1 Nicht bestanden

Aa #F43B45 auf #FBB4FC 2,35:1 Nicht bestanden

Aa #A10A03 auf #0D0A2A 2,34:1 Nicht bestanden

Aa #A10A03 auf #F43B45 2,17:1 Nicht bestanden

Aa #01FFFF auf #23A8F3 2,10:1 Nicht bestanden

Aa #DB1804 auf #23A8F3 1,92:1 Nicht bestanden

Aa #A10A03 auf #2F1D4D 1,82:1 Nicht bestanden

Aa #A10A03 auf #C20FF0 1,80:1 Nicht bestanden

Aa #C20FF0 auf #23A8F3 1,72:1 Nicht bestanden

Aa #FBB4FC auf #23A8F3 1,64:1 Nicht bestanden

Aa #A10A03 auf #DB1804 1,62:1 Nicht bestanden

Aa #FBB4FC auf #FFFFFF 1,61:1 Nicht bestanden

Aa #541947 auf #000000 1,61:1 Nicht bestanden

Aa #A10A03 auf #541947 1,59:1 Nicht bestanden

Aa #541947 auf #0D0A2A 1,47:1 Nicht bestanden

Aa #F43B45 auf #23A8F3 1,43:1 Nicht bestanden

Aa #2F1D4D auf #000000 1,40:1 Nicht bestanden

Aa #DB1804 auf #F43B45 1,34:1 Nicht bestanden

Aa #FBB4FC auf #01FFFF 1,28:1 Nicht bestanden

Aa #2F1D4D auf #0D0A2A 1,28:1 Nicht bestanden

Aa #FFFFFF auf #01FFFF 1,25:1 Nicht bestanden

Aa #F43B45 auf #C20FF0 1,20:1 Nicht bestanden

Aa #2F1D4D auf #541947 1,14:1 Nicht bestanden

Aa #DB1804 auf #C20FF0 1,11:1 Nicht bestanden

Aa #0D0A2A auf #000000 1,09:1 Nicht bestanden

FURY

FURY

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen