Named color · #01AD8F
Hobgoblin
Hobgoblin is #01AD8F: rgb(1 173 143), hsl(170 99% 34%), oklch(0.667 0.126 174.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Hobgoblin color name →
#01AD8F
oklch(0.667 0.126 174.4)
Color conversions
- HEX
- #01ad8f
- RGB
- rgb(1 173 143)
- HSL
- hsl(170 99% 34%)
- HWB
- hwb(170 0% 32%)
- OKLCH
- oklch(0.667 0.126 174.4)
- OKLab
- oklab(0.667 -0.126 0.012)
- CIE Lab
- lab(63.04 -44.51 4.36)
- LCH
- lch(63.04 44.73 174.4)
- CMYK
- cmyk(99% 0% 17% 32%)
Tints · Shades · Tones
Tints
- 3DB59A
- 5BBEA4
- 73C6AF
- 89CEBA
- 9ED6C6
- B2DFD1
- C5E7DC
- D9EFE8
- ECF7F3
Shades
- 01967C
- 017F69
- 006A57
- 005545
- 004134
- 002D24
- 001B15
- 000B07
- 000101
Tones
- 2CA98E
- 3FA48C
- 4CA08B
- 579C89
- 609788
- 689386
- 6F8E85
- 758983
- 7B8582
Color harmonies
Complementary +180°
- 01AD8F
Hobgoblin
- D07199
≈ Camellia Pink
Analogous -30° +30°
- 01AD8F
Hobgoblin
- 60A861
≈ Deep Mint
- 00A8B5
≈ Exotic Sea
Triadic +120° +240°
- 01AD8F
Hobgoblin
- 9A84DA
≈ Indigo Bloom
- CF7D42
≈ Topaz
Split-complementary +150° +210°
- 01AD8F
Hobgoblin
- BB78C0
≈ Colombo Red Mauve
- D7736D
≈ Lantana
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.84:1 · APCA Lc 54
Ag
AAAOn black
WCAG 7.37:1 · APCA Lc 48
Best text color: #000000
WCAG 7.37:1 (AAA) · APCA Lc 48
Contrast pairs
Code snippets
CSS
:root {
--hobgoblin: #01ad8f;
--hobgoblin-rgb: 1 173 143;
--hobgoblin-oklch: oklch(0.667 0.126 174.4);
}
.element {
color: var(--hobgoblin);
background-color: hsl(170 99% 34%);
border-color: oklch(0.667 0.126 174.4);
}Tailwind CSS v4
@theme {
--color-hobgoblin: #01ad8f;
--color-hobgoblin-50: #d0fff4;
--color-hobgoblin-100: #bcf6e6;
--color-hobgoblin-200: #98e6d2;
--color-hobgoblin-300: #68cdb5;
--color-hobgoblin-400: #31b699;
--color-hobgoblin-500: #00a080;
--color-hobgoblin-600: #00876d;
--color-hobgoblin-700: #006d57;
--color-hobgoblin-800: #00503e;
--color-hobgoblin-900: #00382a;
--color-hobgoblin-950: #002218;
}SCSS
$hobgoblin: #01ad8f;
$hobgoblin-rgb: 1, 173, 143;
$hobgoblin-light: mix(#fff, $hobgoblin, 20%);
$hobgoblin-dark: mix(#000, $hobgoblin, 20%);
.element {
color: $hobgoblin;
box-shadow: 0 0 0 2px rgba($hobgoblin, 0.35);
}