Named color · #007F66
Generic Viridian
Generic Viridian is #007F66: rgb(0 127 102), hsl(168 100% 25%), oklch(0.532 0.102 172.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Generic Viridian color name →
#007F66
oklch(0.532 0.102 172.6)
Color conversions
- HEX
- #007f66
- RGB
- rgb(0 127 102)
- HSL
- hsl(168 100% 25%)
- HWB
- hwb(168 0% 50%)
- OKLCH
- oklch(0.532 0.102 172.6)
- OKLab
- oklab(0.532 -0.102 0.013)
- CIE Lab
- lab(47 -36.06 4.78)
- LCH
- lch(47 36.37 172.4)
- CMYK
- cmyk(100% 0% 20% 50%)
Tints · Shades · Tones
Tints
- 328B74
- 4E9883
- 65A591
- 7CB1A0
- 92BEAF
- A8CBBF
- BDD8CF
- D3E5DF
- E9F2EF
Shades
- 006E58
- 005D4A
- 004C3C
- 003C2F
- 002D23
- 001F17
- 00110C
- 000604
- 000100
Tones
- 237F69
- 34806B
- 41806E
- 4C8070
- 568073
- 5F8076
- 688078
- 70807B
- 78807D
Color harmonies
Complementary +180°
- 007F66
Generic Viridian
- 995172
≈ Sea Fan Fuchsia
Analogous -30° +30°
- 007F66
Generic Viridian
- 467B43
≈ Hills of Ireland
- 007B83
≈ Mediterranean Cove
Triadic +120° +240°
- 007F66
Generic Viridian
- 6E60A2
≈ Scampi
- 9A5A2E
≈ Indochine
Split-complementary +150° +210°
- 007F66
Generic Viridian
- 88578F
≈ Purple Fluorite
- 9F5250
≈ Bravado Red
Tetradic +90° +180° +270°
- 007F66
Generic Viridian
- 4C6BA7
≈ New Age Blue
- 995172
≈ Sea Fan Fuchsia
- 896614
≈ Alligator
Contrast & accessibility
Ag
AAOn white
WCAG 4.96:1 · APCA Lc 74
Ag
FailOn black
WCAG 4.22:1 · APCA Lc 28
Best text color: #FFFFFF
WCAG 4.96:1 (AA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--generic-viridian: #007f66;
--generic-viridian-rgb: 0 127 102;
--generic-viridian-oklch: oklch(0.532 0.102 172.6);
}
.element {
color: var(--generic-viridian);
background-color: hsl(168 100% 25%);
border-color: oklch(0.532 0.102 172.6);
}Tailwind CSS v4
@theme {
--color-generic-viridian: #007f66;
--color-generic-viridian-50: #d8fff3;
--color-generic-viridian-100: #c5f4e6;
--color-generic-viridian-200: #a6e3d1;
--color-generic-viridian-300: #7dc9b4;
--color-generic-viridian-400: #55b298;
--color-generic-viridian-500: #1e9c7f;
--color-generic-viridian-600: #1e846c;
--color-generic-viridian-700: #186a56;
--color-generic-viridian-800: #114e3d;
--color-generic-viridian-900: #0b362a;
--color-generic-viridian-950: #002118;
}SCSS
$generic-viridian: #007f66;
$generic-viridian-rgb: 0, 127, 102;
$generic-viridian-light: mix(#fff, $generic-viridian, 20%);
$generic-viridian-dark: mix(#000, $generic-viridian, 20%);
.element {
color: $generic-viridian;
box-shadow: 0 0 0 2px rgba($generic-viridian, 0.35);
}