命名颜色 · #ABCB7B
Wonder Woods
Wonder Woods 即 #ABCB7B：rgb(171 203 123)、hsl(84 43% 64%)、oklch(0.8 0.111 126.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Wonder Woods color name →
#ABCB7B
oklch(0.8 0.111 126.5)
颜色转换
- HEX
- #abcb7b
- RGB
- rgb(171 203 123)
- HSL
- hsl(84 43% 64%)
- HWB
- hwb(84 48% 20%)
- OKLCH
- oklch(0.8 0.111 126.5)
- OKLab
- oklab(0.8 -0.066 0.089)
- CIE Lab
- lab(77.92 -21.08 36.18)
- LCH
- lch(77.92 41.87 120.2)
- CMYK
- cmyk(16% 0% 39% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- B3D089
- BBD696
- C4DBA4
- CCE0B1
- D4E5BE
- DDEBCB
- E5F0D8
- EEF5E5
- F6FAF2
深色调
- 94B06A
- 7E965A
- 687D4A
- 54653A
- 404D2C
- 2D371E
- 1B2210
- 0B0F05
- 010201
灰色调
- A7C37C
- A2BC7E
- 9EB47F
- 9AAD7F
- 95A580
- 919E80
- 8D9680
- 888F80
- 848780
配色和谐
互补色 +180°
- ABCB7B
Wonder Woods
- D0ABF6
≈ Teasel Dipsacus
类似色 -30° +30°
- ABCB7B
Wonder Woods
- D2BE66
≈ Mustard Oil
- 7ED3A0
≈ Crystal Gem
三角配色 +120° +240°
- ABCB7B
Wonder Woods
- 83C4FF
≈ Chromis Damsel Blue
- FB9FB2
≈ Ballet Slippers
分裂互补色 +150° +210°
- ABCB7B
Wonder Woods
- ACB8FF
≈ Greyish Lavender
- ECA2D8
≈ Violet Kiss
四角配色 +90° +180° +270°
- ABCB7B
Wonder Woods
- 5BCFEC
≈ Libra Blue Morpho
- D0ABF6
≈ Teasel Dipsacus
- FCA48B
≈ Coral Serenade
对比度与无障碍
Ag
Fail白底
WCAG 1.81:1 · APCA Lc 34
Ag
AAA黑底
WCAG 11.55:1 · APCA Lc 69
最佳文字颜色: #000000
WCAG 11.55:1 (AAA) · APCA Lc 69
Contrast pairs
代码片段
CSS
:root {
--wonder-woods: #abcb7b;
--wonder-woods-rgb: 171 203 123;
--wonder-woods-oklch: oklch(0.8 0.111 126.5);
}
.element {
color: var(--wonder-woods);
background-color: hsl(84 43% 64%);
border-color: oklch(0.8 0.111 126.5);
}Tailwind CSS v4
@theme {
--color-wonder-woods: #abcb7b;
--color-wonder-woods-50: #ecfcda;
--color-wonder-woods-100: #ddf0c9;
--color-wonder-woods-200: #c6deab;
--color-wonder-woods-300: #a6c385;
--color-wonder-woods-400: #8dab60;
--color-wonder-woods-500: #73933b;
--color-wonder-woods-600: #617c33;
--color-wonder-woods-700: #4e6428;
--color-wonder-woods-800: #3a491a;
--color-wonder-woods-900: #283211;
--color-wonder-woods-950: #161e04;
}SCSS
$wonder-woods: #abcb7b;
$wonder-woods-rgb: 171, 203, 123;
$wonder-woods-light: mix(#fff, $wonder-woods, 20%);
$wonder-woods-dark: mix(#000, $wonder-woods, 20%);
.element {
color: $wonder-woods;
box-shadow: 0 0 0 2px rgba($wonder-woods, 0.35);
}