Nazwany kolor · #8A9381
Matte Sage Green
Matte Sage Green to #8A9381: rgb(138 147 129), hsl(90 8% 54%), oklch(0.651 0.028 129). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Matte Sage Green color name →
#8A9381
oklch(0.651 0.028 129)
Konwersje koloru
- HEX
- #8a9381
- RGB
- rgb(138 147 129)
- HSL
- hsl(90 8% 54%)
- HWB
- hwb(90 51% 42%)
- OKLCH
- oklch(0.651 0.028 129)
- OKLab
- oklab(0.651 -0.018 0.022)
- CIE Lab
- lab(59.8 -5.96 8.4)
- LCH
- lch(59.8 10.3 125.3)
- CMYK
- cmyk(6% 0% 12% 42%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 959D8D
- A0A899
- ACB2A5
- B7BDB2
- C3C8BE
- CFD3CB
- DBDED8
- E7E9E5
- F3F4F2
Odcienie ciemniejsze
- 777F6F
- 656C5E
- 53594E
- 42473E
- 32362E
- 22251F
- 141612
- 070806
- 010101
Tony
- 899181
- 888F81
- 878D81
- 868B81
- 858981
- 848881
- 838680
- 828480
- 818280
Harmonie kolorów
Komplementarna +180°
- 8A9381
Matte Sage Green
- 948B9D
≈ Gentle Mauve
Analogowa -30° +30°
- 8A9381
Matte Sage Green
- 93907D
≈ Muted Sage
- 819589
≈ Wethersfield Moss
Triada +120° +240°
- 8A9381
Matte Sage Green
- 8391A0
≈ Diopside Blue
- A0898C
≈ Tin Pink
Komplementarna rozszczepiona +150° +210°
- 8A9381
Matte Sage Green
- 8B8EA1
≈ Dusty Heather
- 9C8995
≈ Piano Mauve
Tetrada +90° +180° +270°
- 8A9381
Matte Sage Green
- 7D949B
≈ Wethers Field
- 948B9D
≈ Gentle Mauve
- 9F8A83
≈ Aspiration
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.19:1 · APCA Lc 59
Ag
AANa czerni
WCAG 6.57:1 · APCA Lc 43
Najlepszy kolor tekstu: #000000
WCAG 6.57:1 (AA) · APCA Lc 43
Contrast pairs
Fragmenty kodu
CSS
:root {
--matte-sage-green: #8a9381;
--matte-sage-green-rgb: 138 147 129;
--matte-sage-green-oklch: oklch(0.651 0.028 129);
}
.element {
color: var(--matte-sage-green);
background-color: hsl(90 8% 54%);
border-color: oklch(0.651 0.028 129);
}Tailwind CSS v4
@theme {
--color-matte-sage-green: #8a9381;
--color-matte-sage-green-50: #f2f7ef;
--color-matte-sage-green-100: #e5eae0;
--color-matte-sage-green-200: #d0d7cb;
--color-matte-sage-green-300: #b2bbac;
--color-matte-sage-green-400: #99a291;
--color-matte-sage-green-500: #808a77;
--color-matte-sage-green-600: #6d7564;
--color-matte-sage-green-700: #575d50;
--color-matte-sage-green-800: #40443a;
--color-matte-sage-green-900: #2c2f28;
--color-matte-sage-green-950: #191c16;
}SCSS
$matte-sage-green: #8a9381;
$matte-sage-green-rgb: 138, 147, 129;
$matte-sage-green-light: mix(#fff, $matte-sage-green, 20%);
$matte-sage-green-dark: mix(#000, $matte-sage-green, 20%);
.element {
color: $matte-sage-green;
box-shadow: 0 0 0 2px rgba($matte-sage-green, 0.35);
}