Tetsuo

Palette mit 12 Farben · Warm · Dunkel · Harmonie: Komplementär

Zurück zur Bibliothek

Tetsuo

Palette mit 12 Farben · Temperatur: Warm · Ton: Dunkel · Harmonie: Komplementär

Bearbeiten

Gedeckt 12 Farben Warm Dunkel Komplementär manga anime mierdinsky comic

Likes 19

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #330033;
  --c-muted-2: #303030;
  --c-muted-3: #754402;
  --c-muted-4: #2A5B5B;
  --c-muted-5: #009999;
  --c-muted-6: #AA0000;
  --c-muted-7: #8F5F30;
  --c-muted-8: #696969;
  --c-muted-9: #BA5D2F;
  --c-muted-10: #996666;
  --c-muted-11: #CC9966;
  --c-muted-12: #FFCC66;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Qing Yellow (#FFCC66) bis zum dunkelsten Ton Exquisite Eggplant (#330033). Sie vereint Exquisite Eggplant, Off Black, Dusky Brown, Bayberry, Regula Barbara Blue, Heartbeat, Rusty Coin, Dim Grey, Gold Varnish Brown, Copper Rose, Oak Buff und Qing Yellow in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #330033 auf #FFCC66 mit 11,85:1.

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

Farben im Detail

Exquisite Eggplant #330033

RGB: rgb(51, 0, 51)
HSL: hsl(300, 100%, 10%)
Luminanz: 0,009

Off Black #303030

RGB: rgb(48, 48, 48)
HSL: hsl(0, 0%, 19%)
Luminanz: 0,030

Dusky Brown #754402

RGB: rgb(117, 68, 2)
HSL: hsl(34, 97%, 23%)
Luminanz: 0,079

Bayberry #2A5B5B

RGB: rgb(42, 91, 91)
HSL: hsl(180, 37%, 26%)
Luminanz: 0,087

Regula Barbara Blue #009999

RGB: rgb(0, 153, 153)
HSL: hsl(180, 100%, 30%)
Luminanz: 0,251

Heartbeat #AA0000

RGB: rgb(170, 0, 0)
HSL: hsl(0, 100%, 33%)
Luminanz: 0,086

Rusty Coin #8F5F30

RGB: rgb(143, 95, 48)
HSL: hsl(30, 50%, 37%)
Luminanz: 0,142

Dim Grey #696969

RGB: rgb(105, 105, 105)
HSL: hsl(0, 0%, 41%)
Luminanz: 0,141

Gold Varnish Brown #BA5D2F

RGB: rgb(186, 93, 47)
HSL: hsl(20, 60%, 46%)
Luminanz: 0,185

Copper Rose #996666

RGB: rgb(153, 102, 102)
HSL: hsl(0, 20%, 50%)
Luminanz: 0,172

Oak Buff #CC9966

RGB: rgb(204, 153, 102)
HSL: hsl(30, 50%, 60%)
Luminanz: 0,366

Qing Yellow #FFCC66

RGB: rgb(255, 204, 102)
HSL: hsl(40, 100%, 70%)
Luminanz: 0,654

Kontrast & Barrierefreiheit

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

Aa #330033 auf #FFCC66 11,85:1 AAA

Aa #303030 auf #FFCC66 8,85:1 AAA

Aa #330033 auf #CC9966 7,00:1 AAA

Aa #754402 auf #FFCC66 5,45:1 AA

Aa #303030 auf #CC9966 5,23:1 AA

Aa #AA0000 auf #FFCC66 5,20:1 AA

Aa #2A5B5B auf #FFCC66 5,13:1 AA

Aa #330033 auf #009999 5,06:1 AA

Aa #330033 auf #BA5D2F 3,95:1 AA (großer Text)

Aa #303030 auf #009999 3,78:1 AA (großer Text)

Aa #330033 auf #996666 3,74:1 AA (großer Text)

Aa #696969 auf #FFCC66 3,68:1 AA (großer Text)

Aa #8F5F30 auf #FFCC66 3,66:1 AA (großer Text)

Aa #330033 auf #8F5F30 3,24:1 AA (großer Text)

Aa #330033 auf #696969 3,22:1 AA (großer Text)

Aa #754402 auf #CC9966 3,22:1 AA (großer Text)

Aa #996666 auf #FFCC66 3,17:1 AA (großer Text)

Aa #AA0000 auf #CC9966 3,07:1 AA (großer Text)

Aa #2A5B5B auf #CC9966 3,03:1 AA (großer Text)

Aa #BA5D2F auf #FFCC66 3,00:1 AA (großer Text)

Aa #303030 auf #BA5D2F 2,95:1 Nicht bestanden

Aa #303030 auf #996666 2,79:1 Nicht bestanden

Aa #303030 auf #8F5F30 2,42:1 Nicht bestanden

Aa #303030 auf #696969 2,40:1 Nicht bestanden

Aa #009999 auf #FFCC66 2,34:1 Nicht bestanden

Aa #754402 auf #009999 2,33:1 Nicht bestanden

Aa #330033 auf #2A5B5B 2,31:1 Nicht bestanden

Aa #330033 auf #AA0000 2,28:1 Nicht bestanden

Aa #009999 auf #AA0000 2,22:1 Nicht bestanden

Aa #2A5B5B auf #009999 2,19:1 Nicht bestanden

Aa #330033 auf #754402 2,17:1 Nicht bestanden

Aa #696969 auf #CC9966 2,17:1 Nicht bestanden

Aa #8F5F30 auf #CC9966 2,16:1 Nicht bestanden

Aa #996666 auf #CC9966 1,87:1 Nicht bestanden

Aa #754402 auf #BA5D2F 1,82:1 Nicht bestanden

Aa #BA5D2F auf #CC9966 1,77:1 Nicht bestanden

Aa #303030 auf #2A5B5B 1,73:1 Nicht bestanden

Aa #AA0000 auf #BA5D2F 1,73:1 Nicht bestanden

Aa #754402 auf #996666 1,72:1 Nicht bestanden

Aa #2A5B5B auf #BA5D2F 1,71:1 Nicht bestanden

Aa #303030 auf #AA0000 1,70:1 Nicht bestanden

Aa #CC9966 auf #FFCC66 1,69:1 Nicht bestanden

Aa #AA0000 auf #996666 1,64:1 Nicht bestanden

Aa #303030 auf #754402 1,62:1 Nicht bestanden

Aa #2A5B5B auf #996666 1,62:1 Nicht bestanden

Aa #009999 auf #696969 1,57:1 Nicht bestanden

Aa #009999 auf #8F5F30 1,56:1 Nicht bestanden

Aa #754402 auf #8F5F30 1,49:1 Nicht bestanden

Aa #754402 auf #696969 1,48:1 Nicht bestanden

Aa #AA0000 auf #8F5F30 1,42:1 Nicht bestanden

Aa #AA0000 auf #696969 1,41:1 Nicht bestanden

Aa #2A5B5B auf #8F5F30 1,40:1 Nicht bestanden

Aa #2A5B5B auf #696969 1,39:1 Nicht bestanden

Aa #009999 auf #CC9966 1,38:1 Nicht bestanden

Aa #009999 auf #996666 1,35:1 Nicht bestanden

Aa #330033 auf #303030 1,34:1 Nicht bestanden

Aa #009999 auf #BA5D2F 1,28:1 Nicht bestanden

Aa #696969 auf #BA5D2F 1,23:1 Nicht bestanden

Aa #8F5F30 auf #BA5D2F 1,22:1 Nicht bestanden

Aa #8F5F30 auf #996666 1,16:1 Nicht bestanden

Aa #696969 auf #996666 1,16:1 Nicht bestanden

Aa #754402 auf #2A5B5B 1,06:1 Nicht bestanden

Aa #BA5D2F auf #996666 1,06:1 Nicht bestanden

Aa #754402 auf #AA0000 1,05:1 Nicht bestanden

Aa #2A5B5B auf #AA0000 1,01:1 Nicht bestanden

Aa #8F5F30 auf #696969 1,01:1 Nicht bestanden

Tetsuo

Tetsuo

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen