Brite12

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

Zurück zur Bibliothek

Brite12

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär 12colors brightcolors

Likes 10

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #D30935;
  --c-vibrant-2: #FB8C1A;
  --c-vibrant-3: #F8E930;
  --c-vibrant-4: #0EA145;
  --c-vibrant-5: #17B1F3;
  --c-vibrant-6: #0B2FDD;
  --c-vibrant-7: #5B00AF;
  --c-vibrant-8: #FE4AD3;
  --c-vibrant-9: #EAE9E5;
  --c-vibrant-10: #6F7C9A;
  --c-vibrant-11: #031133;
  --c-vibrant-12: #874501;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Blanco (#EAE9E5) bis zum dunkelsten Ton Squid’s Ink (#031133). Sie vereint Cherry, Laddu Orange, Banana Bombshell, Boogie Blast, Zima Blue, Cold Pack, Aubergine Perl, Mat Dazzle Rose, Blanco, Infinity and Beyond, Squid’s Ink und Chocolate Pancakes in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #EAE9E5 auf #031133 mit 15,27:1.

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

Farben im Detail

Cherry #D30935

RGB: rgb(211, 9, 53)
HSL: hsl(347, 92%, 43%)
Luminanz: 0,143

Laddu Orange #FB8C1A

RGB: rgb(251, 140, 26)
HSL: hsl(30, 97%, 54%)
Luminanz: 0,393

Banana Bombshell #F8E930

RGB: rgb(248, 233, 48)
HSL: hsl(56, 93%, 58%)
Luminanz: 0,785

Boogie Blast #0EA145

RGB: rgb(14, 161, 69)
HSL: hsl(142, 84%, 34%)
Luminanz: 0,260

Zima Blue #17B1F3

RGB: rgb(23, 177, 243)
HSL: hsl(198, 90%, 52%)
Luminanz: 0,381

Cold Pack #0B2FDD

RGB: rgb(11, 47, 221)
HSL: hsl(230, 91%, 45%)
Luminanz: 0,073

Aubergine Perl #5B00AF

RGB: rgb(91, 0, 175)
HSL: hsl(271, 100%, 34%)
Luminanz: 0,053

Mat Dazzle Rose #FE4AD3

RGB: rgb(254, 74, 211)
HSL: hsl(314, 99%, 64%)
Luminanz: 0,307

Blanco #EAE9E5

RGB: rgb(234, 233, 229)
HSL: hsl(48, 11%, 91%)
Luminanz: 0,814

Infinity and Beyond #6F7C9A

RGB: rgb(111, 124, 154)
HSL: hsl(222, 18%, 52%)
Luminanz: 0,201

Squid’s Ink #031133

RGB: rgb(3, 17, 51)
HSL: hsl(223, 89%, 11%)
Luminanz: 0,007

Chocolate Pancakes #874501

RGB: rgb(135, 69, 1)
HSL: hsl(30, 99%, 27%)
Luminanz: 0,094

Kontrast & Barrierefreiheit

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

Aa #EAE9E5 auf #031133 15,27:1 AAA

Aa #F8E930 auf #031133 14,75:1 AAA

Aa #5B00AF auf #EAE9E5 8,38:1 AAA

Aa #F8E930 auf #5B00AF 8,09:1 AAA

Aa #FB8C1A auf #031133 7,83:1 AAA

Aa #17B1F3 auf #031133 7,62:1 AAA

Aa #0B2FDD auf #EAE9E5 7,01:1 AAA

Aa #F8E930 auf #0B2FDD 6,77:1 AA

Aa #FE4AD3 auf #031133 6,30:1 AA

Aa #EAE9E5 auf #874501 6,00:1 AA

Aa #F8E930 auf #874501 5,79:1 AA

Aa #0EA145 auf #031133 5,48:1 AA

Aa #D30935 auf #EAE9E5 4,48:1 AA (großer Text)

Aa #6F7C9A auf #031133 4,44:1 AA (großer Text)

Aa #D30935 auf #F8E930 4,32:1 AA (großer Text)

Aa #FB8C1A auf #5B00AF 4,30:1 AA (großer Text)

Aa #17B1F3 auf #5B00AF 4,18:1 AA (großer Text)

Aa #FB8C1A auf #0B2FDD 3,60:1 AA (großer Text)

Aa #17B1F3 auf #0B2FDD 3,50:1 AA (großer Text)

Aa #5B00AF auf #FE4AD3 3,46:1 AA (großer Text)

Aa #EAE9E5 auf #6F7C9A 3,44:1 AA (großer Text)

Aa #D30935 auf #031133 3,41:1 AA (großer Text)

Aa #F8E930 auf #6F7C9A 3,32:1 AA (großer Text)

Aa #FB8C1A auf #874501 3,08:1 AA (großer Text)

Aa #0EA145 auf #5B00AF 3,01:1 AA (großer Text)

Aa #17B1F3 auf #874501 2,99:1 Nicht bestanden

Aa #0B2FDD auf #FE4AD3 2,89:1 Nicht bestanden

Aa #0EA145 auf #EAE9E5 2,79:1 Nicht bestanden

Aa #F8E930 auf #0EA145 2,69:1 Nicht bestanden

Aa #031133 auf #874501 2,55:1 Nicht bestanden

Aa #0EA145 auf #0B2FDD 2,52:1 Nicht bestanden

Aa #FE4AD3 auf #874501 2,48:1 Nicht bestanden

Aa #5B00AF auf #6F7C9A 2,44:1 Nicht bestanden

Aa #FE4AD3 auf #EAE9E5 2,42:1 Nicht bestanden

Aa #F8E930 auf #FE4AD3 2,34:1 Nicht bestanden

Aa #D30935 auf #FB8C1A 2,30:1 Nicht bestanden

Aa #D30935 auf #17B1F3 2,23:1 Nicht bestanden

Aa #0B2FDD auf #031133 2,18:1 Nicht bestanden

Aa #0EA145 auf #874501 2,15:1 Nicht bestanden

Aa #0B2FDD auf #6F7C9A 2,04:1 Nicht bestanden

Aa #17B1F3 auf #EAE9E5 2,01:1 Nicht bestanden

Aa #FB8C1A auf #EAE9E5 1,95:1 Nicht bestanden

Aa #F8E930 auf #17B1F3 1,94:1 Nicht bestanden

Aa #FB8C1A auf #F8E930 1,88:1 Nicht bestanden

Aa #D30935 auf #5B00AF 1,87:1 Nicht bestanden

Aa #D30935 auf #FE4AD3 1,85:1 Nicht bestanden

Aa #5B00AF auf #031133 1,82:1 Nicht bestanden

Aa #FB8C1A auf #6F7C9A 1,76:1 Nicht bestanden

Aa #6F7C9A auf #874501 1,74:1 Nicht bestanden

Aa #17B1F3 auf #6F7C9A 1,72:1 Nicht bestanden

Aa #D30935 auf #0EA145 1,61:1 Nicht bestanden

Aa #D30935 auf #0B2FDD 1,57:1 Nicht bestanden

Aa #FB8C1A auf #0EA145 1,43:1 Nicht bestanden

Aa #FE4AD3 auf #6F7C9A 1,42:1 Nicht bestanden

Aa #5B00AF auf #874501 1,40:1 Nicht bestanden

Aa #0EA145 auf #17B1F3 1,39:1 Nicht bestanden

Aa #D30935 auf #874501 1,34:1 Nicht bestanden

Aa #D30935 auf #6F7C9A 1,30:1 Nicht bestanden

Aa #FB8C1A auf #FE4AD3 1,24:1 Nicht bestanden

Aa #0EA145 auf #6F7C9A 1,23:1 Nicht bestanden

Aa #17B1F3 auf #FE4AD3 1,21:1 Nicht bestanden

Aa #0B2FDD auf #5B00AF 1,19:1 Nicht bestanden

Aa #0B2FDD auf #874501 1,17:1 Nicht bestanden

Aa #0EA145 auf #FE4AD3 1,15:1 Nicht bestanden

Aa #F8E930 auf #EAE9E5 1,04:1 Nicht bestanden

Aa #FB8C1A auf #17B1F3 1,03:1 Nicht bestanden

Brite12

Brite12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen