Named color · #1E9167
Viridian
Viridian is #1E9167: rgb(30 145 103), hsl(158 66% 34%), oklch(0.585 0.118 162.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Viridian color name →
#1E9167
oklch(0.585 0.118 162.9)
Color conversions
- HEX
- #1e9167
- RGB
- rgb(30 145 103)
- HSL
- hsl(158 66% 34%)
- HWB
- hwb(158 12% 43%)
- OKLCH
- oklch(0.585 0.118 162.9)
- OKLab
- oklab(0.585 -0.113 0.035)
- CIE Lab
- lab(53.39 -40.06 13.16)
- LCH
- lch(53.39 42.16 161.8)
- CMYK
- cmyk(79% 0% 29% 43%)
Tints · Shades · Tones
Tints
- 409C75
- 59A784
- 6FB292
- 85BDA1
- 99C8B0
- AED3C0
- C2DECF
- D6E9DF
- EBF4EF
Shades
- 197D59
- 136A4B
- 0E583D
- 094630
- 053523
- 032517
- 01150C
- 000704
- 000100
Tones
- 32906A
- 3F8E6C
- 4B8D6F
- 548B71
- 5D8974
- 658876
- 6C8679
- 73847B
- 7A827E
Color harmonies
Complementary +180°
- 1E9167
Viridian
- AB5D8E
≈ Meadow Mauve
Analogous -30° +30°
- 1E9167
Viridian
- 5F8A3C
≈ Hidden Paradise
- 008E8C
≈ Corfu Shallows
Triadic +120° +240°
- 1E9167
Viridian
- 7271BF
≈ Purple Toolbox
- B5623F
≈ Caramel Dream
Split-complementary +150° +210°
- 1E9167
Viridian
- 9465AD
≈ Empire Violet
- B65B68
≈ Baroque Rose
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.96:1 · APCA Lc 67
Ag
AAOn black
WCAG 5.30:1 · APCA Lc 35
Best text color: #000000
WCAG 5.30:1 (AA) · APCA Lc 35
Contrast pairs
Code snippets
CSS
:root {
--viridian: #1e9167;
--viridian-rgb: 30 145 103;
--viridian-oklch: oklch(0.585 0.118 162.9);
}
.element {
color: var(--viridian);
background-color: hsl(158 66% 34%);
border-color: oklch(0.585 0.118 162.9);
}Tailwind CSS v4
@theme {
--color-viridian: #1e9167;
--color-viridian-50: #d7ffed;
--color-viridian-100: #c4f5de;
--color-viridian-200: #a5e5c8;
--color-viridian-300: #7acba8;
--color-viridian-400: #53b48a;
--color-viridian-500: #159e6f;
--color-viridian-600: #18855e;
--color-viridian-700: #146b4b;
--color-viridian-800: #104f35;
--color-viridian-900: #0a3724;
--color-viridian-950: #002113;
}SCSS
$viridian: #1e9167;
$viridian-rgb: 30, 145, 103;
$viridian-light: mix(#fff, $viridian, 20%);
$viridian-dark: mix(#000, $viridian, 20%);
.element {
color: $viridian;
box-shadow: 0 0 0 2px rgba($viridian, 0.35);
}