最接近的命名颜色 · #33442D
#33442D
最接近的命名颜色: Palm Leaf
#33442D（rgb(51 68 45)、hsl(104 20% 22%)、oklch(0.365 0.044 137.7)）最接近命名颜色 Palm Leaf。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#33442D
oklch(0.365 0.044 137.7)
颜色转换
- HEX
- #33442d
- RGB
- rgb(51 68 45)
- HSL
- hsl(104 20% 22%)
- HWB
- hwb(104 18% 73%)
- OKLCH
- oklch(0.365 0.044 137.7)
- OKLab
- oklab(0.365 -0.033 0.03)
- CIE Lab
- lab(26.85 -10.95 11.68)
- LCH
- lch(26.85 16.01 133.2)
- CMYK
- cmyk(25% 0% 34% 73%)
浅色调 · 深色调 · 灰色调
浅色调
- 45553F
- 576652
- 6B7866
- 7E8A7A
- 939C8F
- A7AFA5
- BDC3BB
- D2D7D1
- E8EBE8
深色调
- 2B3A26
- 23301F
- 1C2618
- 141D11
- 0D140B
- 070C06
- 030502
- 010201
- 000000
灰色调
- 3A4A35
- 42503D
- 495545
- 515B4D
- 586155
- 60675E
- 686E66
- 70746F
- 787A77
配色和谐
互补色 +180°
- 33442D
Palm Leaf
- 48374E
≈ Oregon Grape
类似色 -30° +30°
- 33442D
Palm Leaf
- 414024
≈ Strong Tone Wash
- 26463A
≈ Burnham
三角配色 +120° +240°
- 33442D
Palm Leaf
- 303F56
≈ Winter Sea
- 533536
≈ Mid Century
分裂互补色 +150° +210°
- 33442D
Palm Leaf
- 3D3B55
≈ Magic Night
- 503543
≈ Velvet Touch
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AAA白底
WCAG 10.47:1 · APCA Lc 94
Ag
Fail黑底
WCAG 2.00:1 · APCA Lc 8
最佳文字颜色: #FFFFFF
WCAG 10.47:1 (AAA) · APCA Lc 94
Contrast pairs
代码片段
CSS
:root {
--palm-leaf: #33442d;
--palm-leaf-rgb: 51 68 45;
--palm-leaf-oklch: oklch(0.365 0.044 137.7);
}
.element {
color: var(--palm-leaf);
background-color: hsl(104 20% 22%);
border-color: oklch(0.365 0.044 137.7);
}Tailwind CSS v4
@theme {
--color-palm-leaf: #33442d;
--color-palm-leaf-50: #eff8ed;
--color-palm-leaf-100: #e0ecde;
--color-palm-leaf-200: #cbd9c7;
--color-palm-leaf-300: #acbda8;
--color-palm-leaf-400: #92a58c;
--color-palm-leaf-500: #788d71;
--color-palm-leaf-600: #667860;
--color-palm-leaf-700: #51604c;
--color-palm-leaf-800: #3c4637;
--color-palm-leaf-900: #293025;
--color-palm-leaf-950: #171d14;
}SCSS
$palm-leaf: #33442d;
$palm-leaf-rgb: 51, 68, 45;
$palm-leaf-light: mix(#fff, $palm-leaf, 20%);
$palm-leaf-dark: mix(#000, $palm-leaf, 20%);
.element {
color: $palm-leaf;
box-shadow: 0 0 0 2px rgba($palm-leaf, 0.35);
}