Sotc12

Palette mit 12 Farben · Neutral · Gemischt · Harmonie: Monochrom

Zurück zur Bibliothek

Sotc12

Palette mit 12 Farben · Temperatur: Neutral · Ton: Gemischt · Harmonie: Monochrom

Bearbeiten

Gedeckt 12 Farben Neutral Gemischt Monochrom pixelart sky clouds light

Likes 227

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #323B2F;
  --c-muted-2: #424D3C;
  --c-muted-3: #626E60;
  --c-muted-4: #778476;
  --c-muted-5: #A0A896;
  --c-muted-6: #B7BB9F;
  --c-muted-7: #DADAB8;
  --c-muted-8: #E0E4C7;
  --c-muted-9: #E9F6E3;
  --c-muted-10: #F9FFF0;
  --c-muted-11: #293425;
  --c-muted-12: #8F9A8B;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Pearl Powder (#F9FFF0) bis zum dunkelsten Ton Ebony Wood (#293425). Sie vereint Sound of Silence, Hōjicha, Bracken Green, Garden Bower, Bushel, Dried Thyme, Ghostly Green, More Melon, Homoeopathic Lime, Pearl Powder, Ebony Wood und Dark Sky in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 19 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #F9FFF0 auf #293425 mit 12,77:1.

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

Farben im Detail

Sound of Silence #323B2F

RGB: rgb(50, 59, 47)
HSL: hsl(105, 11%, 21%)
Luminanz: 0,040

Hōjicha #424D3C

RGB: rgb(66, 77, 60)
HSL: hsl(99, 12%, 27%)
Luminanz: 0,068

Bracken Green #626E60

RGB: rgb(98, 110, 96)
HSL: hsl(111, 7%, 40%)
Luminanz: 0,146

Garden Bower #778476

RGB: rgb(119, 132, 118)
HSL: hsl(116, 6%, 49%)
Luminanz: 0,217

Bushel #A0A896

RGB: rgb(160, 168, 150)
HSL: hsl(87, 9%, 62%)
Luminanz: 0,377

Dried Thyme #B7BB9F

RGB: rgb(183, 187, 159)
HSL: hsl(69, 17%, 68%)
Luminanz: 0,481

Ghostly Green #DADAB8

RGB: rgb(218, 218, 184)
HSL: hsl(60, 31%, 79%)
Luminanz: 0,685

More Melon #E0E4C7

RGB: rgb(224, 228, 199)
HSL: hsl(68, 35%, 84%)
Luminanz: 0,755

Homoeopathic Lime #E9F6E3

RGB: rgb(233, 246, 227)
HSL: hsl(101, 51%, 93%)
Luminanz: 0,888

Pearl Powder #F9FFF0

RGB: rgb(249, 255, 240)
HSL: hsl(84, 100%, 97%)
Luminanz: 0,980

Ebony Wood #293425

RGB: rgb(41, 52, 37)
HSL: hsl(104, 17%, 17%)
Luminanz: 0,031

Dark Sky #8F9A8B

RGB: rgb(143, 154, 139)
HSL: hsl(104, 7%, 57%)
Luminanz: 0,308

Kontrast & Barrierefreiheit

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

Aa #F9FFF0 auf #293425 12,77:1 AAA

Aa #E9F6E3 auf #293425 11,63:1 AAA

Aa #323B2F auf #F9FFF0 11,42:1 AAA

Aa #323B2F auf #E9F6E3 10,41:1 AAA

Aa #E0E4C7 auf #293425 9,98:1 AAA

Aa #DADAB8 auf #293425 9,12:1 AAA

Aa #323B2F auf #E0E4C7 8,93:1 AAA

Aa #424D3C auf #F9FFF0 8,73:1 AAA

Aa #323B2F auf #DADAB8 8,16:1 AAA

Aa #424D3C auf #E9F6E3 7,95:1 AAA

Aa #424D3C auf #E0E4C7 6,82:1 AA

Aa #B7BB9F auf #293425 6,59:1 AA

Aa #424D3C auf #DADAB8 6,23:1 AA

Aa #323B2F auf #B7BB9F 5,89:1 AA

Aa #A0A896 auf #293425 5,29:1 AA

Aa #626E60 auf #F9FFF0 5,25:1 AA

Aa #626E60 auf #E9F6E3 4,79:1 AA

Aa #323B2F auf #A0A896 4,74:1 AA

Aa #424D3C auf #B7BB9F 4,50:1 AA

Aa #293425 auf #8F9A8B 4,44:1 AA (großer Text)

Aa #626E60 auf #E0E4C7 4,11:1 AA (großer Text)

Aa #323B2F auf #8F9A8B 3,97:1 AA (großer Text)

Aa #778476 auf #F9FFF0 3,85:1 AA (großer Text)

Aa #626E60 auf #DADAB8 3,75:1 AA (großer Text)

Aa #424D3C auf #A0A896 3,62:1 AA (großer Text)

Aa #778476 auf #E9F6E3 3,51:1 AA (großer Text)

Aa #778476 auf #293425 3,32:1 AA (großer Text)

Aa #424D3C auf #8F9A8B 3,04:1 AA (großer Text)

Aa #778476 auf #E0E4C7 3,01:1 AA (großer Text)

Aa #323B2F auf #778476 2,97:1 Nicht bestanden

Aa #F9FFF0 auf #8F9A8B 2,87:1 Nicht bestanden

Aa #778476 auf #DADAB8 2,75:1 Nicht bestanden

Aa #626E60 auf #B7BB9F 2,71:1 Nicht bestanden

Aa #E9F6E3 auf #8F9A8B 2,62:1 Nicht bestanden

Aa #626E60 auf #293425 2,43:1 Nicht bestanden

Aa #A0A896 auf #F9FFF0 2,41:1 Nicht bestanden

Aa #424D3C auf #778476 2,27:1 Nicht bestanden

Aa #E0E4C7 auf #8F9A8B 2,25:1 Nicht bestanden

Aa #A0A896 auf #E9F6E3 2,20:1 Nicht bestanden

Aa #626E60 auf #A0A896 2,18:1 Nicht bestanden

Aa #323B2F auf #626E60 2,17:1 Nicht bestanden

Aa #DADAB8 auf #8F9A8B 2,05:1 Nicht bestanden

Aa #778476 auf #B7BB9F 1,99:1 Nicht bestanden

Aa #B7BB9F auf #F9FFF0 1,94:1 Nicht bestanden

Aa #A0A896 auf #E0E4C7 1,89:1 Nicht bestanden

Aa #626E60 auf #8F9A8B 1,83:1 Nicht bestanden

Aa #B7BB9F auf #E9F6E3 1,77:1 Nicht bestanden

Aa #A0A896 auf #DADAB8 1,72:1 Nicht bestanden

Aa #424D3C auf #626E60 1,66:1 Nicht bestanden

Aa #778476 auf #A0A896 1,60:1 Nicht bestanden

Aa #B7BB9F auf #E0E4C7 1,51:1 Nicht bestanden

Aa #B7BB9F auf #8F9A8B 1,48:1 Nicht bestanden

Aa #424D3C auf #293425 1,46:1 Nicht bestanden

Aa #DADAB8 auf #F9FFF0 1,40:1 Nicht bestanden

Aa #B7BB9F auf #DADAB8 1,38:1 Nicht bestanden

Aa #626E60 auf #778476 1,36:1 Nicht bestanden

Aa #778476 auf #8F9A8B 1,34:1 Nicht bestanden

Aa #323B2F auf #424D3C 1,31:1 Nicht bestanden

Aa #DADAB8 auf #E9F6E3 1,28:1 Nicht bestanden

Aa #E0E4C7 auf #F9FFF0 1,28:1 Nicht bestanden

Aa #A0A896 auf #B7BB9F 1,24:1 Nicht bestanden

Aa #A0A896 auf #8F9A8B 1,19:1 Nicht bestanden

Aa #E0E4C7 auf #E9F6E3 1,17:1 Nicht bestanden

Aa #323B2F auf #293425 1,12:1 Nicht bestanden

Aa #E9F6E3 auf #F9FFF0 1,10:1 Nicht bestanden

Aa #DADAB8 auf #E0E4C7 1,09:1 Nicht bestanden

Sotc12

Sotc12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen