Fizzy12

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

Zurück zur Bibliothek

Fizzy12

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär bright qirlfriend newyearsglamourcontest

Likes 37

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #FFAE67;
  --c-vibrant-2: #FF40CC;
  --c-vibrant-3: #7A18AF;
  --c-vibrant-4: #0E0730;
  --c-vibrant-5: #5B09F2;
  --c-vibrant-6: #9962FF;
  --c-vibrant-7: #ED9EFF;
  --c-vibrant-8: #CCFFC1;
  --c-vibrant-9: #60D946;
  --c-vibrant-10: #029A80;
  --c-vibrant-11: #042D5B;
  --c-vibrant-12: #38E6C8;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Frosted Mint Hills (#CCFFC1) bis zum dunkelsten Ton Cosmic Void (#0E0730). Sie vereint Mango Salsa, Mat Dazzle Rose, Fuchsia Nebula, Cosmic Void, Wèi Lán Azure, Irrigo Purple, Party Pig, Frosted Mint Hills, Scorpion Green, Paolo Veronese Green, Marine und Fresh Turquoise in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 17 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #0E0730 auf #CCFFC1 mit 17,07:1.

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

Farben im Detail

Mango Salsa #FFAE67

RGB: rgb(255, 174, 103)
HSL: hsl(28, 100%, 70%)
Luminanz: 0,525

Mat Dazzle Rose #FF40CC

RGB: rgb(255, 64, 204)
HSL: hsl(316, 100%, 63%)
Luminanz: 0,293

Fuchsia Nebula #7A18AF

RGB: rgb(122, 24, 175)
HSL: hsl(279, 76%, 39%)
Luminanz: 0,079

Cosmic Void #0E0730

RGB: rgb(14, 7, 48)
HSL: hsl(250, 75%, 11%)
Luminanz: 0,005

Wèi Lán Azure #5B09F2

RGB: rgb(91, 9, 242)
HSL: hsl(261, 93%, 49%)
Luminanz: 0,088

Irrigo Purple #9962FF

RGB: rgb(153, 98, 255)
HSL: hsl(261, 100%, 69%)
Luminanz: 0,227

Party Pig #ED9EFF

RGB: rgb(237, 158, 255)
HSL: hsl(289, 100%, 81%)
Luminanz: 0,497

Frosted Mint Hills #CCFFC1

RGB: rgb(204, 255, 193)
HSL: hsl(109, 100%, 88%)
Luminanz: 0,882

Scorpion Green #60D946

RGB: rgb(96, 217, 70)
HSL: hsl(109, 66%, 56%)
Luminanz: 0,526

Paolo Veronese Green #029A80

RGB: rgb(2, 154, 128)
HSL: hsl(170, 97%, 31%)
Luminanz: 0,247

Marine #042D5B

RGB: rgb(4, 45, 91)
HSL: hsl(212, 92%, 19%)
Luminanz: 0,027

Fresh Turquoise #38E6C8

RGB: rgb(56, 230, 200)
HSL: hsl(170, 78%, 56%)
Luminanz: 0,616

Kontrast & Barrierefreiheit

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

Aa #0E0730 auf #CCFFC1 17,07:1 AAA

Aa #0E0730 auf #38E6C8 12,20:1 AAA

Aa #CCFFC1 auf #042D5B 12,17:1 AAA

Aa #FFAE67 auf #0E0730 10,54:1 AAA

Aa #0E0730 auf #60D946 10,54:1 AAA

Aa #0E0730 auf #ED9EFF 10,02:1 AAA

Aa #042D5B auf #38E6C8 8,70:1 AAA

Aa #60D946 auf #042D5B 7,52:1 AAA

Aa #FFAE67 auf #042D5B 7,51:1 AAA

Aa #7A18AF auf #CCFFC1 7,23:1 AAA

Aa #ED9EFF auf #042D5B 7,14:1 AAA

Aa #5B09F2 auf #CCFFC1 6,74:1 AA

Aa #FF40CC auf #0E0730 6,28:1 AA

Aa #0E0730 auf #029A80 5,44:1 AA

Aa #7A18AF auf #38E6C8 5,17:1 AA

