命名颜色 · #B3D157
Citrus Leaf
Citrus Leaf 即 #B3D157：rgb(179 209 87)、hsl(75 57% 58%)、oklch(0.814 0.152 121.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Citrus Leaf color name →
#B3D157
oklch(0.814 0.152 121.5)
颜色转换
- HEX
- #b3d157
- RGB
- rgb(179 209 87)
- HSL
- hsl(75 57% 58%)
- HWB
- hwb(75 34% 18%)
- OKLCH
- oklch(0.814 0.152 121.5)
- OKLab
- oklab(0.814 -0.079 0.13)
- CIE Lab
- lab(79.79 -23.42 55.44)
- LCH
- lch(79.79 60.18 112.9)
- CMYK
- cmyk(14% 0% 58% 18%)
浅色调 · 深色调 · 灰色调
浅色调
- BAD66B
- C2DB7E
- C9E090
- D0E4A0
- D8E9B1
- E0EDC1
- E7F2D0
- EFF6E0
- F7FBF0
深色调
- 9BB54B
- 849B3E
- 6E8133
- 586827
- 43501C
- 2F3912
- 1D2308
- 0C1003
- 010200
灰色调
- AEC95E
- A8C165
- A3B96A
- 9EB06F
- 99A873
- 94A076
- 8F9879
- 8A907C
- 85887E
配色和谐
互补色 +180°
- B3D157
Citrus Leaf
- CFB1FF
≈ Teasel Dipsacus
类似色 -30° +30°
- B3D157
Citrus Leaf
- E6BE34
≈ Bright Sun
- 6DDE8F
≈ Aurora Green
三角配色 +120° +240°
- B3D157
Citrus Leaf
- 84CBFF
≈ Platonic Blue
- FFA3BD
≈ Amélie’s Tutu
分裂互补色 +150° +210°
- B3D157
Citrus Leaf
- ACBFFF
≈ Pastel Blue
- FA9CEE
≈ Pink Elephants
四角配色 +90° +180° +270°
- B3D157
Citrus Leaf
- 00DAF6
≈ Neon Blue
- CFB1FF
≈ Teasel Dipsacus
- FFA998
≈ Honey Baked Ham
对比度与无障碍
Ag
Fail白底
WCAG 1.72:1 · APCA Lc 31
Ag
AAA黑底
WCAG 12.17:1 · APCA Lc 72
最佳文字颜色: #000000
WCAG 12.17:1 (AAA) · APCA Lc 72
Contrast pairs
代码片段
CSS
:root {
--citrus-leaf: #b3d157;
--citrus-leaf-rgb: 179 209 87;
--citrus-leaf-oklch: oklch(0.814 0.152 121.5);
}
.element {
color: var(--citrus-leaf);
background-color: hsl(75 57% 58%);
border-color: oklch(0.814 0.152 121.5);
}Tailwind CSS v4
@theme {
--color-citrus-leaf: #b3d157;
--color-citrus-leaf-50: #ecfdcd;
--color-citrus-leaf-100: #def1b9;
--color-citrus-leaf-200: #c7e097;
--color-citrus-leaf-300: #a8c46a;
--color-citrus-leaf-400: #91ac37;
--color-citrus-leaf-500: #779400;
--color-citrus-leaf-600: #657d00;
--color-citrus-leaf-700: #516400;
--color-citrus-leaf-800: #3d4900;
--color-citrus-leaf-900: #2a3300;
--color-citrus-leaf-950: #171e00;
}SCSS
$citrus-leaf: #b3d157;
$citrus-leaf-rgb: 179, 209, 87;
$citrus-leaf-light: mix(#fff, $citrus-leaf, 20%);
$citrus-leaf-dark: mix(#000, $citrus-leaf, 20%);
.element {
color: $citrus-leaf;
box-shadow: 0 0 0 2px rgba($citrus-leaf, 0.35);
}