Firestorm

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

Zurück zur Bibliothek

Firestorm

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

Bearbeiten

Lebendig 9 Farben Warm Gemischt Komplementär artist theartistjulian

Likes 50

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #1B2032;
  --c-vibrant-2: #46344A;
  --c-vibrant-3: #F95E3E;
  --c-vibrant-4: #FD4B35;
  --c-vibrant-5: #EC6756;
  --c-vibrant-6: #FF845F;
  --c-vibrant-7: #FFA15F;
  --c-vibrant-8: #FDDE85;
  --c-vibrant-9: #FFECB3;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton Dear Melissa (#FFECB3) bis zum dunkelsten Ton Eclipse Elixir (#1B2032). Sie vereint Eclipse Elixir, Purple Verbena, Vermilion Orange, Hotspot, Flattered Flamingo, Pink Fire, Orange Spice, Yellow Corn und Dear Melissa in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #1B2032 auf #FFECB3 mit 13,78:1.

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

Farben im Detail

Eclipse Elixir #1B2032

RGB: rgb(27, 32, 50)
HSL: hsl(227, 30%, 15%)
Luminanz: 0,015

Purple Verbena #46344A

RGB: rgb(70, 52, 74)
HSL: hsl(289, 17%, 25%)
Luminanz: 0,043

Vermilion Orange #F95E3E

RGB: rgb(249, 94, 62)
HSL: hsl(10, 94%, 61%)
Luminanz: 0,285

Hotspot #FD4B35

RGB: rgb(253, 75, 53)
HSL: hsl(7, 98%, 60%)
Luminanz: 0,262

Flattered Flamingo #EC6756

RGB: rgb(236, 103, 86)
HSL: hsl(7, 80%, 63%)
Luminanz: 0,282

Pink Fire #FF845F

RGB: rgb(255, 132, 95)
HSL: hsl(14, 100%, 69%)
Luminanz: 0,386

Orange Spice #FFA15F

RGB: rgb(255, 161, 95)
HSL: hsl(25, 100%, 69%)
Luminanz: 0,476

Yellow Corn #FDDE85

RGB: rgb(253, 222, 133)
HSL: hsl(45, 97%, 76%)
Luminanz: 0,748

Dear Melissa #FFECB3

RGB: rgb(255, 236, 179)
HSL: hsl(45, 100%, 85%)
Luminanz: 0,845

Kontrast & Barrierefreiheit

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

Aa #1B2032 auf #FFECB3 13,78:1 AAA

Aa #1B2032 auf #FDDE85 12,29:1 AAA

Aa #46344A auf #FFECB3 9,67:1 AAA

Aa #46344A auf #FDDE85 8,63:1 AAA

Aa #1B2032 auf #FFA15F 8,09:1 AAA

Aa #1B2032 auf #FF845F 6,71:1 AA

Aa #46344A auf #FFA15F 5,68:1 AA

Aa #1B2032 auf #F95E3E 5,16:1 AA

Aa #1B2032 auf #EC6756 5,11:1 AA

Aa #1B2032 auf #FD4B35 4,80:1 AA

Aa #46344A auf #FF845F 4,71:1 AA

Aa #46344A auf #F95E3E 3,62:1 AA (großer Text)

Aa #46344A auf #EC6756 3,59:1 AA (großer Text)

Aa #46344A auf #FD4B35 3,37:1 AA (großer Text)

Aa #FD4B35 auf #FFECB3 2,87:1 Nicht bestanden

Aa #EC6756 auf #FFECB3 2,70:1 Nicht bestanden

Aa #F95E3E auf #FFECB3 2,67:1 Nicht bestanden

Aa #FD4B35 auf #FDDE85 2,56:1 Nicht bestanden

Aa #EC6756 auf #FDDE85 2,40:1 Nicht bestanden

Aa #F95E3E auf #FDDE85 2,38:1 Nicht bestanden

Aa #FF845F auf #FFECB3 2,05:1 Nicht bestanden

Aa #FF845F auf #FDDE85 1,83:1 Nicht bestanden

Aa #FFA15F auf #FFECB3 1,70:1 Nicht bestanden

Aa #FD4B35 auf #FFA15F 1,69:1 Nicht bestanden

Aa #EC6756 auf #FFA15F 1,58:1 Nicht bestanden

Aa #F95E3E auf #FFA15F 1,57:1 Nicht bestanden

Aa #FFA15F auf #FDDE85 1,52:1 Nicht bestanden

Aa #1B2032 auf #46344A 1,42:1 Nicht bestanden

Aa #FD4B35 auf #FF845F 1,40:1 Nicht bestanden

Aa #EC6756 auf #FF845F 1,31:1 Nicht bestanden

Aa #F95E3E auf #FF845F 1,30:1 Nicht bestanden

Aa #FF845F auf #FFA15F 1,21:1 Nicht bestanden

Aa #FDDE85 auf #FFECB3 1,12:1 Nicht bestanden

Aa #F95E3E auf #FD4B35 1,07:1 Nicht bestanden

Aa #FD4B35 auf #EC6756 1,07:1 Nicht bestanden

Aa #F95E3E auf #EC6756 1,01:1 Nicht bestanden

Firestorm

Firestorm

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen