Named color · #0D9494
Atrovirens
Atrovirens is #0D9494: rgb(13 148 148), hsl(180 84% 32%), oklch(0.604 0.101 194.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Atrovirens color name →
#0D9494
oklch(0.604 0.101 194.8)
Color conversions
- HEX
- #0d9494
- RGB
- rgb(13 148 148)
- HSL
- hsl(180 84% 32%)
- HWB
- hwb(180 5% 42%)
- OKLCH
- oklch(0.604 0.101 194.8)
- OKLab
- oklab(0.604 -0.098 -0.026)
- CIE Lab
- lab(55.19 -33.15 -9.82)
- LCH
- lch(55.19 34.57 196.5)
- CMYK
- cmyk(91% 0% 0% 42%)
Tints · Shades · Tones
Tints
- 3B9F9E
- 56A9A9
- 6EB4B3
- 84BFBE
- 99C9C8
- ADD4D3
- C2DFDE
- D6E9E9
- EBF4F4
Shades
- 0A8080
- 076D6D
- 055A5A
- 034848
- 023636
- 012626
- 001616
- 000808
- 000101
Tones
- 2B9292
- 3C9090
- 488F8E
- 538D8C
- 5C8B8A
- 648988
- 6C8786
- 738484
- 7A8282
Color harmonies
Complementary +180°
- 0D9494
Atrovirens
- B6676E
≈ Slate Rose
Analogous -30° +30°
- 0D9494
Atrovirens
- 3B9572
≈ Ocean Green
- 2A8EAF
≈ Carol
Triadic +120° +240°
- 0D9494
Atrovirens
- 986EAB
≈ Crown Jewels
- A57834
≈ Natural Evolution
Split-complementary +150° +210°
- 0D9494
Atrovirens
- AC6890
≈ Violetta
- B36D4D
≈ Thanksgiving
Tetradic +90° +180° +270°
- 0D9494
Atrovirens
- 7B78BC
≈ Purple Hebe
- B6676E
≈ Slate Rose
- 8B8535
≈ Witch Brew
Contrast & accessibility
Ag
FailOn white
WCAG 3.69:1 · APCA Lc 64
Ag
AAOn black
WCAG 5.68:1 · APCA Lc 38
Best text color: #000000
WCAG 5.68:1 (AA) · APCA Lc 38
Contrast pairs
Code snippets
CSS
:root {
--atrovirens: #0d9494;
--atrovirens-rgb: 13 148 148;
--atrovirens-oklch: oklch(0.604 0.101 194.8);
}
.element {
color: var(--atrovirens);
background-color: hsl(180 84% 32%);
border-color: oklch(0.604 0.101 194.8);
}Tailwind CSS v4
@theme {
--color-atrovirens: #0d9494;
--color-atrovirens-50: #d5ffff;
--color-atrovirens-100: #c1f3f3;
--color-atrovirens-200: #a1e2e3;
--color-atrovirens-300: #75c8c9;
--color-atrovirens-400: #47b1b1;
--color-atrovirens-500: #009a9b;
--color-atrovirens-600: #008383;
--color-atrovirens-700: #006969;
--color-atrovirens-800: #004d4c;
--color-atrovirens-900: #013635;
--color-atrovirens-950: #002120;
}SCSS
$atrovirens: #0d9494;
$atrovirens-rgb: 13, 148, 148;
$atrovirens-light: mix(#fff, $atrovirens, 20%);
$atrovirens-dark: mix(#000, $atrovirens, 20%);
.element {
color: $atrovirens;
box-shadow: 0 0 0 2px rgba($atrovirens, 0.35);
}