命名颜色 · #744E42
Leather Clutch
Leather Clutch 即 #744E42：rgb(116 78 66)、hsl(14 27% 36%)、oklch(0.463 0.055 38.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Leather Clutch color name →
#744E42
oklch(0.463 0.055 38.3)
颜色转换
- HEX
- #744e42
- RGB
- rgb(116 78 66)
- HSL
- hsl(14 27% 36%)
- HWB
- hwb(14 26% 55%)
- OKLCH
- oklch(0.463 0.055 38.3)
- OKLab
- oklab(0.463 0.043 0.034)
- CIE Lab
- lab(37.26 15.33 13.94)
- LCH
- lch(37.26 20.72 42.3)
- CMYK
- cmyk(0% 33% 43% 55%)
浅色调 · 深色调 · 灰色调
浅色调
- 825E53
- 8F6F65
- 9D8077
- AB9189
- B8A39C
- C6B5AF
- D4C7C2
- E3D9D6
- F1ECEA
深色调
- 644338
- 54382F
- 452D25
- 37231C
- 291914
- 1B0F0B
- 0F0705
- 050201
- 010000
灰色调
- 765348
- 77584E
- 785D54
- 7A625A
- 7B6761
- 7C6C67
- 7D716D
- 7E7673
- 7F7B7A
配色和谐
互补色 +180°
- 744E42
Leather Clutch
- 31606D
≈ After the Storm
类似色 -30° +30°
- 744E42
Leather Clutch
- 744C53
≈ Madder
- 6D5336
≈ Ancient Olive
三角配色 +120° +240°
- 744E42
Leather Clutch
- 3D624D
≈ Serbian Green
- 515678
≈ Deep Orchid
分裂互补色 +150° +210°
- 744E42
Leather Clutch
- 30635F
≈ Strong Sage
- 405C77
≈ China Pattern
四角配色 +90° +180° +270°
- 744E42
Leather Clutch
- 505F3D
≈ Shallot Leaf
- 31606D
≈ After the Storm
- 615071
≈ Futaai Indigo
对比度与无障碍
Ag
AAA白底
WCAG 7.21:1 · APCA Lc 85
Ag
Fail黑底
WCAG 2.91:1 · APCA Lc 17
最佳文字颜色: #FFFFFF
WCAG 7.21:1 (AAA) · APCA Lc 85
Contrast pairs
代码片段
CSS
:root {
--leather-clutch: #744e42;
--leather-clutch-rgb: 116 78 66;
--leather-clutch-oklch: oklch(0.463 0.055 38.3);
}
.element {
color: var(--leather-clutch);
background-color: hsl(14 27% 36%);
border-color: oklch(0.463 0.055 38.3);
}Tailwind CSS v4
@theme {
--color-leather-clutch: #744e42;
--color-leather-clutch-50: #fff0e9;
--color-leather-clutch-100: #f9e2da;
--color-leather-clutch-200: #eacdc3;
--color-leather-clutch-300: #d1afa2;
--color-leather-clutch-400: #bc9487;
--color-leather-clutch-500: #a77a6c;
--color-leather-clutch-600: #8d675b;
--color-leather-clutch-700: #715249;
--color-leather-clutch-800: #543c35;
--color-leather-clutch-900: #3a2924;
--color-leather-clutch-950: #241713;
}SCSS
$leather-clutch: #744e42;
$leather-clutch-rgb: 116, 78, 66;
$leather-clutch-light: mix(#fff, $leather-clutch, 20%);
$leather-clutch-dark: mix(#000, $leather-clutch, 20%);
.element {
color: $leather-clutch;
box-shadow: 0 0 0 2px rgba($leather-clutch, 0.35);
}