Aa #0E0730 auf #9962FF 5,08:1 AA

Aa #5B09F2 auf #38E6C8 4,82:1 AA

Aa #FF40CC auf #042D5B 4,48:1 AA (großer Text)

Aa #7A18AF auf #60D946 4,47:1 AA (großer Text)

Aa #FFAE67 auf #7A18AF 4,46:1 AA (großer Text)

Aa #7A18AF auf #ED9EFF 4,24:1 AA (großer Text)

Aa #FFAE67 auf #5B09F2 4,16:1 AA (großer Text)

Aa #5B09F2 auf #60D946 4,16:1 AA (großer Text)

Aa #5B09F2 auf #ED9EFF 3,95:1 AA (großer Text)

Aa #029A80 auf #042D5B 3,88:1 AA (großer Text)

Aa #9962FF auf #042D5B 3,62:1 AA (großer Text)

Aa #9962FF auf #CCFFC1 3,36:1 AA (großer Text)

Aa #CCFFC1 auf #029A80 3,14:1 AA (großer Text)

Aa #FF40CC auf #CCFFC1 2,72:1 Nicht bestanden

Aa #FF40CC auf #7A18AF 2,66:1 Nicht bestanden

Aa #0E0730 auf #5B09F2 2,53:1 Nicht bestanden

Aa #FF40CC auf #5B09F2 2,48:1 Nicht bestanden

Aa #9962FF auf #38E6C8 2,40:1 Nicht bestanden

Aa #7A18AF auf #0E0730 2,36:1 Nicht bestanden

Aa #7A18AF auf #029A80 2,30:1 Nicht bestanden

Aa #029A80 auf #38E6C8 2,24:1 Nicht bestanden

Aa #7A18AF auf #9962FF 2,15:1 Nicht bestanden

Aa #5B09F2 auf #029A80 2,15:1 Nicht bestanden

Aa #9962FF auf #60D946 2,08:1 Nicht bestanden

Aa #FFAE67 auf #9962FF 2,07:1 Nicht bestanden

Aa #5B09F2 auf #9962FF 2,00:1 Nicht bestanden

Aa #9962FF auf #ED9EFF 1,97:1 Nicht bestanden

Aa #FFAE67 auf #029A80 1,94:1 Nicht bestanden

Aa #FF40CC auf #38E6C8 1,94:1 Nicht bestanden

Aa #60D946 auf #029A80 1,94:1 Nicht bestanden

Aa #ED9EFF auf #029A80 1,84:1 Nicht bestanden

Aa #5B09F2 auf #042D5B 1,81:1 Nicht bestanden

Aa #ED9EFF auf #CCFFC1 1,70:1 Nicht bestanden

Aa #FFAE67 auf #FF40CC 1,68:1 Nicht bestanden

Aa #FF40CC auf #60D946 1,68:1 Nicht bestanden

Aa #7A18AF auf #042D5B 1,68:1 Nicht bestanden

Aa #FFAE67 auf #CCFFC1 1,62:1 Nicht bestanden

Aa #CCFFC1 auf #60D946 1,62:1 Nicht bestanden

Aa #FF40CC auf #ED9EFF 1,59:1 Nicht bestanden

Aa #0E0730 auf #042D5B 1,40:1 Nicht bestanden

Aa #CCFFC1 auf #38E6C8 1,40:1 Nicht bestanden

Aa #FF40CC auf #9962FF 1,24:1 Nicht bestanden

Aa #ED9EFF auf #38E6C8 1,22:1 Nicht bestanden

Aa #FFAE67 auf #38E6C8 1,16:1 Nicht bestanden

Aa #FF40CC auf #029A80 1,16:1 Nicht bestanden

Aa #60D946 auf #38E6C8 1,16:1 Nicht bestanden

Aa #7A18AF auf #5B09F2 1,07:1 Nicht bestanden

Aa #9962FF auf #029A80 1,07:1 Nicht bestanden

Aa #FFAE67 auf #ED9EFF 1,05:1 Nicht bestanden

Aa #ED9EFF auf #60D946 1,05:1 Nicht bestanden

Aa #FFAE67 auf #60D946 1,00:1 Nicht bestanden

Fizzy12

Fizzy12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen