命名颜色 · #BFC0AA
Sweet Clover
Sweet Clover 即 #BFC0AA：rgb(191 192 170)、hsl(63 15% 71%)、oklch(0.801 0.03 109.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Sweet Clover color name →
#BFC0AA
oklch(0.801 0.03 109.2)
颜色转换
- HEX
- #bfc0aa
- RGB
- rgb(191 192 170)
- HSL
- hsl(63 15% 71%)
- HWB
- hwb(63 67% 25%)
- OKLCH
- oklch(0.801 0.03 109.2)
- OKLab
- oklab(0.801 -0.01 0.029)
- CIE Lab
- lab(77.17 -3.23 11.02)
- LCH
- lch(77.17 11.48 106.3)
- CMYK
- cmyk(1% 0% 11% 25%)
浅色调 · 深色调 · 灰色调
浅色调
- C5C6B2
- CBCCBB
- D2D3C3
- D8D9CB
- DFDFD4
- E5E5DC
- EBECE5
- F2F2EE
- F8F9F6
深色调
- A6A793
- 8D8E7D
- 757668
- 5E5F53
- 48493F
- 33342D
- 1F201B
- 0D0E0B
- 020201
灰色调
- B8B9A6
- B2B3A2
- ACAC9D
- A5A699
- 9F9F95
- 999991
- 92938C
- 8C8C88
- 868684
配色和谐
互补色 +180°
- BFC0AA
Sweet Clover
- BDBBD1
≈ Twilight Pearl
类似色 -30° +30°
- BFC0AA
Sweet Clover
- C9BCA9
≈ Attic Linen
- B4C3B1
≈ Rainee
三角配色 +120° +240°
- BFC0AA
Sweet Clover
- ABC2CE
≈ Ruffled Feathers
- CEB7C1
≈ Blobfish
分裂互补色 +150° +210°
- BFC0AA
Sweet Clover
- B3BFD2
≈ Snow Flurries
- C7B8CB
≈ Softly Softly
四角配色 +90° +180° +270°
- BFC0AA
Sweet Clover
- A8C4C5
≈ Blende Blue
- BDBBD1
≈ Twilight Pearl
- D1B7B6
≈ Smoked Lavender
对比度与无障碍
Ag
Fail白底
WCAG 1.85:1 · APCA Lc 35
Ag
AAA黑底
WCAG 11.33:1 · APCA Lc 68
最佳文字颜色: #000000
WCAG 11.33:1 (AAA) · APCA Lc 68
Contrast pairs
代码片段
CSS
:root {
--sweet-clover: #bfc0aa;
--sweet-clover-rgb: 191 192 170;
--sweet-clover-oklch: oklch(0.801 0.03 109.2);
}
.element {
color: var(--sweet-clover);
background-color: hsl(63 15% 71%);
border-color: oklch(0.801 0.03 109.2);
}Tailwind CSS v4
@theme {
--color-sweet-clover: #bfc0aa;
--color-sweet-clover-50: #f5f6ec;
--color-sweet-clover-100: #e8e9de;
--color-sweet-clover-200: #d4d6c7;
--color-sweet-clover-300: #b8b9a8;
--color-sweet-clover-400: #9fa08c;
--color-sweet-clover-500: #878871;
--color-sweet-clover-600: #727360;
--color-sweet-clover-700: #5c5c4d;
--color-sweet-clover-800: #434337;
--color-sweet-clover-900: #2e2e26;
--color-sweet-clover-950: #1b1b14;
}SCSS
$sweet-clover: #bfc0aa;
$sweet-clover-rgb: 191, 192, 170;
$sweet-clover-light: mix(#fff, $sweet-clover, 20%);
$sweet-clover-dark: mix(#000, $sweet-clover, 20%);
.element {
color: $sweet-clover;
box-shadow: 0 0 0 2px rgba($sweet-clover, 0.35);
}