Terracarbon

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

Zurück zur Bibliothek

Terracarbon

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Analog polyphrog retro carbon

Likes 15

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #555500;
  --c-vibrant-2: #888800;
  --c-vibrant-3: #FFAA55;
  --c-vibrant-4: #AA5500;
  --c-vibrant-5: #550000;
  --c-vibrant-6: #AA0000;
  --c-vibrant-7: #FF5555;
  --c-vibrant-8: #FFFFFF;
  --c-vibrant-9: #AAAAAA;
  --c-vibrant-10: #555555;
  --c-vibrant-11: #000000;
  --c-vibrant-12: #0055AA;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Douro, Drably Olive, Soul Side, Tijolo, Soooo Bloody, Heartbeat, Fluorescent Red, White, Dhūsar Grey, Stone Cold, Black und Blue Lobster in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 14 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #000000 mit 21:1.

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

Farben im Detail

Douro #555500

RGB: rgb(85, 85, 0)
HSL: hsl(60, 100%, 17%)
Luminanz: 0,084

Drably Olive #888800

RGB: rgb(136, 136, 0)
HSL: hsl(60, 100%, 27%)
Luminanz: 0,228

Soul Side #FFAA55

RGB: rgb(255, 170, 85)
HSL: hsl(30, 100%, 67%)
Luminanz: 0,507

Tijolo #AA5500

RGB: rgb(170, 85, 0)
HSL: hsl(30, 100%, 33%)
Luminanz: 0,150

Soooo Bloody #550000

RGB: rgb(85, 0, 0)
HSL: hsl(0, 100%, 17%)
Luminanz: 0,019

Heartbeat #AA0000

RGB: rgb(170, 0, 0)
HSL: hsl(0, 100%, 33%)
Luminanz: 0,086

Fluorescent Red #FF5555

RGB: rgb(255, 85, 85)
HSL: hsl(0, 100%, 67%)
Luminanz: 0,284

White #FFFFFF

RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Luminanz: 1,000

Dhūsar Grey #AAAAAA

RGB: rgb(170, 170, 170)
HSL: hsl(0, 0%, 67%)
Luminanz: 0,402

Stone Cold #555555

RGB: rgb(85, 85, 85)
HSL: hsl(0, 0%, 33%)
Luminanz: 0,091

Black #000000

RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
Luminanz: 0,000

Blue Lobster #0055AA

RGB: rgb(0, 85, 170)
HSL: hsl(210, 100%, 33%)
Luminanz: 0,094

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #000000 21,00:1 AAA

Aa #550000 auf #FFFFFF 15,15:1 AAA

Aa #FFAA55 auf #000000 11,13:1 AAA

Aa #AAAAAA auf #000000 9,04:1 AAA

Aa #FFAA55 auf #550000 8,03:1 AAA

Aa #555500 auf #FFFFFF 7,82:1 AAA

Aa #AA0000 auf #FFFFFF 7,75:1 AAA

Aa #FFFFFF auf #555555 7,46:1 AAA

Aa #FFFFFF auf #0055AA 7,29:1 AAA

Aa #FF5555 auf #000000 6,68:1 AA

Aa #550000 auf #AAAAAA 6,52:1 AA

Aa #888800 auf #000000 5,57:1 AA

Aa #AA5500 auf #FFFFFF 5,24:1 AA

Aa #550000 auf #FF5555 4,82:1 AA

Aa #555500 auf #FFAA55 4,15:1 AA (großer Text)

Aa #FFAA55 auf #AA0000 4,11:1 AA (großer Text)

Aa #888800 auf #550000 4,02:1 AA (großer Text)

Aa #AA5500 auf #000000 4,01:1 AA (großer Text)

Aa #FFAA55 auf #555555 3,95:1 AA (großer Text)

Aa #FFAA55 auf #0055AA 3,87:1 AA (großer Text)

Aa #888800 auf #FFFFFF 3,77:1 AA (großer Text)

Aa #555500 auf #AAAAAA 3,37:1 AA (großer Text)

Aa #AA0000 auf #AAAAAA 3,34:1 AA (großer Text)

Aa #AAAAAA auf #555555 3,21:1 AA (großer Text)

Aa #FF5555 auf #FFFFFF 3,14:1 AA (großer Text)

Aa #AAAAAA auf #0055AA 3,14:1 AA (großer Text)

Aa #AA5500 auf #550000 2,89:1 Nicht bestanden

Aa #000000 auf #0055AA 2,88:1 Nicht bestanden

Aa #555555 auf #000000 2,82:1 Nicht bestanden

Aa #FFAA55 auf #AA5500 2,78:1 Nicht bestanden

Aa #AA0000 auf #000000 2,71:1 Nicht bestanden

Aa #555500 auf #000000 2,69:1 Nicht bestanden

Aa #555500 auf #FF5555 2,49:1 Nicht bestanden

Aa #AA0000 auf #FF5555 2,47:1 Nicht bestanden

Aa #FF5555 auf #555555 2,37:1 Nicht bestanden

Aa #FF5555 auf #0055AA 2,32:1 Nicht bestanden

Aa #FFFFFF auf #AAAAAA 2,32:1 Nicht bestanden

Aa #AA5500 auf #AAAAAA 2,26:1 Nicht bestanden

Aa #550000 auf #0055AA 2,08:1 Nicht bestanden

Aa #555500 auf #888800 2,07:1 Nicht bestanden

Aa #888800 auf #AA0000 2,06:1 Nicht bestanden

Aa #550000 auf #555555 2,03:1 Nicht bestanden

Aa #888800 auf #FFAA55 2,00:1 Nicht bestanden

Aa #888800 auf #555555 1,98:1 Nicht bestanden

Aa #550000 auf #AA0000 1,95:1 Nicht bestanden

Aa #555500 auf #550000 1,94:1 Nicht bestanden

Aa #888800 auf #0055AA 1,93:1 Nicht bestanden

Aa #FFAA55 auf #FFFFFF 1,89:1 Nicht bestanden

Aa #FFAA55 auf #FF5555 1,67:1 Nicht bestanden

Aa #AA5500 auf #FF5555 1,67:1 Nicht bestanden

Aa #888800 auf #AAAAAA 1,62:1 Nicht bestanden

Aa #555500 auf #AA5500 1,49:1 Nicht bestanden

Aa #AA5500 auf #AA0000 1,48:1 Nicht bestanden

Aa #AA5500 auf #555555 1,42:1 Nicht bestanden

Aa #888800 auf #AA5500 1,39:1 Nicht bestanden

Aa #AA5500 auf #0055AA 1,39:1 Nicht bestanden

Aa #550000 auf #000000 1,39:1 Nicht bestanden

Aa #FF5555 auf #AAAAAA 1,35:1 Nicht bestanden

Aa #FFAA55 auf #AAAAAA 1,23:1 Nicht bestanden

Aa #888800 auf #FF5555 1,20:1 Nicht bestanden

Aa #555500 auf #0055AA 1,07:1 Nicht bestanden

Aa #AA0000 auf #0055AA 1,06:1 Nicht bestanden

Aa #555500 auf #555555 1,05:1 Nicht bestanden

Aa #AA0000 auf #555555 1,04:1 Nicht bestanden

Aa #555555 auf #0055AA 1,02:1 Nicht bestanden

Aa #555500 auf #AA0000 1,01:1 Nicht bestanden

Terracarbon

Terracarbon

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen