12j4nk

Palette mit 12 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

12j4nk

Palette mit 12 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Erdig 12 Farben Kühl Gemischt Komplementär ui soft colorful nature

Likes 51

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #FCFCF2;
  --c-earthy-2: #D5DDE4;
  --c-earthy-3: #9DA0A8;
  --c-earthy-4: #42133F;
  --c-earthy-5: #DDAC46;
  --c-earthy-6: #00A2A8;
  --c-earthy-7: #376E49;
  --c-earthy-8: #1B1729;
  --c-earthy-9: #CD4A42;
  --c-earthy-10: #1773B8;
  --c-earthy-11: #18292E;
  --c-earthy-12: #101010;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton White Desert (#FCFCF2) bis zum dunkelsten Ton Chaos Black (#101010). Sie vereint White Desert, Cautious Blue, Grey Wolf, Velvet Cosmos, Tiger Cub, Wax Crayon Blue, Chopped Chive, Sambucus, Race Car Stripe, Beautiful Blue, Abyssal Anchorfish Blue und Chaos Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 22 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FCFCF2 auf #101010 mit 18,43: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

White Desert #FCFCF2

RGB: rgb(252, 252, 242)
HSL: hsl(60, 63%, 97%)
Luminanz: 0,967

Cautious Blue #D5DDE4

RGB: rgb(213, 221, 228)
HSL: hsl(208, 22%, 86%)
Luminanz: 0,715

Grey Wolf #9DA0A8

RGB: rgb(157, 160, 168)
HSL: hsl(224, 6%, 64%)
Luminanz: 0,351

Velvet Cosmos #42133F

RGB: rgb(66, 19, 63)
HSL: hsl(304, 55%, 17%)
Luminanz: 0,020

Tiger Cub #DDAC46

RGB: rgb(221, 172, 70)
HSL: hsl(41, 69%, 57%)
Luminanz: 0,453

Wax Crayon Blue #00A2A8

RGB: rgb(0, 162, 168)
HSL: hsl(182, 100%, 33%)
Luminanz: 0,287

Chopped Chive #376E49

RGB: rgb(55, 110, 73)
HSL: hsl(140, 33%, 32%)
Luminanz: 0,125

Sambucus #1B1729

RGB: rgb(27, 23, 41)
HSL: hsl(253, 28%, 13%)
Luminanz: 0,010

Race Car Stripe #CD4A42

RGB: rgb(205, 74, 66)
HSL: hsl(3, 58%, 53%)
Luminanz: 0,183

Beautiful Blue #1773B8

RGB: rgb(23, 115, 184)
HSL: hsl(206, 78%, 41%)
Luminanz: 0,159

Abyssal Anchorfish Blue #18292E

RGB: rgb(24, 41, 46)
HSL: hsl(194, 31%, 14%)
Luminanz: 0,020

Chaos Black #101010

RGB: rgb(16, 16, 16)
HSL: hsl(0, 0%, 6%)
Luminanz: 0,005

Kontrast & Barrierefreiheit

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

Aa #FCFCF2 auf #101010 18,43:1 AAA

Aa #FCFCF2 auf #1B1729 16,94:1 AAA

Aa #FCFCF2 auf #18292E 14,58:1 AAA

Aa #FCFCF2 auf #42133F 14,57:1 AAA

Aa #D5DDE4 auf #101010 13,86:1 AAA

Aa #D5DDE4 auf #1B1729 12,73:1 AAA

Aa #D5DDE4 auf #18292E 10,96:1 AAA

Aa #D5DDE4 auf #42133F 10,95:1 AAA

Aa #DDAC46 auf #101010 9,12:1 AAA

Aa #DDAC46 auf #1B1729 8,38:1 AAA

Aa #9DA0A8 auf #101010 7,27:1 AAA

Aa #42133F auf #DDAC46 7,21:1 AAA

Aa #DDAC46 auf #18292E 7,21:1 AAA

Aa #9DA0A8 auf #1B1729 6,68:1 AA

Aa #00A2A8 auf #101010 6,10:1 AA

Aa #FCFCF2 auf #376E49 5,83:1 AA

Aa #9DA0A8 auf #42133F 5,75:1 AA

Aa #9DA0A8 auf #18292E 5,75:1 AA

Aa #00A2A8 auf #1B1729 5,61:1 AA

Aa #FCFCF2 auf #1773B8 4,87:1 AA

Aa #00A2A8 auf #18292E 4,83:1 AA

Aa #42133F auf #00A2A8 4,82:1 AA

Aa #D5DDE4 auf #376E49 4,38:1 AA (großer Text)

Aa #FCFCF2 auf #CD4A42 4,37:1 AA (großer Text)

Aa #CD4A42 auf #101010 4,22:1 AA (großer Text)

Aa #1B1729 auf #CD4A42 3,87:1 AA (großer Text)

Aa #1773B8 auf #101010 3,79:1 AA (großer Text)

Aa #D5DDE4 auf #1773B8 3,66:1 AA (großer Text)

Aa #1B1729 auf #1773B8 3,48:1 AA (großer Text)

Aa #CD4A42 auf #18292E 3,34:1 AA (großer Text)

Aa #42133F auf #CD4A42 3,33:1 AA (großer Text)

Aa #D5DDE4 auf #CD4A42 3,29:1 AA (großer Text)

Aa #376E49 auf #101010 3,16:1 AA (großer Text)

Aa #FCFCF2 auf #00A2A8 3,02:1 AA (großer Text)

Aa #1773B8 auf #18292E 3,00:1 AA (großer Text)

Aa #42133F auf #1773B8 2,99:1 Nicht bestanden

Aa #376E49 auf #1B1729 2,90:1 Nicht bestanden

Aa #DDAC46 auf #376E49 2,88:1 Nicht bestanden

Aa #FCFCF2 auf #9DA0A8 2,53:1 Nicht bestanden

Aa #42133F auf #376E49 2,50:1 Nicht bestanden

Aa #376E49 auf #18292E 2,50:1 Nicht bestanden

Aa #DDAC46 auf #1773B8 2,41:1 Nicht bestanden

Aa #9DA0A8 auf #376E49 2,30:1 Nicht bestanden

Aa #D5DDE4 auf #00A2A8 2,27:1 Nicht bestanden

Aa #DDAC46 auf #CD4A42 2,16:1 Nicht bestanden

Aa #FCFCF2 auf #DDAC46 2,02:1 Nicht bestanden

Aa #00A2A8 auf #376E49 1,93:1 Nicht bestanden

Aa #9DA0A8 auf #1773B8 1,92:1 Nicht bestanden

Aa #D5DDE4 auf #9DA0A8 1,90:1 Nicht bestanden

Aa #9DA0A8 auf #CD4A42 1,72:1 Nicht bestanden

Aa #00A2A8 auf #1773B8 1,61:1 Nicht bestanden

Aa #D5DDE4 auf #DDAC46 1,52:1 Nicht bestanden

Aa #DDAC46 auf #00A2A8 1,49:1 Nicht bestanden

Aa #00A2A8 auf #CD4A42 1,45:1 Nicht bestanden

Aa #FCFCF2 auf #D5DDE4 1,33:1 Nicht bestanden

Aa #376E49 auf #CD4A42 1,33:1 Nicht bestanden

Aa #42133F auf #101010 1,27:1 Nicht bestanden

Aa #18292E auf #101010 1,26:1 Nicht bestanden

Aa #9DA0A8 auf #DDAC46 1,25:1 Nicht bestanden

Aa #376E49 auf #1773B8 1,20:1 Nicht bestanden

Aa #9DA0A8 auf #00A2A8 1,19:1 Nicht bestanden

Aa #42133F auf #1B1729 1,16:1 Nicht bestanden

Aa #1B1729 auf #18292E 1,16:1 Nicht bestanden

Aa #CD4A42 auf #1773B8 1,11:1 Nicht bestanden

Aa #1B1729 auf #101010 1,09:1 Nicht bestanden

Aa #42133F auf #18292E 1,00:1 Nicht bestanden

12j4nk

12j4nk

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen