ST 8 Phoenix

Palette mit 8 Farben · Warm · Gemischt · Harmonie: Analog

Zurück zur Bibliothek

ST 8 Phoenix

Palette mit 8 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Analog

Bearbeiten

Lebendig 8 Farben Warm Gemischt Analog orange artist fire red

Likes 110

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #330D10;
  --c-vibrant-2: #4D130F;
  --c-vibrant-3: #732017;
  --c-vibrant-4: #992817;
  --c-vibrant-5: #BF481D;
  --c-vibrant-6: #D97E16;
  --c-vibrant-7: #E5BE22;
  --c-vibrant-8: #F2E749;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Yellow Petal (#F2E749) bis zum dunkelsten Ton Black Rooster (#330D10). Sie vereint Black Rooster, Minotaur Hide, Tempered Chocolate, Tabasco, Red Panda, Sports Fan, Durian Yellow und Yellow Petal in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #330D10 auf #F2E749 mit 13,52:1.

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

Farben im Detail

Black Rooster #330D10

RGB: rgb(51, 13, 16)
HSL: hsl(355, 59%, 13%)
Luminanz: 0,010

Minotaur Hide #4D130F

RGB: rgb(77, 19, 15)
HSL: hsl(4, 67%, 18%)
Luminanz: 0,021

Tempered Chocolate #732017

RGB: rgb(115, 32, 23)
HSL: hsl(6, 67%, 27%)
Luminanz: 0,047

Tabasco #992817

RGB: rgb(153, 40, 23)
HSL: hsl(8, 74%, 35%)
Luminanz: 0,084

Red Panda #BF481D

RGB: rgb(191, 72, 29)
HSL: hsl(16, 74%, 43%)
Luminanz: 0,158

Sports Fan #D97E16

RGB: rgb(217, 126, 22)
HSL: hsl(32, 82%, 47%)
Luminanz: 0,297

Durian Yellow #E5BE22

RGB: rgb(229, 190, 34)
HSL: hsl(48, 79%, 52%)
Luminanz: 0,536

Yellow Petal #F2E749

RGB: rgb(242, 231, 73)
HSL: hsl(56, 87%, 62%)
Luminanz: 0,765

Kontrast & Barrierefreiheit

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

Aa #330D10 auf #F2E749 13,52:1 AAA

Aa #4D130F auf #F2E749 11,52:1 AAA

Aa #330D10 auf #E5BE22 9,72:1 AAA

Aa #732017 auf #F2E749 8,37:1 AAA

Aa #4D130F auf #E5BE22 8,28:1 AAA

Aa #992817 auf #F2E749 6,10:1 AA

Aa #732017 auf #E5BE22 6,02:1 AA

Aa #330D10 auf #D97E16 5,76:1 AA

Aa #4D130F auf #D97E16 4,91:1 AA

Aa #992817 auf #E5BE22 4,39:1 AA (großer Text)

Aa #BF481D auf #F2E749 3,92:1 AA (großer Text)

Aa #732017 auf #D97E16 3,57:1 AA (großer Text)

Aa #330D10 auf #BF481D 3,45:1 AA (großer Text)

Aa #4D130F auf #BF481D 2,94:1 Nicht bestanden

Aa #BF481D auf #E5BE22 2,82:1 Nicht bestanden

Aa #992817 auf #D97E16 2,60:1 Nicht bestanden

Aa #D97E16 auf #F2E749 2,35:1 Nicht bestanden

Aa #330D10 auf #992817 2,21:1 Nicht bestanden

Aa #732017 auf #BF481D 2,14:1 Nicht bestanden

Aa #4D130F auf #992817 1,89:1 Nicht bestanden

Aa #D97E16 auf #E5BE22 1,69:1 Nicht bestanden

Aa #BF481D auf #D97E16 1,67:1 Nicht bestanden

Aa #330D10 auf #732017 1,62:1 Nicht bestanden

Aa #992817 auf #BF481D 1,56:1 Nicht bestanden

Aa #E5BE22 auf #F2E749 1,39:1 Nicht bestanden

Aa #4D130F auf #732017 1,38:1 Nicht bestanden

Aa #732017 auf #992817 1,37:1 Nicht bestanden

Aa #330D10 auf #4D130F 1,17:1 Nicht bestanden

ST 8 Phoenix

ST 8 Phoenix

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen