命名颜色 · #8D725A
Cocoa Delight
Cocoa Delight 即 #8D725A：rgb(141 114 90)、hsl(28 22% 45%)、oklch(0.572 0.049 63.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Brown mean? → · Cocoa Delight color name →
#8D725A
oklch(0.572 0.049 63.2)
颜色转换
- HEX
- #8d725a
- RGB
- rgb(141 114 90)
- HSL
- hsl(28 22% 45%)
- HWB
- hwb(28 35% 45%)
- OKLCH
- oklch(0.572 0.049 63.2)
- OKLab
- oklab(0.572 0.022 0.044)
- CIE Lab
- lab(50.23 8.31 17.55)
- LCH
- lch(50.23 19.42 64.7)
- CMYK
- cmyk(0% 19% 36% 45%)
浅色调 · 深色调 · 灰色调
浅色调
- 987F69
- A38D79
- AE9A89
- BAA899
- C5B6AA
- D0C4BA
- DCD3CB
- E8E1DC
- F3F0ED
深色调
- 7A624D
- 675341
- 554435
- 443629
- 33281E
- 231B13
- 140E09
- 070403
- 010100
灰色调
- 8C735E
- 8B7562
- 897666
- 88786A
- 87796D
- 867B71
- 847C75
- 837D79
- 817F7C
配色和谐
互补色 +180°
- 8D725A
Cocoa Delight
- 5F7C93
≈ Provincial Blue
类似色 -30° +30°
- 8D725A
Cocoa Delight
- 926E65
≈ Prairie Dog
- 827857
≈ Olive Ochre
三角配色 +120° +240°
- 8D725A
Cocoa Delight
- 57827B
≈ Hanging Moss
- 7E7190
≈ Provence Violet
分裂互补色 +150° +210°
- 8D725A
Cocoa Delight
- 558089
≈ Cape Lee
- 6E7695
≈ Lavender Mauve
四角配色 +90° +180° +270°
- 8D725A
Cocoa Delight
- 62816A
≈ Jadite
- 5F7C93
≈ Provincial Blue
- 8A6D84
≈ Purple Grey
对比度与无障碍
Ag
Fail白底
WCAG 4.48:1 · APCA Lc 71
Ag
AA黑底
WCAG 4.68:1 · APCA Lc 31
最佳文字颜色: #000000
WCAG 4.68:1 (AA) · APCA Lc 31
Contrast pairs
代码片段
CSS
:root {
--cocoa-delight: #8d725a;
--cocoa-delight-rgb: 141 114 90;
--cocoa-delight-oklch: oklch(0.572 0.049 63.2);
}
.element {
color: var(--cocoa-delight);
background-color: hsl(28 22% 45%);
border-color: oklch(0.572 0.049 63.2);
}Tailwind CSS v4
@theme {
--color-cocoa-delight: #8d725a;
--color-cocoa-delight-50: #fff3e7;
--color-cocoa-delight-100: #f4e5d7;
--color-cocoa-delight-200: #e3d1bf;
--color-cocoa-delight-300: #c9b39e;
--color-cocoa-delight-400: #b49981;
--color-cocoa-delight-500: #9e8065;
--color-cocoa-delight-600: #856c55;
--color-cocoa-delight-700: #6b5644;
--color-cocoa-delight-800: #4f3f31;
--color-cocoa-delight-900: #372b21;
--color-cocoa-delight-950: #221811;
}SCSS
$cocoa-delight: #8d725a;
$cocoa-delight-rgb: 141, 114, 90;
$cocoa-delight-light: mix(#fff, $cocoa-delight, 20%);
$cocoa-delight-dark: mix(#000, $cocoa-delight, 20%);
.element {
color: $cocoa-delight;
box-shadow: 0 0 0 2px rgba($cocoa-delight, 0.35);
}