Hetzelfde

Palette mit 12 Farben · Kühl · Dunkel · Harmonie: Monochrom

Zurück zur Bibliothek

Hetzelfde

Palette mit 12 Farben · Temperatur: Kühl · Ton: Dunkel · Harmonie: Monochrom

Bearbeiten

Gedeckt 12 Farben Kühl Dunkel Monochrom gray black white red

Likes 31

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #3E3F4A;
  --c-muted-2: #5D606B;
  --c-muted-3: #6F687C;
  --c-muted-4: #91929B;
  --c-muted-5: #1D1E26;
  --c-muted-6: #2E2A34;
  --c-muted-7: #293455;
  --c-muted-8: #4C5F81;
  --c-muted-9: #B4D8F7;
  --c-muted-10: #FFFFFF;
  --c-muted-11: #6E053D;
  --c-muted-12: #FF0100;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Noble Black (#1D1E26). Sie vereint Indian Ink, Concrete Landscape, Victorian Iris, Lilac Fields, Noble Black, Haiti, Midnight Escapade, Bijou Blue, Blue Rice, White, Spanish Purple und Red in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 15 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #1D1E26 auf #FFFFFF mit 16,59:1.

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

Farben im Detail

Indian Ink #3E3F4A

RGB: rgb(62, 63, 74)
HSL: hsl(235, 9%, 27%)
Luminanz: 0,051

Concrete Landscape #5D606B

RGB: rgb(93, 96, 107)
HSL: hsl(227, 7%, 39%)
Luminanz: 0,118

Victorian Iris #6F687C

RGB: rgb(111, 104, 124)
HSL: hsl(261, 9%, 45%)
Luminanz: 0,147

Lilac Fields #91929B

RGB: rgb(145, 146, 155)
HSL: hsl(234, 5%, 59%)
Luminanz: 0,289

Noble Black #1D1E26

RGB: rgb(29, 30, 38)
HSL: hsl(233, 13%, 13%)
Luminanz: 0,013

Haiti #2E2A34

RGB: rgb(46, 42, 52)
HSL: hsl(264, 11%, 18%)
Luminanz: 0,025

Midnight Escapade #293455

RGB: rgb(41, 52, 85)
HSL: hsl(225, 35%, 25%)
Luminanz: 0,036

Bijou Blue #4C5F81

RGB: rgb(76, 95, 129)
HSL: hsl(218, 26%, 40%)
Luminanz: 0,113

Blue Rice #B4D8F7

RGB: rgb(180, 216, 247)
HSL: hsl(208, 81%, 84%)
Luminanz: 0,655

White #FFFFFF

RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Luminanz: 1,000

Spanish Purple #6E053D

RGB: rgb(110, 5, 61)
HSL: hsl(328, 91%, 23%)
Luminanz: 0,038

Red #FF0100

RGB: rgb(255, 1, 0)
HSL: hsl(0, 100%, 50%)
Luminanz: 0,213

Kontrast & Barrierefreiheit

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

Aa #1D1E26 auf #FFFFFF 16,59:1 AAA

Aa #2E2A34 auf #FFFFFF 14,03:1 AAA

Aa #293455 auf #FFFFFF 12,23:1 AAA

Aa #FFFFFF auf #6E053D 11,99:1 AAA

Aa #1D1E26 auf #B4D8F7 11,14:1 AAA

Aa #3E3F4A auf #FFFFFF 10,42:1 AAA

Aa #2E2A34 auf #B4D8F7 9,42:1 AAA

Aa #293455 auf #B4D8F7 8,22:1 AAA

Aa #B4D8F7 auf #6E053D 8,05:1 AAA

Aa #3E3F4A auf #B4D8F7 7,00:1 AAA

Aa #4C5F81 auf #FFFFFF 6,44:1 AA

Aa #5D606B auf #FFFFFF 6,27:1 AA

Aa #91929B auf #1D1E26 5,36:1 AA

Aa #6F687C auf #FFFFFF 5,32:1 AA

Aa #91929B auf #2E2A34 4,54:1 AA

Aa #4C5F81 auf #B4D8F7 4,33:1 AA (großer Text)

Aa #5D606B auf #B4D8F7 4,21:1 AA (großer Text)

Aa #1D1E26 auf #FF0100 4,15:1 AA (großer Text)

Aa #FFFFFF auf #FF0100 4,00:1 AA (großer Text)

Aa #91929B auf #293455 3,95:1 AA (großer Text)

Aa #91929B auf #6E053D 3,87:1 AA (großer Text)

Aa #6F687C auf #B4D8F7 3,57:1 AA (großer Text)

Aa #2E2A34 auf #FF0100 3,51:1 AA (großer Text)

Aa #3E3F4A auf #91929B 3,37:1 AA (großer Text)

Aa #6F687C auf #1D1E26 3,12:1 AA (großer Text)

Aa #91929B auf #FFFFFF 3,09:1 AA (großer Text)

Aa #293455 auf #FF0100 3,06:1 AA (großer Text)

Aa #6E053D auf #FF0100 3,00:1 AA (großer Text)

Aa #B4D8F7 auf #FF0100 2,68:1 Nicht bestanden

Aa #5D606B auf #1D1E26 2,65:1 Nicht bestanden

Aa #6F687C auf #2E2A34 2,64:1 Nicht bestanden

Aa #3E3F4A auf #FF0100 2,61:1 Nicht bestanden

Aa #1D1E26 auf #4C5F81 2,58:1 Nicht bestanden

Aa #6F687C auf #293455 2,30:1 Nicht bestanden

Aa #6F687C auf #6E053D 2,25:1 Nicht bestanden

Aa #5D606B auf #2E2A34 2,24:1 Nicht bestanden

Aa #2E2A34 auf #4C5F81 2,18:1 Nicht bestanden

Aa #91929B auf #4C5F81 2,08:1 Nicht bestanden

Aa #91929B auf #B4D8F7 2,08:1 Nicht bestanden

Aa #5D606B auf #91929B 2,03:1 Nicht bestanden

Aa #3E3F4A auf #6F687C 1,96:1 Nicht bestanden

Aa #5D606B auf #293455 1,95:1 Nicht bestanden

Aa #5D606B auf #6E053D 1,91:1 Nicht bestanden

Aa #293455 auf #4C5F81 1,90:1 Nicht bestanden

Aa #4C5F81 auf #6E053D 1,86:1 Nicht bestanden

Aa #6F687C auf #91929B 1,72:1 Nicht bestanden

Aa #3E3F4A auf #5D606B 1,66:1 Nicht bestanden

Aa #3E3F4A auf #4C5F81 1,62:1 Nicht bestanden

Aa #4C5F81 auf #FF0100 1,61:1 Nicht bestanden

Aa #3E3F4A auf #1D1E26 1,59:1 Nicht bestanden

Aa #5D606B auf #FF0100 1,57:1 Nicht bestanden

Aa #B4D8F7 auf #FFFFFF 1,49:1 Nicht bestanden

Aa #1D1E26 auf #6E053D 1,38:1 Nicht bestanden

Aa #1D1E26 auf #293455 1,36:1 Nicht bestanden

Aa #3E3F4A auf #2E2A34 1,35:1 Nicht bestanden

Aa #6F687C auf #FF0100 1,33:1 Nicht bestanden

Aa #91929B auf #FF0100 1,29:1 Nicht bestanden

Aa #6F687C auf #4C5F81 1,21:1 Nicht bestanden

Aa #5D606B auf #6F687C 1,18:1 Nicht bestanden

Aa #1D1E26 auf #2E2A34 1,18:1 Nicht bestanden

Aa #3E3F4A auf #293455 1,17:1 Nicht bestanden

Aa #2E2A34 auf #6E053D 1,17:1 Nicht bestanden

Aa #3E3F4A auf #6E053D 1,15:1 Nicht bestanden

Aa #2E2A34 auf #293455 1,15:1 Nicht bestanden

Aa #5D606B auf #4C5F81 1,03:1 Nicht bestanden

Aa #293455 auf #6E053D 1,02:1 Nicht bestanden

Hetzelfde

Hetzelfde

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen