Colore con nome · #ABCB7B
Wonder Woods
Wonder Woods è #ABCB7B: rgb(171 203 123), hsl(84 43% 64%), oklch(0.8 0.111 126.5). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Green mean? → · Wonder Woods color name →
#ABCB7B
oklch(0.8 0.111 126.5)
Conversioni di colore
- 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%)
Tinte · Ombre · Toni
Tinte
- B3D089
- BBD696
- C4DBA4
- CCE0B1
- D4E5BE
- DDEBCB
- E5F0D8
- EEF5E5
- F6FAF2
Ombre
- 94B06A
- 7E965A
- 687D4A
- 54653A
- 404D2C
- 2D371E
- 1B2210
- 0B0F05
- 010201
Toni
- A7C37C
- A2BC7E
- 9EB47F
- 9AAD7F
- 95A580
- 919E80
- 8D9680
- 888F80
- 848780
Armonie di colore
Complementare +180°
- ABCB7B
Wonder Woods
- D0ABF6
≈ Teasel Dipsacus
Analogo -30° +30°
- ABCB7B
Wonder Woods
- D2BE66
≈ Mustard Oil
- 7ED3A0
≈ Crystal Gem
Triadico +120° +240°
- ABCB7B
Wonder Woods
- 83C4FF
≈ Chromis Damsel Blue
- FB9FB2
≈ Ballet Slippers
Complementare divisa +150° +210°
- ABCB7B
Wonder Woods
- ACB8FF
≈ Greyish Lavender
- ECA2D8
≈ Violet Kiss
Tetradico +90° +180° +270°
- ABCB7B
Wonder Woods
- 5BCFEC
≈ Libra Blue Morpho
- D0ABF6
≈ Teasel Dipsacus
- FCA48B
≈ Coral Serenade
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.81:1 · APCA Lc 34
Ag
AAASu nero
WCAG 11.55:1 · APCA Lc 69
Miglior colore del testo: #000000
WCAG 11.55:1 (AAA) · APCA Lc 69
Contrast pairs
Frammenti di codice
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);
}