Serene12

Palette mit 12 Farben · Kühl · Gemischt · Harmonie: Triadisch

Zurück zur Bibliothek

Serene12

Palette mit 12 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Triadisch

Bearbeiten

Gedeckt 12 Farben Kühl Gemischt Triadisch colorful nature 9 serene

Likes 25

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #515D7B;
  --c-muted-2: #697B95;
  --c-muted-3: #9FB2CF;
  --c-muted-4: #667258;
  --c-muted-5: #7F956D;
  --c-muted-6: #A0C68D;
  --c-muted-7: #463E37;
  --c-muted-8: #807560;
  --c-muted-9: #ABA17F;
  --c-muted-10: #9AABA4;
  --c-muted-11: #B9C6BE;
  --c-muted-12: #D8E9E0;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Clear Camouflage Green (#D8E9E0) bis zum dunkelsten Ton Turkish Coffee (#463E37). Sie vereint Coastal Fjord, Blue Suede, Stellar Blue, French Tarragon, Green Eyes, Cos, Turkish Coffee, Swamp, Ruskin Room Green, Halcyon Green, Inviting Veranda und Clear Camouflage Green in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #463E37 auf #D8E9E0 mit 8,31:1.

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

Farben im Detail

Coastal Fjord #515D7B

RGB: rgb(81, 93, 123)
HSL: hsl(223, 21%, 40%)
Luminanz: 0,110

Blue Suede #697B95

RGB: rgb(105, 123, 149)
HSL: hsl(215, 17%, 50%)
Luminanz: 0,193

Stellar Blue #9FB2CF

RGB: rgb(159, 178, 207)
HSL: hsl(216, 33%, 72%)
Luminanz: 0,437

French Tarragon #667258

RGB: rgb(102, 114, 88)
HSL: hsl(88, 13%, 40%)
Luminanz: 0,156

Green Eyes #7F956D

RGB: rgb(127, 149, 109)
HSL: hsl(93, 16%, 51%)
Luminanz: 0,271

Cos #A0C68D

RGB: rgb(160, 198, 141)
HSL: hsl(100, 33%, 66%)
Luminanz: 0,498

Turkish Coffee #463E37

RGB: rgb(70, 62, 55)
HSL: hsl(28, 12%, 25%)
Luminanz: 0,050

Swamp #807560

RGB: rgb(128, 117, 96)
HSL: hsl(39, 14%, 44%)
Luminanz: 0,182

Ruskin Room Green #ABA17F

RGB: rgb(171, 161, 127)
HSL: hsl(46, 21%, 58%)
Luminanz: 0,357

Halcyon Green #9AABA4

RGB: rgb(154, 171, 164)
HSL: hsl(155, 9%, 64%)
Luminanz: 0,387

Inviting Veranda #B9C6BE

RGB: rgb(185, 198, 190)
HSL: hsl(143, 10%, 75%)
Luminanz: 0,544

Clear Camouflage Green #D8E9E0

RGB: rgb(216, 233, 224)
HSL: hsl(148, 28%, 88%)
Luminanz: 0,783

Kontrast & Barrierefreiheit

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

Aa #463E37 auf #D8E9E0 8,31:1 AAA

Aa #463E37 auf #B9C6BE 5,93:1 AA

Aa #A0C68D auf #463E37 5,47:1 AA

Aa #515D7B auf #D8E9E0 5,20:1 AA

Aa #9FB2CF auf #463E37 4,86:1 AA

Aa #463E37 auf #9AABA4 4,36:1 AA (großer Text)

Aa #463E37 auf #ABA17F 4,06:1 AA (großer Text)

Aa #667258 auf #D8E9E0 4,05:1 AA (großer Text)

Aa #515D7B auf #B9C6BE 3,71:1 AA (großer Text)

Aa #807560 auf #D8E9E0 3,60:1 AA (großer Text)

Aa #515D7B auf #A0C68D 3,42:1 AA (großer Text)

Aa #697B95 auf #D8E9E0 3,42:1 AA (großer Text)

Aa #7F956D auf #463E37 3,20:1 AA (großer Text)

Aa #515D7B auf #9FB2CF 3,04:1 AA (großer Text)

Aa #667258 auf #B9C6BE 2,89:1 Nicht bestanden

Aa #515D7B auf #9AABA4 2,73:1 Nicht bestanden

Aa #667258 auf #A0C68D 2,66:1 Nicht bestanden

Aa #7F956D auf #D8E9E0 2,59:1 Nicht bestanden

Aa #807560 auf #B9C6BE 2,57:1 Nicht bestanden

Aa #515D7B auf #ABA17F 2,54:1 Nicht bestanden

Aa #697B95 auf #B9C6BE 2,44:1 Nicht bestanden

Aa #697B95 auf #463E37 2,43:1 Nicht bestanden

Aa #9FB2CF auf #667258 2,37:1 Nicht bestanden

Aa #A0C68D auf #807560 2,37:1 Nicht bestanden

Aa #463E37 auf #807560 2,31:1 Nicht bestanden

Aa #697B95 auf #A0C68D 2,25:1 Nicht bestanden

Aa #667258 auf #9AABA4 2,12:1 Nicht bestanden

Aa #9FB2CF auf #807560 2,10:1 Nicht bestanden

Aa #667258 auf #463E37 2,05:1 Nicht bestanden

Aa #ABA17F auf #D8E9E0 2,05:1 Nicht bestanden

Aa #515D7B auf #7F956D 2,01:1 Nicht bestanden

Aa #697B95 auf #9FB2CF 2,00:1 Nicht bestanden

Aa #667258 auf #ABA17F 1,98:1 Nicht bestanden

Aa #9AABA4 auf #D8E9E0 1,91:1 Nicht bestanden

Aa #807560 auf #9AABA4 1,89:1 Nicht bestanden

Aa #7F956D auf #B9C6BE 1,85:1 Nicht bestanden

Aa #697B95 auf #9AABA4 1,79:1 Nicht bestanden

Aa #807560 auf #ABA17F 1,76:1 Nicht bestanden

Aa #9FB2CF auf #D8E9E0 1,71:1 Nicht bestanden

Aa #7F956D auf #A0C68D 1,71:1 Nicht bestanden

Aa #697B95 auf #ABA17F 1,67:1 Nicht bestanden

Aa #515D7B auf #463E37 1,60:1 Nicht bestanden

Aa #667258 auf #7F956D 1,56:1 Nicht bestanden

Aa #515D7B auf #697B95 1,52:1 Nicht bestanden

Aa #9FB2CF auf #7F956D 1,52:1 Nicht bestanden

Aa #A0C68D auf #D8E9E0 1,52:1 Nicht bestanden

Aa #ABA17F auf #B9C6BE 1,46:1 Nicht bestanden

Aa #515D7B auf #807560 1,45:1 Nicht bestanden

Aa #B9C6BE auf #D8E9E0 1,40:1 Nicht bestanden

Aa #7F956D auf #807560 1,39:1 Nicht bestanden

Aa #7F956D auf #9AABA4 1,36:1 Nicht bestanden

Aa #9AABA4 auf #B9C6BE 1,36:1 Nicht bestanden

Aa #A0C68D auf #ABA17F 1,35:1 Nicht bestanden

Aa #697B95 auf #7F956D 1,32:1 Nicht bestanden

Aa #515D7B auf #667258 1,28:1 Nicht bestanden

Aa #7F956D auf #ABA17F 1,27:1 Nicht bestanden

Aa #A0C68D auf #9AABA4 1,25:1 Nicht bestanden

Aa #9FB2CF auf #B9C6BE 1,22:1 Nicht bestanden

Aa #9FB2CF auf #ABA17F 1,20:1 Nicht bestanden

Aa #697B95 auf #667258 1,18:1 Nicht bestanden

Aa #667258 auf #807560 1,13:1 Nicht bestanden

Aa #9FB2CF auf #A0C68D 1,12:1 Nicht bestanden

Aa #9FB2CF auf #9AABA4 1,12:1 Nicht bestanden

Aa #A0C68D auf #B9C6BE 1,08:1 Nicht bestanden

Aa #ABA17F auf #9AABA4 1,07:1 Nicht bestanden

Aa #697B95 auf #807560 1,05:1 Nicht bestanden

Serene12

Serene12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen