Benannte Farbe · #A4A393
Woodland Sage
Woodland Sage ist #A4A393: rgb(164 163 147), hsl(56 9% 61%), oklch(0.712 0.023 104). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Woodland Sage color name →
#A4A393
oklch(0.712 0.023 104)
Farbumrechnungen
- 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%)
Tints · Shades · Tones
Tints
- ADAC9D
- B6B5A8
- BEBEB2
- C7C7BD
- D1D0C8
- DAD9D3
- E3E3DE
- ECECE9
- F6F5F4
Shades
- 8E8D7F
- 79786C
- 646359
- 504F47
- 3D3C36
- 2B2A25
- 1A1916
- 0A0A08
- 010101
Tones
- A09F91
- 9D9C8F
- 99988D
- 95958B
- 92918A
- 8E8E88
- 8B8A86
- 878784
- 848382
Farbharmonien
Komplementär +180°
- A4A393
Woodland Sage
- A0A0B0
≈ Santas Grey
Analog -30° +30°
- A4A393
Woodland Sage
- ABA093
≈ Pure Cashmere
- 9CA597
≈ Green Trellis
Triadisch +120° +240°
- A4A393
Woodland Sage
- 94A5AD
≈ Galleria Blue
- AD9DA5
≈ Laylock
Geteilt komplementär +150° +210°
- A4A393
Woodland Sage
- 99A3B0
≈ Robotic Gods
- A79EAC
≈ Goose Wing Grey
Tetradisch +90° +180° +270°
- A4A393
Woodland Sage
- 93A7A6
≈ Mythical Blue
- A0A0B0
≈ Santas Grey
- B09D9E
≈ Subtle Violet
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.54:1 · APCA Lc 50
Ag
AAAAuf Schwarz
WCAG 8.23:1 · APCA Lc 52
Beste Textfarbe: #000000
WCAG 8.23:1 (AAA) · APCA Lc 52
Contrast pairs
Code-Snippets
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);
}