命名颜色 · #D8C475
Grassroots
Grassroots 即 #D8C475：rgb(216 196 117)、hsl(48 56% 65%)、oklch(0.82 0.102 95.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Grassroots color name →
#D8C475
oklch(0.82 0.102 95.6)
颜色转换
- HEX
- #d8c475
- RGB
- rgb(216 196 117)
- HSL
- hsl(48 56% 65%)
- HWB
- hwb(48 46% 15%)
- OKLCH
- oklch(0.82 0.102 95.6)
- OKLab
- oklab(0.82 -0.01 0.101)
- CIE Lab
- lab(79.57 -0.47 42.16)
- LCH
- lch(79.57 42.16 90.6)
- CMYK
- cmyk(0% 9% 46% 15%)
浅色调 · 深色调 · 灰色调
浅色调
- DCCA84
- E0D092
- E4D6A0
- E7DCAE
- EBE2BC
- EFE8C9
- F3EED7
- F7F3E4
- FBF9F2
深色调
- BCAA65
- A09155
- 857846
- 6B6137
- 534A29
- 3B351C
- 25210F
- 110E05
- 020201
灰色调
- CFBD77
- C6B679
- BDAF7B
- B4A97D
- ABA27E
- A29B7F
- 99947F
- 918D80
- 888780
配色和谐
互补色 +180°
- D8C475
Grassroots
- B3C0FF
≈ Dried Lilac
类似色 -30° +30°
- D8C475
Grassroots
- F2B77C
≈ Sunburst
- B4D087
≈ Lettuce Green
三角配色 +120° +240°
- D8C475
Grassroots
- 6ED5EE
≈ Middle Blue
- EEABDE
≈ Pretty Pink Piggy
分裂互补色 +150° +210°
- D8C475
Grassroots
- 8FCBFF
≈ Clear Sky
- D4B3F9
≈ Light Violet
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.73:1 · APCA Lc 32
Ag
AAA黑底
WCAG 12.07:1 · APCA Lc 71
最佳文字颜色: #000000
WCAG 12.07:1 (AAA) · APCA Lc 71
Contrast pairs
代码片段
CSS
:root {
--grassroots: #d8c475;
--grassroots-rgb: 216 196 117;
--grassroots-oklch: oklch(0.82 0.102 95.6);
}
.element {
color: var(--grassroots);
background-color: hsl(48 56% 65%);
border-color: oklch(0.82 0.102 95.6);
}Tailwind CSS v4
@theme {
--color-grassroots: #d8c475;
--color-grassroots-50: #fdf6d5;
--color-grassroots-100: #f1e9c2;
--color-grassroots-200: #e0d5a3;
--color-grassroots-300: #c5b87b;
--color-grassroots-400: #b19e54;
--color-grassroots-500: #9b8528;
--color-grassroots-600: #837124;
--color-grassroots-700: #695a1d;
--color-grassroots-800: #4e4112;
--color-grassroots-900: #362d0b;
--color-grassroots-950: #211a01;
}SCSS
$grassroots: #d8c475;
$grassroots-rgb: 216, 196, 117;
$grassroots-light: mix(#fff, $grassroots, 20%);
$grassroots-dark: mix(#000, $grassroots, 20%);
.element {
color: $grassroots;
box-shadow: 0 0 0 2px rgba($grassroots, 0.35);
}