STEAMPUNK 9

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

Zurück zur Bibliothek

STEAMPUNK 9

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

Bearbeiten

Erdig 9 Farben Warm Gemischt Komplementär steampunk copper sunny solar

Likes 19

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #121315;
  --c-earthy-2: #282828;
  --c-earthy-3: #084C5A;
  --c-earthy-4: #4D9484;
  --c-earthy-5: #99BB88;
  --c-earthy-6: #FEE9BA;
  --c-earthy-7: #FFCB8F;
  --c-earthy-8: #FE9150;
  --c-earthy-9: #FE6925;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton Sun-Kissed Yellow (#FEE9BA) bis zum dunkelsten Ton Kettle Black (#121315). Sie vereint Kettle Black, Dire Wolf, Watercolour Blue, Crisp Lettuce, Seafoam Green, Sun-Kissed Yellow, Goldenrod Yellow, Boredom Buster und Sparrow’s Fire in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 13 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #121315 auf #FEE9BA mit 15,56:1.

Bodenständige, natürliche Töne – passend für nachhaltige und Bio-Marken, Cafés, Outdoor-Ausrüstung und warme redaktionelle Typografie.

Farben im Detail

Kettle Black #121315

RGB: rgb(18, 19, 21)
HSL: hsl(220, 8%, 8%)
Luminanz: 0,007

Dire Wolf #282828

RGB: rgb(40, 40, 40)
HSL: hsl(0, 0%, 16%)
Luminanz: 0,021

Watercolour Blue #084C5A

RGB: rgb(8, 76, 90)
HSL: hsl(190, 84%, 19%)
Luminanz: 0,060

Crisp Lettuce #4D9484

RGB: rgb(77, 148, 132)
HSL: hsl(166, 32%, 44%)
Luminanz: 0,244

Seafoam Green #99BB88

RGB: rgb(153, 187, 136)
HSL: hsl(100, 27%, 63%)
Luminanz: 0,441

Sun-Kissed Yellow #FEE9BA

RGB: rgb(254, 233, 186)
HSL: hsl(41, 97%, 86%)
Luminanz: 0,829

Goldenrod Yellow #FFCB8F

RGB: rgb(255, 203, 143)
HSL: hsl(32, 100%, 78%)
Luminanz: 0,660

Boredom Buster #FE9150

RGB: rgb(254, 145, 80)
HSL: hsl(22, 99%, 65%)
Luminanz: 0,419

Sparrow’s Fire #FE6925

RGB: rgb(254, 105, 37)
HSL: hsl(19, 99%, 57%)
Luminanz: 0,313

Kontrast & Barrierefreiheit

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

Aa #121315 auf #FEE9BA 15,56:1 AAA

Aa #121315 auf #FFCB8F 12,56:1 AAA

Aa #282828 auf #FEE9BA 12,34:1 AAA

Aa #282828 auf #FFCB8F 9,96:1 AAA

Aa #121315 auf #99BB88 8,69:1 AAA

Aa #121315 auf #FE9150 8,30:1 AAA

Aa #084C5A auf #FEE9BA 8,02:1 AAA

Aa #282828 auf #99BB88 6,89:1 AA

Aa #282828 auf #FE9150 6,59:1 AA

Aa #084C5A auf #FFCB8F 6,47:1 AA

Aa #121315 auf #FE6925 6,43:1 AA

Aa #121315 auf #4D9484 5,21:1 AA

Aa #282828 auf #FE6925 5,10:1 AA

Aa #084C5A auf #99BB88 4,48:1 AA (großer Text)

Aa #084C5A auf #FE9150 4,28:1 AA (großer Text)

Aa #282828 auf #4D9484 4,13:1 AA (großer Text)

Aa #084C5A auf #FE6925 3,31:1 AA (großer Text)

Aa #4D9484 auf #FEE9BA 2,99:1 Nicht bestanden

Aa #084C5A auf #4D9484 2,68:1 Nicht bestanden

Aa #FEE9BA auf #FE6925 2,42:1 Nicht bestanden

Aa #4D9484 auf #FFCB8F 2,41:1 Nicht bestanden

Aa #FFCB8F auf #FE6925 1,95:1 Nicht bestanden

Aa #121315 auf #084C5A 1,94:1 Nicht bestanden

Aa #FEE9BA auf #FE9150 1,87:1 Nicht bestanden

Aa #99BB88 auf #FEE9BA 1,79:1 Nicht bestanden

Aa #4D9484 auf #99BB88 1,67:1 Nicht bestanden

Aa #4D9484 auf #FE9150 1,59:1 Nicht bestanden

Aa #282828 auf #084C5A 1,54:1 Nicht bestanden

Aa #FFCB8F auf #FE9150 1,51:1 Nicht bestanden

Aa #99BB88 auf #FFCB8F 1,45:1 Nicht bestanden

Aa #99BB88 auf #FE6925 1,35:1 Nicht bestanden

Aa #FE9150 auf #FE6925 1,29:1 Nicht bestanden

Aa #121315 auf #282828 1,26:1 Nicht bestanden

Aa #FEE9BA auf #FFCB8F 1,24:1 Nicht bestanden

Aa #4D9484 auf #FE6925 1,23:1 Nicht bestanden

Aa #99BB88 auf #FE9150 1,05:1 Nicht bestanden

STEAMPUNK 9

STEAMPUNK 9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen