命名颜色 · #BAD7AE
Bleached Spruce
Bleached Spruce 即 #BAD7AE：rgb(186 215 174)、hsl(102 34% 76%)、oklch(0.847 0.064 136.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Bleached Spruce color name →
#BAD7AE
oklch(0.847 0.064 136.6)
颜色转换
- HEX
- #bad7ae
- RGB
- rgb(186 215 174)
- HSL
- hsl(102 34% 76%)
- HWB
- hwb(102 68% 16%)
- OKLCH
- oklch(0.847 0.064 136.6)
- OKLab
- oklab(0.847 -0.046 0.044)
- CIE Lab
- lab(83.02 -15.61 16.95)
- LCH
- lch(83.02 23.05 132.6)
- CMYK
- cmyk(13% 0% 19% 16%)
浅色调 · 深色调 · 灰色调
浅色调
- C1DBB6
- C8DFBE
- CEE3C6
- D5E7CE
- DCEBD6
- E3EFDE
- EAF3E6
- F1F7EF
- F8FBF7
深色调
- A1BB97
- 899F80
- 72856A
- 5C6B55
- 465241
- 323B2E
- 1E251C
- 0D110B
- 020201
灰色调
- B4CEA9
- AEC5A5
- A8BCA0
- A3B39C
- 9DAB97
- 97A292
- 91998E
- 8B9189
- 868885
配色和谐
互补色 +180°
- BAD7AE
Bleached Spruce
- DEC1E9
≈ Glittering Gemstone
类似色 -30° +30°
- BAD7AE
Bleached Spruce
- D1D0A0
≈ Calming Effect
- A5DBC4
≈ Shanghai Jade
三角配色 +120° +240°
- BAD7AE
Bleached Spruce
- B2CFF7
≈ Ice Cold Stare
- F4BDBE
≈ Petals Unfolding
分裂互补色 +150° +210°
- BAD7AE
Bleached Spruce
- C9C7F5
≈ Soap
- EDBDD5
≈ Sweet Taffy
四角配色 +90° +180° +270°
- BAD7AE
Bleached Spruce
- A1D6ED
≈ Soft Summer Rain
- DEC1E9
≈ Glittering Gemstone
- F1C1AA
≈ Cosmetic Peach
对比度与无障碍
Ag
Fail白底
WCAG 1.56:1 · APCA Lc 26
Ag
AAA黑底
WCAG 13.41:1 · APCA Lc 77
最佳文字颜色: #000000
WCAG 13.41:1 (AAA) · APCA Lc 77
Contrast pairs
代码片段
CSS
:root {
--bleached-spruce: #bad7ae;
--bleached-spruce-rgb: 186 215 174;
--bleached-spruce-oklch: oklch(0.847 0.064 136.6);
}
.element {
color: var(--bleached-spruce);
background-color: hsl(102 34% 76%);
border-color: oklch(0.847 0.064 136.6);
}Tailwind CSS v4
@theme {
--color-bleached-spruce: #bad7ae;
--color-bleached-spruce-50: #ecfae8;
--color-bleached-spruce-100: #deedd9;
--color-bleached-spruce-200: #c7dbc1;
--color-bleached-spruce-300: #a8c0a0;
--color-bleached-spruce-400: #8da882;
--color-bleached-spruce-500: #739066;
--color-bleached-spruce-600: #617a57;
--color-bleached-spruce-700: #4e6245;
--color-bleached-spruce-800: #394731;
--color-bleached-spruce-900: #273121;
--color-bleached-spruce-950: #151d11;
}SCSS
$bleached-spruce: #bad7ae;
$bleached-spruce-rgb: 186, 215, 174;
$bleached-spruce-light: mix(#fff, $bleached-spruce, 20%);
$bleached-spruce-dark: mix(#000, $bleached-spruce, 20%);
.element {
color: $bleached-spruce;
box-shadow: 0 0 0 2px rgba($bleached-spruce, 0.35);
}