Nazwany kolor · #A4A393
Woodland Sage
Woodland Sage to #A4A393: rgb(164 163 147), hsl(56 9% 61%), oklch(0.712 0.023 104). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Woodland Sage color name →
#A4A393
oklch(0.712 0.023 104)
Konwersje koloru
- HEX
- #a4a393
- RGB
- rgb(164 163 147)
- HSL
- hsl(56 9% 61%)
- HWB
- hwb(56 58% 36%)
- OKLCH
- oklch(0.712 0.023 104)
- OKLab
- oklab(0.712 -0.006 0.022)
- CIE Lab
- lab(66.74 -1.78 8.48)
- LCH
- lch(66.74 8.67 101.8)
- CMYK
- cmyk(0% 1% 10% 36%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- ADAC9D
- B6B5A8
- BEBEB2
- C7C7BD
- D1D0C8
- DAD9D3
- E3E3DE
- ECECE9
- F6F5F4
Odcienie ciemniejsze
- 8E8D7F
- 79786C
- 646359
- 504F47
- 3D3C36
- 2B2A25
- 1A1916
- 0A0A08
- 010101
Tony
- A09F91
- 9D9C8F
- 99988D
- 95958B
- 92918A
- 8E8E88
- 8B8A86
- 878784
- 848382
Harmonie kolorów
Komplementarna +180°
- A4A393
Woodland Sage
- A0A0B0
≈ Santas Grey
Analogowa -30° +30°
- A4A393
Woodland Sage
- ABA093
≈ Pure Cashmere
- 9CA597
≈ Green Trellis
Triada +120° +240°
- A4A393
Woodland Sage
- 94A5AD
≈ Galleria Blue
- AD9DA5
≈ Laylock
Komplementarna rozszczepiona +150° +210°
- A4A393
Woodland Sage
- 99A3B0
≈ Robotic Gods
- A79EAC
≈ Goose Wing Grey
Tetrada +90° +180° +270°
- A4A393
Woodland Sage
- 93A7A6
≈ Mythical Blue
- A0A0B0
≈ Santas Grey
- B09D9E
≈ Subtle Violet
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.54:1 · APCA Lc 50
Ag
AAANa czerni
WCAG 8.23:1 · APCA Lc 52
Najlepszy kolor tekstu: #000000
WCAG 8.23:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmenty kodu
CSS
:root {
--woodland-sage: #a4a393;
--woodland-sage-rgb: 164 163 147;
--woodland-sage-oklch: oklch(0.712 0.023 104);
}
.element {
color: var(--woodland-sage);
background-color: hsl(56 9% 61%);
border-color: oklch(0.712 0.023 104);
}Tailwind CSS v4
@theme {
--color-woodland-sage: #a4a393;
--color-woodland-sage-50: #f6f6ee;
--color-woodland-sage-100: #e9e8e0;
--color-woodland-sage-200: #d5d5ca;
--color-woodland-sage-300: #b9b8ab;
--color-woodland-sage-400: #a09f90;
--color-woodland-sage-500: #888776;
--color-woodland-sage-600: #737264;
--color-woodland-sage-700: #5c5b50;
--color-woodland-sage-800: #44433a;
--color-woodland-sage-900: #2f2e28;
--color-woodland-sage-950: #1b1b16;
}SCSS
$woodland-sage: #a4a393;
$woodland-sage-rgb: 164, 163, 147;
$woodland-sage-light: mix(#fff, $woodland-sage, 20%);
$woodland-sage-dark: mix(#000, $woodland-sage, 20%);
.element {
color: $woodland-sage;
box-shadow: 0 0 0 2px rgba($woodland-sage, 0.35);
}