UUU

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

Zurück zur Bibliothek

UUU

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

Bearbeiten

Lebendig 12 Farben Kühl Gemischt Komplementär bright 12 internet 12vember

Likes 40

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #33DDEE;
  --c-vibrant-2: #1188CC;
  --c-vibrant-3: #112299;
  --c-vibrant-4: #5533AA;
  --c-vibrant-5: #FF44EE;
  --c-vibrant-6: #FFFFFF;
  --c-vibrant-7: #EECC44;
  --c-vibrant-8: #EE2211;
  --c-vibrant-9: #552233;
  --c-vibrant-10: #000011;
  --c-vibrant-11: #668877;
  --c-vibrant-12: #88BB22;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Benthic Black (#000011). Sie vereint Cold Heights, Way Beyond the Blue, Deepsea Kraken, Royalty, Actinic Light, White, Montezuma Gold, Prehistoric Meteor, Carambar, Benthic Black, Green Adirondack und Cocktail Green in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 19 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #000011 mit 20,83:1.

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

Farben im Detail

Cold Heights #33DDEE

RGB: rgb(51, 221, 238)
HSL: hsl(185, 85%, 57%)
Luminanz: 0,586

Way Beyond the Blue #1188CC

RGB: rgb(17, 136, 204)
HSL: hsl(202, 85%, 43%)
Luminanz: 0,221

Deepsea Kraken #112299

RGB: rgb(17, 34, 153)
HSL: hsl(233, 80%, 33%)
Luminanz: 0,036

Royalty #5533AA

RGB: rgb(85, 51, 170)
HSL: hsl(257, 54%, 43%)
Luminanz: 0,072

Actinic Light #FF44EE

RGB: rgb(255, 68, 238)
HSL: hsl(305, 100%, 63%)
Luminanz: 0,316

White #FFFFFF

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

Montezuma Gold #EECC44

RGB: rgb(238, 204, 68)
HSL: hsl(48, 83%, 60%)
Luminanz: 0,618

Prehistoric Meteor #EE2211

RGB: rgb(238, 34, 17)
HSL: hsl(5, 87%, 50%)
Luminanz: 0,194

Carambar #552233

RGB: rgb(85, 34, 51)
HSL: hsl(340, 43%, 23%)
Luminanz: 0,033

Benthic Black #000011

RGB: rgb(0, 0, 17)
HSL: hsl(240, 100%, 3%)
Luminanz: 0,000

Green Adirondack #668877

RGB: rgb(102, 136, 119)
HSL: hsl(150, 14%, 47%)
Luminanz: 0,218

Cocktail Green #88BB22

RGB: rgb(136, 187, 34)
HSL: hsl(80, 69%, 43%)
Luminanz: 0,409

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #000011 20,83:1 AAA

Aa #EECC44 auf #000011 13,25:1 AAA

Aa #FFFFFF auf #552233 12,63:1 AAA

Aa #33DDEE auf #000011 12,62:1 AAA

Aa #112299 auf #FFFFFF 12,26:1 AAA

Aa #000011 auf #88BB22 9,10:1 AAA

Aa #5533AA auf #FFFFFF 8,61:1 AAA

Aa #EECC44 auf #552233 8,03:1 AAA

Aa #112299 auf #EECC44 7,80:1 AAA

Aa #33DDEE auf #552233 7,65:1 AAA

Aa #33DDEE auf #112299 7,43:1 AAA

Aa #FF44EE auf #000011 7,25:1 AAA

Aa #552233 auf #88BB22 5,52:1 AA

Aa #5533AA auf #EECC44 5,47:1 AA

Aa #1188CC auf #000011 5,37:1 AA

Aa #112299 auf #88BB22 5,36:1 AA

Aa #000011 auf #668877 5,31:1 AA

Aa #33DDEE auf #5533AA 5,21:1 AA

Aa #EE2211 auf #000011 4,83:1 AA

Aa #FF44EE auf #552233 4,40:1 AA (großer Text)

Aa #FFFFFF auf #EE2211 4,31:1 AA (großer Text)

Aa #112299 auf #FF44EE 4,27:1 AA (großer Text)

Aa #FFFFFF auf #668877 3,92:1 AA (großer Text)

Aa #1188CC auf #FFFFFF 3,88:1 AA (großer Text)

Aa #5533AA auf #88BB22 3,76:1 AA (großer Text)

Aa #1188CC auf #552233 3,26:1 AA (großer Text)

Aa #552233 auf #668877 3,22:1 AA (großer Text)

Aa #1188CC auf #112299 3,16:1 AA (großer Text)

Aa #112299 auf #668877 3,13:1 AA (großer Text)

Aa #5533AA auf #FF44EE 3,00:1 AA (großer Text)

Aa #EE2211 auf #552233 2,93:1 Nicht bestanden

Aa #FF44EE auf #FFFFFF 2,87:1 Nicht bestanden

Aa #112299 auf #EE2211 2,84:1 Nicht bestanden

Aa #EECC44 auf #EE2211 2,74:1 Nicht bestanden

Aa #33DDEE auf #EE2211 2,61:1 Nicht bestanden

Aa #EECC44 auf #668877 2,50:1 Nicht bestanden

Aa #1188CC auf #EECC44 2,47:1 Nicht bestanden

Aa #5533AA auf #000011 2,42:1 Nicht bestanden

Aa #33DDEE auf #668877 2,38:1 Nicht bestanden

Aa #33DDEE auf #1188CC 2,35:1 Nicht bestanden

Aa #FFFFFF auf #88BB22 2,29:1 Nicht bestanden

Aa #1188CC auf #5533AA 2,22:1 Nicht bestanden

Aa #5533AA auf #668877 2,19:1 Nicht bestanden

Aa #5533AA auf #EE2211 2,00:1 Nicht bestanden

Aa #EE2211 auf #88BB22 1,88:1 Nicht bestanden

Aa #FF44EE auf #EECC44 1,83:1 Nicht bestanden

Aa #33DDEE auf #FF44EE 1,74:1 Nicht bestanden

Aa #668877 auf #88BB22 1,71:1 Nicht bestanden

Aa #112299 auf #000011 1,70:1 Nicht bestanden

Aa #1188CC auf #88BB22 1,69:1 Nicht bestanden

Aa #33DDEE auf #FFFFFF 1,65:1 Nicht bestanden

Aa #552233 auf #000011 1,65:1 Nicht bestanden

Aa #FFFFFF auf #EECC44 1,57:1 Nicht bestanden

Aa #FF44EE auf #EE2211 1,50:1 Nicht bestanden

Aa #5533AA auf #552233 1,47:1 Nicht bestanden

Aa #EECC44 auf #88BB22 1,46:1 Nicht bestanden

Aa #112299 auf #5533AA 1,42:1 Nicht bestanden

Aa #33DDEE auf #88BB22 1,39:1 Nicht bestanden

Aa #FF44EE auf #668877 1,37:1 Nicht bestanden

Aa #1188CC auf #FF44EE 1,35:1 Nicht bestanden

Aa #FF44EE auf #88BB22 1,25:1 Nicht bestanden

Aa #1188CC auf #EE2211 1,11:1 Nicht bestanden

Aa #EE2211 auf #668877 1,10:1 Nicht bestanden

Aa #33DDEE auf #EECC44 1,05:1 Nicht bestanden

Aa #112299 auf #552233 1,03:1 Nicht bestanden

Aa #1188CC auf #668877 1,01:1 Nicht bestanden

UUU

UUU

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen