最接近的命名颜色 · #553F1F
#553F1F
最接近的命名颜色: Avocado Stone
#553F1F（rgb(85 63 31)、hsl(36 47% 23%)、oklch(0.384 0.056 75.1)）最接近命名颜色 Avocado Stone。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#553F1F
oklch(0.384 0.056 75.1)
颜色转换
- HEX
- #553f1f
- RGB
- rgb(85 63 31)
- HSL
- hsl(36 47% 23%)
- HWB
- hwb(36 12% 67%)
- OKLCH
- oklch(0.384 0.056 75.1)
- OKLab
- oklab(0.384 0.014 0.054)
- CIE Lab
- lab(28.56 6.86 23.23)
- LCH
- lch(28.56 24.22 73.6)
- CMYK
- cmyk(0% 26% 64% 67%)
浅色调 · 深色调 · 灰色调
浅色调
- 655034
- 756248
- 85745E
- 968773
- A69A89
- B8ADA0
- C9C1B7
- DBD6CE
- EDEAE7
深色调
- 493519
- 3D2C14
- 31230F
- 261B0A
- 1C1206
- 110A03
- 080401
- 020100
- 000000
灰色调
- 594529
- 5E4C33
- 62523C
- 665946
- 6B5F50
- 6F6659
- 736C63
- 77736C
- 7C7976
配色和谐
互补色 +180°
- 553F1F
Avocado Stone
- 2F4561
≈ Stay the Night
类似色 -30° +30°
- 553F1F
Avocado Stone
- 5C3A2A
≈ Cioccolato
- 484520
≈ Uniform Green
三角配色 +120° +240°
- 553F1F
Avocado Stone
- 154D4D
≈ Port Malmesbury
- 4F3A58
≈ Dark Blackberry
分裂互补色 +150° +210°
- 553F1F
Avocado Stone
- 1D4A5A
≈ Ethereal Dance
- 403F60
≈ Church Blue
四角配色 +90° +180° +270°
- 553F1F
Avocado Stone
- 234D3C
≈ Springbok Green
- 2F4561
≈ Stay the Night
- 59374A
≈ Dulcet Violet
对比度与无障碍
Ag
AAA白底
WCAG 9.91:1 · APCA Lc 93
Ag
Fail黑底
WCAG 2.11:1 · APCA Lc 10
最佳文字颜色: #FFFFFF
WCAG 9.91:1 (AAA) · APCA Lc 93
Contrast pairs
代码片段
CSS
:root {
--avocado-stone: #553f1f;
--avocado-stone-rgb: 85 63 31;
--avocado-stone-oklch: oklch(0.384 0.056 75.1);
}
.element {
color: var(--avocado-stone);
background-color: hsl(36 47% 23%);
border-color: oklch(0.384 0.056 75.1);
}Tailwind CSS v4
@theme {
--color-avocado-stone: #553f1f;
--color-avocado-stone-50: #fef3e4;
--color-avocado-stone-100: #f3e6d4;
--color-avocado-stone-200: #e2d2ba;
--color-avocado-stone-300: #c8b498;
--color-avocado-stone-400: #b29a7a;
--color-avocado-stone-500: #9c815c;
--color-avocado-stone-600: #846d4e;
--color-avocado-stone-700: #6a573e;
--color-avocado-stone-800: #4e3f2d;
--color-avocado-stone-900: #372c1e;
--color-avocado-stone-950: #21190e;
}SCSS
$avocado-stone: #553f1f;
$avocado-stone-rgb: 85, 63, 31;
$avocado-stone-light: mix(#fff, $avocado-stone, 20%);
$avocado-stone-dark: mix(#000, $avocado-stone, 20%);
.element {
color: $avocado-stone;
box-shadow: 0 0 0 2px rgba($avocado-stone, 0.35);
}