Nazwany kolor · #ABCB7B
Wonder Woods
Wonder Woods to #ABCB7B: rgb(171 203 123), hsl(84 43% 64%), oklch(0.8 0.111 126.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · Wonder Woods color name →
#ABCB7B
oklch(0.8 0.111 126.5)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B3D089
- BBD696
- C4DBA4
- CCE0B1
- D4E5BE
- DDEBCB
- E5F0D8
- EEF5E5
- F6FAF2
Odcienie ciemniejsze
- 94B06A
- 7E965A
- 687D4A
- 54653A
- 404D2C
- 2D371E
- 1B2210
- 0B0F05
- 010201
Tony
- A7C37C
- A2BC7E
- 9EB47F
- 9AAD7F
- 95A580
- 919E80
- 8D9680
- 888F80
- 848780
Harmonie kolorów
Komplementarna +180°
- ABCB7B
Wonder Woods
- D0ABF6
≈ Teasel Dipsacus
Analogowa -30° +30°
- ABCB7B
Wonder Woods
- D2BE66
≈ Mustard Oil
- 7ED3A0
≈ Crystal Gem
Triada +120° +240°
- ABCB7B
Wonder Woods
- 83C4FF
≈ Chromis Damsel Blue
- FB9FB2
≈ Ballet Slippers
Komplementarna rozszczepiona +150° +210°
- ABCB7B
Wonder Woods
- ACB8FF
≈ Greyish Lavender
- ECA2D8
≈ Violet Kiss
Tetrada +90° +180° +270°
- ABCB7B
Wonder Woods
- 5BCFEC
≈ Libra Blue Morpho
- D0ABF6
≈ Teasel Dipsacus
- FCA48B
≈ Coral Serenade
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.81:1 · APCA Lc 34
Ag
AAANa czerni
WCAG 11.55:1 · APCA Lc 69
Najlepszy kolor tekstu: #000000
WCAG 11.55:1 (AAA) · APCA Lc 69
Contrast pairs
Fragmenty kodu
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);
}