RYB 12

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

Zurück zur Bibliothek

RYB 12

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär warm rainbow

Likes 28

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #362338;
  --c-vibrant-2: #463C71;
  --c-vibrant-3: #477BA4;
  --c-vibrant-4: #7CC667;
  --c-vibrant-5: #DDF166;
  --c-vibrant-6: #FFF7CF;
  --c-vibrant-7: #FFF2AF;
  --c-vibrant-8: #FFDC78;
  --c-vibrant-9: #FF5168;
  --c-vibrant-10: #E83DAC;
  --c-vibrant-11: #D20962;
  --c-vibrant-12: #AB0030;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Baja White (#FFF7CF) bis zum dunkelsten Ton Fat Tuesday (#362338). Sie vereint Fat Tuesday, Opera Blue, Zenith, Energise, Mindaro, Baja White, Paper Tiger, Sunlit, Festive Fennec, Pink Bite, Xīpe Totēc Red und Chernobog 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 #362338 auf #FFF7CF mit 13,38:1.

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

Farben im Detail

Fat Tuesday #362338

RGB: rgb(54, 35, 56)
HSL: hsl(294, 23%, 18%)
Luminanz: 0,023

Opera Blue #463C71

RGB: rgb(70, 60, 113)
HSL: hsl(251, 31%, 34%)
Luminanz: 0,057

Zenith #477BA4

RGB: rgb(71, 123, 164)
HSL: hsl(206, 40%, 46%)
Luminanz: 0,182

Energise #7CC667

RGB: rgb(124, 198, 103)
HSL: hsl(107, 45%, 59%)
Luminanz: 0,457

Mindaro #DDF166

RGB: rgb(221, 241, 102)
HSL: hsl(69, 83%, 67%)
Luminanz: 0,792

Baja White #FFF7CF

RGB: rgb(255, 247, 207)
HSL: hsl(50, 100%, 91%)
Luminanz: 0,923

Paper Tiger #FFF2AF

RGB: rgb(255, 242, 175)
HSL: hsl(50, 100%, 84%)
Luminanz: 0,879

Sunlit #FFDC78

RGB: rgb(255, 220, 120)
HSL: hsl(44, 100%, 74%)
Luminanz: 0,738

Festive Fennec #FF5168

RGB: rgb(255, 81, 104)
HSL: hsl(352, 100%, 66%)
Luminanz: 0,281

Pink Bite #E83DAC

RGB: rgb(232, 61, 172)
HSL: hsl(321, 79%, 57%)
Luminanz: 0,235

Xīpe Totēc Red #D20962

RGB: rgb(210, 9, 98)
HSL: hsl(333, 92%, 43%)
Luminanz: 0,148

Chernobog #AB0030

RGB: rgb(171, 0, 48)
HSL: hsl(343, 100%, 34%)
Luminanz: 0,089

Kontrast & Barrierefreiheit

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

Aa #362338 auf #FFF7CF 13,38:1 AAA

Aa #362338 auf #FFF2AF 12,77:1 AAA

Aa #362338 auf #DDF166 11,58:1 AAA

Aa #362338 auf #FFDC78 10,84:1 AAA

Aa #463C71 auf #FFF7CF 9,07:1 AAA

Aa #463C71 auf #FFF2AF 8,66:1 AAA

Aa #463C71 auf #DDF166 7,85:1 AAA

Aa #463C71 auf #FFDC78 7,35:1 AAA

Aa #FFF7CF auf #AB0030 7,01:1 AAA

Aa #362338 auf #7CC667 6,97:1 AA

Aa #FFF2AF auf #AB0030 6,69:1 AA

Aa #DDF166 auf #AB0030 6,07:1 AA

Aa #FFDC78 auf #AB0030 5,68:1 AA

Aa #FFF7CF auf #D20962 4,92:1 AA

Aa #463C71 auf #7CC667 4,72:1 AA

Aa #FFF2AF auf #D20962 4,69:1 AA

Aa #362338 auf #FF5168 4,56:1 AA

Aa #DDF166 auf #D20962 4,26:1 AA (großer Text)

Aa #477BA4 auf #FFF7CF 4,20:1 AA (großer Text)

Aa #477BA4 auf #FFF2AF 4,01:1 AA (großer Text)

Aa #FFDC78 auf #D20962 3,98:1 AA (großer Text)

Aa #362338 auf #E83DAC 3,92:1 AA (großer Text)

Aa #7CC667 auf #AB0030 3,65:1 AA (großer Text)

Aa #477BA4 auf #DDF166 3,63:1 AA (großer Text)

Aa #FFF7CF auf #E83DAC 3,42:1 AA (großer Text)

Aa #477BA4 auf #FFDC78 3,40:1 AA (großer Text)

Aa #FFF2AF auf #E83DAC 3,26:1 AA (großer Text)

Aa #362338 auf #477BA4 3,19:1 AA (großer Text)

Aa #463C71 auf #FF5168 3,09:1 AA (großer Text)

Aa #DDF166 auf #E83DAC 2,96:1 Nicht bestanden

Aa #FFF7CF auf #FF5168 2,94:1 Nicht bestanden

Aa #FFF2AF auf #FF5168 2,80:1 Nicht bestanden

Aa #FFDC78 auf #E83DAC 2,77:1 Nicht bestanden

Aa #362338 auf #D20962 2,72:1 Nicht bestanden

Aa #463C71 auf #E83DAC 2,65:1 Nicht bestanden

Aa #7CC667 auf #D20962 2,56:1 Nicht bestanden

Aa #DDF166 auf #FF5168 2,54:1 Nicht bestanden

Aa #FF5168 auf #AB0030 2,39:1 Nicht bestanden

Aa #FFDC78 auf #FF5168 2,38:1 Nicht bestanden

Aa #477BA4 auf #7CC667 2,18:1 Nicht bestanden

Aa #463C71 auf #477BA4 2,16:1 Nicht bestanden

Aa #E83DAC auf #AB0030 2,05:1 Nicht bestanden

Aa #7CC667 auf #FFF7CF 1,92:1 Nicht bestanden

Aa #362338 auf #AB0030 1,91:1 Nicht bestanden

Aa #463C71 auf #D20962 1,84:1 Nicht bestanden

Aa #7CC667 auf #FFF2AF 1,83:1 Nicht bestanden

Aa #7CC667 auf #E83DAC 1,78:1 Nicht bestanden

Aa #FF5168 auf #D20962 1,68:1 Nicht bestanden

Aa #477BA4 auf #AB0030 1,67:1 Nicht bestanden

Aa #7CC667 auf #DDF166 1,66:1 Nicht bestanden

Aa #7CC667 auf #FFDC78 1,56:1 Nicht bestanden

Aa #7CC667 auf #FF5168 1,53:1 Nicht bestanden

Aa #362338 auf #463C71 1,48:1 Nicht bestanden

Aa #E83DAC auf #D20962 1,44:1 Nicht bestanden

Aa #477BA4 auf #FF5168 1,43:1 Nicht bestanden

Aa #D20962 auf #AB0030 1,43:1 Nicht bestanden

Aa #463C71 auf #AB0030 1,29:1 Nicht bestanden

Aa #477BA4 auf #E83DAC 1,23:1 Nicht bestanden

Aa #FFF7CF auf #FFDC78 1,23:1 Nicht bestanden

Aa #FFF2AF auf #FFDC78 1,18:1 Nicht bestanden

Aa #477BA4 auf #D20962 1,17:1 Nicht bestanden

Aa #FF5168 auf #E83DAC 1,16:1 Nicht bestanden

Aa #DDF166 auf #FFF7CF 1,15:1 Nicht bestanden

Aa #DDF166 auf #FFF2AF 1,10:1 Nicht bestanden

Aa #DDF166 auf #FFDC78 1,07:1 Nicht bestanden

Aa #FFF7CF auf #FFF2AF 1,05:1 Nicht bestanden

RYB 12

RYB 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen