! Surpriso !

Palette mit 8 Farben · Warm · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

! Surpriso !

Palette mit 8 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Gedeckt 8 Farben Warm Gemischt Komplementär green pink 8 muted

Likes 33

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #1D2228;
  --c-muted-2: #555060;
  --c-muted-3: #988898;
  --c-muted-4: #D9CAD5;
  --c-muted-5: #F2EFE6;
  --c-muted-6: #CCD9C7;
  --c-muted-7: #85998A;
  --c-muted-8: #404E4C;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Marble White (#F2EFE6) bis zum dunkelsten Ton Noble Black (#1D2228). Sie vereint Noble Black, Illusionist, Amethyst Smoke, Purple Cream, Marble White, April Mist, Paradise Found und Corduroy in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #1D2228 auf #F2EFE6 mit 13,92:1.

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

Farben im Detail

Noble Black #1D2228

RGB: rgb(29, 34, 40)
HSL: hsl(213, 16%, 14%)
Luminanz: 0,016

Illusionist #555060

RGB: rgb(85, 80, 96)
HSL: hsl(259, 9%, 35%)
Luminanz: 0,085

Amethyst Smoke #988898

RGB: rgb(152, 136, 152)
HSL: hsl(300, 7%, 56%)
Luminanz: 0,266

Purple Cream #D9CAD5

RGB: rgb(217, 202, 213)
HSL: hsl(316, 16%, 82%)
Luminanz: 0,618

Marble White #F2EFE6

RGB: rgb(242, 239, 230)
HSL: hsl(45, 32%, 93%)
Luminanz: 0,863

April Mist #CCD9C7

RGB: rgb(204, 217, 199)
HSL: hsl(103, 19%, 82%)
Luminanz: 0,666

Paradise Found #85998A

RGB: rgb(133, 153, 138)
HSL: hsl(135, 9%, 56%)
Luminanz: 0,296

Corduroy #404E4C

RGB: rgb(64, 78, 76)
HSL: hsl(171, 10%, 28%)
Luminanz: 0,071

Kontrast & Barrierefreiheit

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

Aa #1D2228 auf #F2EFE6 13,92:1 AAA

Aa #1D2228 auf #CCD9C7 10,92:1 AAA

Aa #1D2228 auf #D9CAD5 10,18:1 AAA

Aa #F2EFE6 auf #404E4C 7,57:1 AAA

Aa #555060 auf #F2EFE6 6,76:1 AA

Aa #CCD9C7 auf #404E4C 5,94:1 AA

Aa #D9CAD5 auf #404E4C 5,54:1 AA

Aa #555060 auf #CCD9C7 5,30:1 AA

Aa #1D2228 auf #85998A 5,28:1 AA

Aa #555060 auf #D9CAD5 4,94:1 AA

Aa #1D2228 auf #988898 4,81:1 AA

Aa #988898 auf #F2EFE6 2,89:1 Nicht bestanden

Aa #85998A auf #404E4C 2,87:1 Nicht bestanden

Aa #F2EFE6 auf #85998A 2,64:1 Nicht bestanden

Aa #988898 auf #404E4C 2,62:1 Nicht bestanden

Aa #555060 auf #85998A 2,56:1 Nicht bestanden

Aa #555060 auf #988898 2,33:1 Nicht bestanden

Aa #988898 auf #CCD9C7 2,27:1 Nicht bestanden

Aa #988898 auf #D9CAD5 2,12:1 Nicht bestanden

Aa #CCD9C7 auf #85998A 2,07:1 Nicht bestanden

Aa #1D2228 auf #555060 2,06:1 Nicht bestanden

Aa #D9CAD5 auf #85998A 1,93:1 Nicht bestanden

Aa #1D2228 auf #404E4C 1,84:1 Nicht bestanden

Aa #D9CAD5 auf #F2EFE6 1,37:1 Nicht bestanden

Aa #F2EFE6 auf #CCD9C7 1,28:1 Nicht bestanden

Aa #555060 auf #404E4C 1,12:1 Nicht bestanden

Aa #988898 auf #85998A 1,10:1 Nicht bestanden

Aa #D9CAD5 auf #CCD9C7 1,07:1 Nicht bestanden

! Surpriso !

! Surpriso !

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen