命名颜色 · #C4B146
Hep Green
Hep Green 即 #C4B146：rgb(196 177 70)、hsl(51 52% 52%)、oklch(0.756 0.128 99.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Hep Green color name →
#C4B146
oklch(0.756 0.128 99.2)
颜色转换
- HEX
- #c4b146
- RGB
- rgb(196 177 70)
- HSL
- hsl(51 52% 52%)
- HWB
- hwb(51 27% 23%)
- OKLCH
- oklch(0.756 0.128 99.2)
- OKLab
- oklab(0.756 -0.02 0.126)
- CIE Lab
- lab(72.34 -2.14 55.32)
- LCH
- lch(72.34 55.37 92.2)
- CMYK
- cmyk(0% 10% 64% 23%)
浅色调 · 深色调 · 灰色调
浅色调
- CAB95D
- CFC171
- D5C984
- DBD196
- E1D8A8
- E7E0BA
- EDE8CB
- F3F0DC
- F9F7EE
深色调
- AA993C
- 918332
- 786C28
- 61571E
- 4A4215
- 352F0D
- 211C05
- 0E0C02
- 020100
灰色调
- BDAC50
- B6A758
- AFA35F
- A89E65
- A1996B
- 9A9470
- 948F74
- 8D8A79
- 86857C
配色和谐
互补色 +180°
- C4B146
Hep Green
- 9FA7FF
≈ Widowmaker
类似色 -30° +30°
- C4B146
Hep Green
- E4A04D
≈ Granary Gold
- 96C065
≈ Green Pepper
三角配色 +120° +240°
- C4B146
Hep Green
- 2EC2E7
≈ Blue Raspberry
- E58FCA
≈ Blushed Bombshell
分裂互补色 +150° +210°
- C4B146
Hep Green
- 6CB6FD
≈ French Sky Blue
- C899ED
≈ Dream Vapour
四角配色 +90° +180° +270°
- C4B146
Hep Green
- 1AC9C1
≈ Swimmers Pool
- 9FA7FF
≈ Widowmaker
- F48C9F
≈ Wonder Lust
对比度与无障碍
Ag
Fail白底
WCAG 2.15:1 · APCA Lc 42
Ag
AAA黑底
WCAG 9.72:1 · APCA Lc 60
最佳文字颜色: #000000
WCAG 9.72:1 (AAA) · APCA Lc 60
Contrast pairs
代码片段
CSS
:root {
--hep-green: #c4b146;
--hep-green-rgb: 196 177 70;
--hep-green-oklch: oklch(0.756 0.128 99.2);
}
.element {
color: var(--hep-green);
background-color: hsl(51 52% 52%);
border-color: oklch(0.756 0.128 99.2);
}Tailwind CSS v4
@theme {
--color-hep-green: #c4b146;
--color-hep-green-50: #fcf7cd;
--color-hep-green-100: #f0eab9;
--color-hep-green-200: #dfd797;
--color-hep-green-300: #c5ba6a;
--color-hep-green-400: #b19f3a;
--color-hep-green-500: #9b8600;
--color-hep-green-600: #837200;
--color-hep-green-700: #695b00;
--color-hep-green-800: #4f4200;
--color-hep-green-900: #372d00;
--color-hep-green-950: #221a00;
}SCSS
$hep-green: #c4b146;
$hep-green-rgb: 196, 177, 70;
$hep-green-light: mix(#fff, $hep-green, 20%);
$hep-green-dark: mix(#000, $hep-green, 20%);
.element {
color: $hep-green;
box-shadow: 0 0 0 2px rgba($hep-green, 0.35);
}