Merry 12

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

Zurück zur Bibliothek

Merry 12

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

Bearbeiten

Gedeckt 12 Farben Kühl Gemischt Triadisch gray green white red

Likes 31

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #1B1F1D;
  --c-muted-2: #2E3A43;
  --c-muted-3: #5A7880;
  --c-muted-4: #9DB9C6;
  --c-muted-5: #F2F2F2;
  --c-muted-6: #A8ED77;
  --c-muted-7: #5FBC62;
  --c-muted-8: #326D42;
  --c-muted-9: #E2CB7C;
  --c-muted-10: #CF7E53;
  --c-muted-11: #932443;
  --c-muted-12: #493127;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Bleached Silk (#F2F2F2) bis zum dunkelsten Ton Satin Deep Black (#1B1F1D). Sie vereint Satin Deep Black, Precision, Hampton Surf, Déjà Blue, Bleached Silk, Lima, Lawn Party, Genever Green, Blossom Yellow, Apricot Buff, Berry Rossi und Rojo Marrón in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 20 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #1B1F1D auf #F2F2F2 mit 14,88:1.

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

Farben im Detail

Satin Deep Black #1B1F1D

RGB: rgb(27, 31, 29)
HSL: hsl(150, 7%, 11%)
Luminanz: 0,013

Precision #2E3A43

RGB: rgb(46, 58, 67)
HSL: hsl(206, 19%, 22%)
Luminanz: 0,040

Hampton Surf #5A7880

RGB: rgb(90, 120, 128)
HSL: hsl(193, 17%, 43%)
Luminanz: 0,172

Déjà Blue #9DB9C6

RGB: rgb(157, 185, 198)
HSL: hsl(199, 26%, 70%)
Luminanz: 0,459

Bleached Silk #F2F2F2

RGB: rgb(242, 242, 242)
HSL: hsl(0, 0%, 95%)
Luminanz: 0,888

Lima #A8ED77

RGB: rgb(168, 237, 119)
HSL: hsl(95, 77%, 70%)
Luminanz: 0,702

Lawn Party #5FBC62

RGB: rgb(95, 188, 98)
HSL: hsl(122, 41%, 55%)
Luminanz: 0,393

Genever Green #326D42

RGB: rgb(50, 109, 66)
HSL: hsl(136, 37%, 31%)
Luminanz: 0,120

Blossom Yellow #E2CB7C

RGB: rgb(226, 203, 124)
HSL: hsl(46, 64%, 69%)
Luminanz: 0,603

Apricot Buff #CF7E53

RGB: rgb(207, 126, 83)
HSL: hsl(21, 56%, 57%)
Luminanz: 0,288

Berry Rossi #932443

RGB: rgb(147, 36, 67)
HSL: hsl(343, 61%, 36%)
Luminanz: 0,079

Rojo Marrón #493127

RGB: rgb(73, 49, 39)
HSL: hsl(18, 30%, 22%)
Luminanz: 0,038

Kontrast & Barrierefreiheit

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

Aa #1B1F1D auf #F2F2F2 14,88:1 AAA

Aa #1B1F1D auf #A8ED77 11,94:1 AAA

Aa #F2F2F2 auf #493127 10,71:1 AAA

Aa #2E3A43 auf #F2F2F2 10,41:1 AAA

Aa #1B1F1D auf #E2CB7C 10,37:1 AAA

Aa #A8ED77 auf #493127 8,59:1 AAA

Aa #2E3A43 auf #A8ED77 8,35:1 AAA

Aa #1B1F1D auf #9DB9C6 8,08:1 AAA

Aa #E2CB7C auf #493127 7,46:1 AAA

Aa #F2F2F2 auf #932443 7,29:1 AAA

Aa #2E3A43 auf #E2CB7C 7,25:1 AAA

Aa #1B1F1D auf #5FBC62 7,03:1 AAA

Aa #A8ED77 auf #932443 5,84:1 AA

Aa #9DB9C6 auf #493127 5,82:1 AA

Aa #2E3A43 auf #9DB9C6 5,65:1 AA

Aa #F2F2F2 auf #326D42 5,51:1 AA

Aa #1B1F1D auf #CF7E53 5,37:1 AA

Aa #E2CB7C auf #932443 5,08:1 AA

Aa #5FBC62 auf #493127 5,06:1 AA

Aa #2E3A43 auf #5FBC62 4,91:1 AA

Aa #A8ED77 auf #326D42 4,42:1 AA (großer Text)

Aa #5A7880 auf #F2F2F2 4,23:1 AA (großer Text)

Aa #9DB9C6 auf #932443 3,96:1 AA (großer Text)

Aa #CF7E53 auf #493127 3,86:1 AA (großer Text)

Aa #326D42 auf #E2CB7C 3,84:1 AA (großer Text)

Aa #2E3A43 auf #CF7E53 3,75:1 AA (großer Text)

Aa #1B1F1D auf #5A7880 3,52:1 AA (großer Text)

Aa #5FBC62 auf #932443 3,44:1 AA (großer Text)

Aa #5A7880 auf #A8ED77 3,39:1 AA (großer Text)

Aa #9DB9C6 auf #326D42 3,00:1 AA (großer Text)

Aa #5A7880 auf #E2CB7C 2,95:1 Nicht bestanden

Aa #F2F2F2 auf #CF7E53 2,77:1 Nicht bestanden

Aa #1B1F1D auf #326D42 2,70:1 Nicht bestanden

Aa #CF7E53 auf #932443 2,63:1 Nicht bestanden

Aa #5FBC62 auf #326D42 2,60:1 Nicht bestanden

Aa #5A7880 auf #493127 2,53:1 Nicht bestanden

Aa #2E3A43 auf #5A7880 2,46:1 Nicht bestanden

Aa #5A7880 auf #9DB9C6 2,30:1 Nicht bestanden

Aa #A8ED77 auf #CF7E53 2,22:1 Nicht bestanden

Aa #F2F2F2 auf #5FBC62 2,12:1 Nicht bestanden

Aa #1B1F1D auf #932443 2,04:1 Nicht bestanden

Aa #5A7880 auf #5FBC62 2,00:1 Nicht bestanden

Aa #326D42 auf #CF7E53 1,99:1 Nicht bestanden

Aa #326D42 auf #493127 1,94:1 Nicht bestanden

Aa #E2CB7C auf #CF7E53 1,93:1 Nicht bestanden

Aa #2E3A43 auf #326D42 1,89:1 Nicht bestanden

Aa #9DB9C6 auf #F2F2F2 1,84:1 Nicht bestanden

Aa #5A7880 auf #932443 1,72:1 Nicht bestanden

Aa #A8ED77 auf #5FBC62 1,70:1 Nicht bestanden

Aa #5A7880 auf #CF7E53 1,53:1 Nicht bestanden

Aa #9DB9C6 auf #CF7E53 1,51:1 Nicht bestanden

Aa #9DB9C6 auf #A8ED77 1,48:1 Nicht bestanden

Aa #5FBC62 auf #E2CB7C 1,48:1 Nicht bestanden

Aa #932443 auf #493127 1,47:1 Nicht bestanden

Aa #F2F2F2 auf #E2CB7C 1,44:1 Nicht bestanden

Aa #1B1F1D auf #2E3A43 1,43:1 Nicht bestanden

Aa #2E3A43 auf #932443 1,43:1 Nicht bestanden

Aa #1B1F1D auf #493127 1,39:1 Nicht bestanden

Aa #326D42 auf #932443 1,32:1 Nicht bestanden

Aa #5FBC62 auf #CF7E53 1,31:1 Nicht bestanden

Aa #5A7880 auf #326D42 1,30:1 Nicht bestanden

Aa #9DB9C6 auf #E2CB7C 1,28:1 Nicht bestanden

Aa #F2F2F2 auf #A8ED77 1,25:1 Nicht bestanden

Aa #9DB9C6 auf #5FBC62 1,15:1 Nicht bestanden

Aa #A8ED77 auf #E2CB7C 1,15:1 Nicht bestanden

Aa #2E3A43 auf #493127 1,03:1 Nicht bestanden

Merry 12

Merry 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen