Benannte Farbe · #746A5A
Toasted Walnut
Toasted Walnut ist #746A5A: rgb(116 106 90), hsl(37 13% 40%), oklch(0.529 0.027 79.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Toasted Walnut color name →
#746A5A
oklch(0.529 0.027 79.6)
Farbumrechnungen
- HEX
- #746a5a
- RGB
- rgb(116 106 90)
- HSL
- hsl(37 13% 40%)
- HWB
- hwb(37 35% 55%)
- OKLCH
- oklch(0.529 0.027 79.6)
- OKLab
- oklab(0.529 0.005 0.027)
- CIE Lab
- lab(45.41 1.97 10.52)
- LCH
- lch(45.41 10.71 79.4)
- CMYK
- cmyk(0% 9% 22% 55%)
Tints · Shades · Tones
Tints
- 817869
- 8E8679
- 9C9488
- A9A399
- B7B2A9
- C5C1BA
- D3D0CB
- E2DFDC
- F0EFED
Shades
- 645B4D
- 544D41
- 453F35
- 373129
- 29241E
- 1B1813
- 0F0D09
- 050403
- 010000
Tones
- 756C5E
- 766E62
- 787165
- 797369
- 7A756D
- 7B7771
- 7C7975
- 7E7C78
- 7F7E7C
Farbharmonien
Komplementär +180°
- 746A5A
Toasted Walnut
- 626C7C
≈ Ashen Whisper
Analog -30° +30°
- 746A5A
Toasted Walnut
- 79675E
≈ Sea Elephant
- 6C6D5B
≈ Coastline Trail
Triadisch +120° +240°
- 746A5A
Toasted Walnut
- 597172
≈ Porch Swing
- 736776
≈ Rum
Geteilt komplementär +150° +210°
- 746A5A
Toasted Walnut
- 5C6F78
≈ NYPD
- 6B697B
≈ Wind Cave
Tetradisch +90° +180° +270°
- 746A5A
Toasted Walnut
- 5C7169
≈ Rocky River
- 626C7C
≈ Ashen Whisper
- 78656E
≈ Burnt Ash
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 5.31:1 · APCA Lc 76
Ag
FailAuf Schwarz
WCAG 3.95:1 · APCA Lc 25
Beste Textfarbe: #FFFFFF
WCAG 5.31:1 (AA) · APCA Lc 76
Contrast pairs
Code-Snippets
CSS
:root {
--toasted-walnut: #746a5a;
--toasted-walnut-rgb: 116 106 90;
--toasted-walnut-oklch: oklch(0.529 0.027 79.6);
}
.element {
color: var(--toasted-walnut);
background-color: hsl(37 13% 40%);
border-color: oklch(0.529 0.027 79.6);
}Tailwind CSS v4
@theme {
--color-toasted-walnut: #746a5a;
--color-toasted-walnut-50: #f9f4ed;
--color-toasted-walnut-100: #ece7de;
--color-toasted-walnut-200: #dad3c7;
--color-toasted-walnut-300: #beb6a8;
--color-toasted-walnut-400: #a79d8d;
--color-toasted-walnut-500: #908472;
--color-toasted-walnut-600: #7a7061;
--color-toasted-walnut-700: #615a4d;
--color-toasted-walnut-800: #484138;
--color-toasted-walnut-900: #322d26;
--color-toasted-walnut-950: #1e1a15;
}SCSS
$toasted-walnut: #746a5a;
$toasted-walnut-rgb: 116, 106, 90;
$toasted-walnut-light: mix(#fff, $toasted-walnut, 20%);
$toasted-walnut-dark: mix(#000, $toasted-walnut, 20%);
.element {
color: $toasted-walnut;
box-shadow: 0 0 0 2px rgba($toasted-walnut, 0.35);
}