Sneaky 12

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

Zurück zur Bibliothek

Sneaky 12

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

Bearbeiten

Gedeckt 12 Farben Kühl Gemischt Komplementär limited rhythmheaven

Likes 15

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #160D1C;
  --c-muted-2: #312649;
  --c-muted-3: #504F74;
  --c-muted-4: #78859A;
  --c-muted-5: #B3D1D4;
  --c-muted-6: #CBD9D9;
  --c-muted-7: #F9F9E3;
  --c-muted-8: #F7E49B;
  --c-muted-9: #C79F72;
  --c-muted-10: #8E5E5E;
  --c-muted-11: #584545;
  --c-muted-12: #382B2B;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Coconut Pulp (#F9F9E3) bis zum dunkelsten Ton Shot in the Dark (#160D1C). Sie vereint Shot in the Dark, Blackberry Black, Skipper Blue, Tempest, Hatchling Blue, Raffia Light Grey, Coconut Pulp, Storm Lightning, Gingersnap, Antique Garnet, Mahogany Spice und Ganache in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 25 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #160D1C auf #F9F9E3 mit 17,76:1.

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

Farben im Detail

Shot in the Dark #160D1C

RGB: rgb(22, 13, 28)
HSL: hsl(276, 37%, 8%)
Luminanz: 0,005

Blackberry Black #312649

RGB: rgb(49, 38, 73)
HSL: hsl(259, 32%, 22%)
Luminanz: 0,025

Skipper Blue #504F74

RGB: rgb(80, 79, 116)
HSL: hsl(242, 19%, 38%)
Luminanz: 0,086

Tempest #78859A

RGB: rgb(120, 133, 154)
HSL: hsl(217, 14%, 54%)
Luminanz: 0,231

Hatchling Blue #B3D1D4

RGB: rgb(179, 209, 212)
HSL: hsl(185, 28%, 77%)
Luminanz: 0,599

Raffia Light Grey #CBD9D9

RGB: rgb(203, 217, 217)
HSL: hsl(180, 16%, 82%)
Luminanz: 0,673

Coconut Pulp #F9F9E3

RGB: rgb(249, 249, 227)
HSL: hsl(60, 65%, 93%)
Luminanz: 0,934

Storm Lightning #F7E49B

RGB: rgb(247, 228, 155)
HSL: hsl(48, 85%, 79%)
Luminanz: 0,776

Gingersnap #C79F72

RGB: rgb(199, 159, 114)
HSL: hsl(32, 43%, 61%)
Luminanz: 0,382

Antique Garnet #8E5E5E

RGB: rgb(142, 94, 94)
HSL: hsl(0, 20%, 46%)
Luminanz: 0,146

Mahogany Spice #584545

RGB: rgb(88, 69, 69)
HSL: hsl(0, 12%, 31%)
Luminanz: 0,068

Ganache #382B2B

RGB: rgb(56, 43, 43)
HSL: hsl(0, 13%, 19%)
Luminanz: 0,027

Kontrast & Barrierefreiheit

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

Aa #160D1C auf #F9F9E3 17,76:1 AAA

Aa #160D1C auf #F7E49B 14,91:1 AAA

Aa #312649 auf #F9F9E3 13,09:1 AAA

Aa #160D1C auf #CBD9D9 13,05:1 AAA

Aa #F9F9E3 auf #382B2B 12,71:1 AAA

Aa #160D1C auf #B3D1D4 11,72:1 AAA

Aa #312649 auf #F7E49B 10,99:1 AAA

Aa #F7E49B auf #382B2B 10,67:1 AAA

Aa #312649 auf #CBD9D9 9,62:1 AAA

Aa #CBD9D9 auf #382B2B 9,34:1 AAA

Aa #312649 auf #B3D1D4 8,64:1 AAA

Aa #B3D1D4 auf #382B2B 8,39:1 AAA

Aa #F9F9E3 auf #584545 8,37:1 AAA

Aa #160D1C auf #C79F72 7,79:1 AAA

Aa #504F74 auf #F9F9E3 7,26:1 AAA

Aa #F7E49B auf #584545 7,03:1 AAA

Aa #CBD9D9 auf #584545 6,15:1 AA

Aa #504F74 auf #F7E49B 6,09:1 AA

Aa #312649 auf #C79F72 5,74:1 AA

Aa #C79F72 auf #382B2B 5,57:1 AA

Aa #B3D1D4 auf #584545 5,52:1 AA

Aa #504F74 auf #CBD9D9 5,33:1 AA

Aa #160D1C auf #78859A 5,07:1 AA

Aa #F9F9E3 auf #8E5E5E 5,03:1 AA

Aa #504F74 auf #B3D1D4 4,79:1 AA

Aa #F7E49B auf #8E5E5E 4,22:1 AA (großer Text)

Aa #312649 auf #78859A 3,74:1 AA (großer Text)

Aa #CBD9D9 auf #8E5E5E 3,70:1 AA (großer Text)

Aa #C79F72 auf #584545 3,67:1 AA (großer Text)

Aa #78859A auf #382B2B 3,63:1 AA (großer Text)

Aa #160D1C auf #8E5E5E 3,53:1 AA (großer Text)

Aa #78859A auf #F9F9E3 3,50:1 AA (großer Text)

Aa #B3D1D4 auf #8E5E5E 3,32:1 AA (großer Text)

Aa #504F74 auf #C79F72 3,18:1 AA (großer Text)

Aa #78859A auf #F7E49B 2,94:1 Nicht bestanden

Aa #312649 auf #8E5E5E 2,60:1 Nicht bestanden

Aa #78859A auf #CBD9D9 2,57:1 Nicht bestanden

Aa #8E5E5E auf #382B2B 2,53:1 Nicht bestanden

Aa #160D1C auf #504F74 2,45:1 Nicht bestanden

Aa #78859A auf #584545 2,39:1 Nicht bestanden

Aa #78859A auf #B3D1D4 2,31:1 Nicht bestanden

Aa #F9F9E3 auf #C79F72 2,28:1 Nicht bestanden

Aa #C79F72 auf #8E5E5E 2,21:1 Nicht bestanden

Aa #160D1C auf #584545 2,12:1 Nicht bestanden

Aa #504F74 auf #78859A 2,07:1 Nicht bestanden

Aa #F7E49B auf #C79F72 1,91:1 Nicht bestanden

Aa #312649 auf #504F74 1,80:1 Nicht bestanden

Aa #504F74 auf #382B2B 1,75:1 Nicht bestanden

Aa #CBD9D9 auf #C79F72 1,68:1 Nicht bestanden

Aa #8E5E5E auf #584545 1,66:1 Nicht bestanden

Aa #312649 auf #584545 1,56:1 Nicht bestanden

Aa #78859A auf #C79F72 1,54:1 Nicht bestanden

Aa #B3D1D4 auf #F9F9E3 1,52:1 Nicht bestanden

Aa #584545 auf #382B2B 1,52:1 Nicht bestanden

Aa #B3D1D4 auf #C79F72 1,50:1 Nicht bestanden

Aa #504F74 auf #8E5E5E 1,44:1 Nicht bestanden

Aa #78859A auf #8E5E5E 1,44:1 Nicht bestanden

Aa #160D1C auf #382B2B 1,40:1 Nicht bestanden

Aa #160D1C auf #312649 1,36:1 Nicht bestanden

Aa #CBD9D9 auf #F9F9E3 1,36:1 Nicht bestanden

Aa #B3D1D4 auf #F7E49B 1,27:1 Nicht bestanden

Aa #F9F9E3 auf #F7E49B 1,19:1 Nicht bestanden

Aa #504F74 auf #584545 1,15:1 Nicht bestanden

Aa #CBD9D9 auf #F7E49B 1,14:1 Nicht bestanden

Aa #B3D1D4 auf #CBD9D9 1,11:1 Nicht bestanden

Aa #312649 auf #382B2B 1,03:1 Nicht bestanden

Sneaky 12

Sneaky 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen