CC 12

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

Zurück zur Bibliothek

CC 12

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

Bearbeiten

Gedeckt 12 Farben Kühl Gemischt Triadisch simple 12color colorful bright

Likes 20

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #5F5652;
  --c-muted-2: #919C8C;
  --c-muted-3: #E4EBF0;
  --c-muted-4: #1E173F;
  --c-muted-5: #7542B7;
  --c-muted-6: #E64DEE;
  --c-muted-7: #1A7194;
  --c-muted-8: #44CA9D;
  --c-muted-9: #A9EB3E;
  --c-muted-10: #C83822;
  --c-muted-11: #E98E51;
  --c-muted-12: #FFFAA7;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Lemon Slice (#FFFAA7) bis zum dunkelsten Ton Prune Plum (#1E173F). Sie vereint Timber Brown, Charcoal Tint, Himalaya Peaks, Prune Plum, Purple Rain, Lake Retba Pink, Bateau, Mint Jelly, Dynamic Green, Red Sauce Parlour, Toasted Husk und Lemon Slice in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 16 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #1E173F auf #FFFAA7 mit 15,59:1.

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

Farben im Detail

Timber Brown #5F5652

RGB: rgb(95, 86, 82)
HSL: hsl(18, 7%, 35%)
Luminanz: 0,097

Charcoal Tint #919C8C

RGB: rgb(145, 156, 140)
HSL: hsl(101, 7%, 58%)
Luminanz: 0,317

Himalaya Peaks #E4EBF0

RGB: rgb(228, 235, 240)
HSL: hsl(205, 29%, 92%)
Luminanz: 0,822

Prune Plum #1E173F

RGB: rgb(30, 23, 63)
HSL: hsl(251, 47%, 17%)
Luminanz: 0,013

Purple Rain #7542B7

RGB: rgb(117, 66, 183)
HSL: hsl(266, 47%, 49%)
Luminanz: 0,111

Lake Retba Pink #E64DEE

RGB: rgb(230, 77, 238)
HSL: hsl(297, 83%, 62%)
Luminanz: 0,283

Bateau #1A7194

RGB: rgb(26, 113, 148)
HSL: hsl(197, 70%, 34%)
Luminanz: 0,142

Mint Jelly #44CA9D

RGB: rgb(68, 202, 157)
HSL: hsl(160, 56%, 53%)
Luminanz: 0,459

Dynamic Green #A9EB3E

RGB: rgb(169, 235, 62)
HSL: hsl(83, 81%, 58%)
Luminanz: 0,682

Red Sauce Parlour #C83822

RGB: rgb(200, 56, 34)
HSL: hsl(8, 71%, 46%)
Luminanz: 0,152

Toasted Husk #E98E51

RGB: rgb(233, 142, 81)
HSL: hsl(24, 78%, 62%)
Luminanz: 0,373

Lemon Slice #FFFAA7

RGB: rgb(255, 250, 167)
HSL: hsl(57, 100%, 83%)
Luminanz: 0,924

Kontrast & Barrierefreiheit

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

Aa #1E173F auf #FFFAA7 15,59:1 AAA

Aa #E4EBF0 auf #1E173F 13,96:1 AAA

Aa #1E173F auf #A9EB3E 11,72:1 AAA

Aa #1E173F auf #44CA9D 8,15:1 AAA

Aa #1E173F auf #E98E51 6,76:1 AA

Aa #5F5652 auf #FFFAA7 6,63:1 AA

Aa #7542B7 auf #FFFAA7 6,05:1 AA

Aa #5F5652 auf #E4EBF0 5,93:1 AA

Aa #919C8C auf #1E173F 5,87:1 AA

Aa #E4EBF0 auf #7542B7 5,42:1 AA

Aa #1E173F auf #E64DEE 5,33:1 AA

Aa #1A7194 auf #FFFAA7 5,08:1 AA

Aa #5F5652 auf #A9EB3E 4,98:1 AA

Aa #C83822 auf #FFFAA7 4,82:1 AA

Aa #E4EBF0 auf #1A7194 4,55:1 AA

Aa #7542B7 auf #A9EB3E 4,55:1 AA

Aa #E4EBF0 auf #C83822 4,31:1 AA (großer Text)

Aa #1A7194 auf #A9EB3E 3,82:1 AA (großer Text)

Aa #A9EB3E auf #C83822 3,62:1 AA (großer Text)

Aa #5F5652 auf #44CA9D 3,46:1 AA (großer Text)

Aa #1E173F auf #C83822 3,24:1 AA (großer Text)

Aa #7542B7 auf #44CA9D 3,16:1 AA (großer Text)

Aa #1E173F auf #1A7194 3,07:1 AA (großer Text)

Aa #E64DEE auf #FFFAA7 2,93:1 Nicht bestanden

Aa #5F5652 auf #E98E51 2,88:1 Nicht bestanden

Aa #919C8C auf #FFFAA7 2,66:1 Nicht bestanden

Aa #1A7194 auf #44CA9D 2,66:1 Nicht bestanden

Aa #7542B7 auf #E98E51 2,63:1 Nicht bestanden

Aa #E4EBF0 auf #E64DEE 2,62:1 Nicht bestanden

Aa #1E173F auf #7542B7 2,58:1 Nicht bestanden

Aa #44CA9D auf #C83822 2,52:1 Nicht bestanden

Aa #5F5652 auf #919C8C 2,50:1 Nicht bestanden

Aa #919C8C auf #E4EBF0 2,38:1 Nicht bestanden

Aa #5F5652 auf #1E173F 2,35:1 Nicht bestanden

Aa #E98E51 auf #FFFAA7 2,31:1 Nicht bestanden

Aa #919C8C auf #7542B7 2,28:1 Nicht bestanden

Aa #5F5652 auf #E64DEE 2,27:1 Nicht bestanden

Aa #E64DEE auf #A9EB3E 2,20:1 Nicht bestanden

Aa #1A7194 auf #E98E51 2,20:1 Nicht bestanden

Aa #C83822 auf #E98E51 2,09:1 Nicht bestanden

Aa #7542B7 auf #E64DEE 2,07:1 Nicht bestanden

Aa #E4EBF0 auf #E98E51 2,06:1 Nicht bestanden

Aa #919C8C auf #A9EB3E 2,00:1 Nicht bestanden

Aa #919C8C auf #1A7194 1,91:1 Nicht bestanden

Aa #44CA9D auf #FFFAA7 1,91:1 Nicht bestanden

Aa #919C8C auf #C83822 1,81:1 Nicht bestanden

Aa #E64DEE auf #1A7194 1,74:1 Nicht bestanden

Aa #A9EB3E auf #E98E51 1,73:1 Nicht bestanden

Aa #E4EBF0 auf #44CA9D 1,71:1 Nicht bestanden

Aa #E64DEE auf #C83822 1,65:1 Nicht bestanden

Aa #E64DEE auf #44CA9D 1,53:1 Nicht bestanden

Aa #44CA9D auf #A9EB3E 1,44:1 Nicht bestanden

Aa #919C8C auf #44CA9D 1,39:1 Nicht bestanden

Aa #5F5652 auf #C83822 1,38:1 Nicht bestanden

Aa #A9EB3E auf #FFFAA7 1,33:1 Nicht bestanden

Aa #5F5652 auf #1A7194 1,30:1 Nicht bestanden

Aa #E64DEE auf #E98E51 1,27:1 Nicht bestanden

Aa #7542B7 auf #C83822 1,26:1 Nicht bestanden

Aa #44CA9D auf #E98E51 1,20:1 Nicht bestanden

Aa #E4EBF0 auf #A9EB3E 1,19:1 Nicht bestanden

Aa #7542B7 auf #1A7194 1,19:1 Nicht bestanden

Aa #919C8C auf #E98E51 1,15:1 Nicht bestanden

Aa #E4EBF0 auf #FFFAA7 1,12:1 Nicht bestanden

Aa #5F5652 auf #7542B7 1,10:1 Nicht bestanden

Aa #919C8C auf #E64DEE 1,10:1 Nicht bestanden

Aa #1A7194 auf #C83822 1,06:1 Nicht bestanden

CC 12

CC 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen