最接近的命名颜色 · #53382A
#53382A
最接近的命名颜色: Espresso Bar
#53382A（rgb(83 56 42)、hsl(20 33% 25%)、oklch(0.368 0.045 48.3)）最接近命名颜色 Espresso Bar。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#53382A
oklch(0.368 0.045 48.3)
颜色转换
- HEX
- #53382a
- RGB
- rgb(83 56 42)
- HSL
- hsl(20 33% 25%)
- HWB
- hwb(20 16% 67%)
- OKLCH
- oklch(0.368 0.045 48.3)
- OKLab
- oklab(0.368 0.03 0.034)
- CIE Lab
- lab(26.45 10.96 13.82)
- LCH
- lch(26.45 17.64 51.6)
- CMYK
- cmyk(0% 33% 49% 67%)
浅色调 · 深色调 · 灰色调
浅色调
- 634A3D
- 735C50
- 846F64
- 958279
- A6968E
- B7AAA3
- C9BFBA
- DBD4D0
- EDE9E7
深色调
- 472F23
- 3B271C
- 301F16
- 251710
- 1B0F0A
- 110805
- 080402
- 020101
- 000000
灰色调
- 583F32
- 5C463A
- 614D43
- 65544B
- 6A5B54
- 6E625C
- 736A65
- 77716E
- 7C7977
配色和谐
互补色 +180°
- 53382A
Espresso Bar
- 244452
≈ Rainstorm
类似色 -30° +30°
- 53382A
Espresso Bar
- 553536
≈ Mid Century
- 4C3C23
≈ Witch’s Cottage
三角配色 +120° +240°
- 53382A
Espresso Bar
- 26473B
≈ Wine Bottle Green
- 3E3B56
≈ Magic Night
分裂互补色 +150° +210°
- 53382A
Espresso Bar
- 1E4748
≈ Prestige Green
- 304057
≈ Pi
四角配色 +90° +180° +270°
- 53382A
Espresso Bar
- 33452E
≈ Palm Leaf
- 244452
≈ Rainstorm
- 49384F
≈ Gothic Grape
对比度与无障碍
Ag
AAA白底
WCAG 10.67:1 · APCA Lc 95
Ag
Fail黑底
WCAG 1.96:1 · APCA Lc 8
最佳文字颜色: #FFFFFF
WCAG 10.67:1 (AAA) · APCA Lc 95
Contrast pairs
代码片段
CSS
:root {
--espresso-bar: #53382a;
--espresso-bar-rgb: 83 56 42;
--espresso-bar-oklch: oklch(0.368 0.045 48.3);
}
.element {
color: var(--espresso-bar);
background-color: hsl(20 33% 25%);
border-color: oklch(0.368 0.045 48.3);
}Tailwind CSS v4
@theme {
--color-espresso-bar: #53382a;
--color-espresso-bar-50: #fff2ea;
--color-espresso-bar-100: #f5e4db;
--color-espresso-bar-200: #e5cfc3;
--color-espresso-bar-300: #cbb1a3;
--color-espresso-bar-400: #b69788;
--color-espresso-bar-500: #a07e6c;
--color-espresso-bar-600: #876a5c;
--color-espresso-bar-700: #6c5549;
--color-espresso-bar-800: #503e35;
--color-espresso-bar-900: #382a24;
--color-espresso-bar-950: #221813;
}SCSS
$espresso-bar: #53382a;
$espresso-bar-rgb: 83, 56, 42;
$espresso-bar-light: mix(#fff, $espresso-bar, 20%);
$espresso-bar-dark: mix(#000, $espresso-bar, 20%);
.element {
color: $espresso-bar;
box-shadow: 0 0 0 2px rgba($espresso-bar, 0.35);
}