Named color · #094C49
Swamp Mausoleum
Swamp Mausoleum is #094C49: rgb(9 76 73), hsl(177 79% 17%), oklch(0.378 0.062 190.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Swamp Mausoleum color name →
#094C49
oklch(0.378 0.062 190.1)
Color conversions
- HEX
- #094c49
- RGB
- rgb(9 76 73)
- HSL
- hsl(177 79% 17%)
- HWB
- hwb(177 4% 70%)
- OKLCH
- oklch(0.378 0.062 190.1)
- OKLab
- oklab(0.378 -0.061 -0.011)
- CIE Lab
- lab(28.5 -20.83 -4.19)
- LCH
- lch(28.5 21.25 191.4)
- CMYK
- cmyk(88% 0% 4% 70%)
Tints · Shades · Tones
Tints
- 295C59
- 416D6A
- 587E7B
- 6F908D
- 86A19F
- 9DB4B2
- B5C6C4
- CDD9D8
- E6ECEB
Shades
- 07413E
- 053634
- 032C2A
- 022220
- 011817
- 010F0E
- 000606
- 000202
- 000000
Tones
- 1C514E
- 2A5654
- 365C59
- 41615E
- 4C6664
- 576B69
- 61706F
- 6B7675
- 767B7A
Color harmonies
Complementary +180°
- 094C49
Swamp Mausoleum
- 5E333A
≈ Red Vine
Analogous -30° +30°
- 094C49
Swamp Mausoleum
- 204C36
≈ County Green
- 104958
≈ Ethereal Dance
Triadic +120° +240°
- 094C49
Swamp Mausoleum
- 4C385A
≈ Purple Plumeria
- 573C1A
≈ Smoked Oak Brown
Split-complementary +150° +210°
- 094C49
Swamp Mausoleum
- 58344C
≈ Italian Plum
- 5D3628
≈ Terra Brun
Tetradic +90° +180° +270°
- 094C49
Swamp Mausoleum
- 3B3E62
≈ Storm Is Coming
- 5E333A
≈ Red Vine
- 494218
≈ Alligator Gladiator
Contrast & accessibility
Ag
AAAOn white
WCAG 9.80:1 · APCA Lc 92
Ag
FailOn black
WCAG 2.14:1 · APCA Lc 10
Best text color: #FFFFFF
WCAG 9.80:1 (AAA) · APCA Lc 92
Contrast pairs
Code snippets
CSS
:root {
--swamp-mausoleum: #094c49;
--swamp-mausoleum-rgb: 9 76 73;
--swamp-mausoleum-oklch: oklch(0.378 0.062 190.1);
}
.element {
color: var(--swamp-mausoleum);
background-color: hsl(177 79% 17%);
border-color: oklch(0.378 0.062 190.1);
}Tailwind CSS v4
@theme {
--color-swamp-mausoleum: #094c49;
--color-swamp-mausoleum-50: #e2fbfa;
--color-swamp-mausoleum-100: #d1efed;
--color-swamp-mausoleum-200: #b7dddb;
--color-swamp-mausoleum-300: #93c2bf;
--color-swamp-mausoleum-400: #73aba6;
--color-swamp-mausoleum-500: #52938f;
--color-swamp-mausoleum-600: #467d79;
--color-swamp-mausoleum-700: #386461;
--color-swamp-mausoleum-800: #284946;
--color-swamp-mausoleum-900: #1a3331;
--color-swamp-mausoleum-950: #0b1f1d;
}SCSS
$swamp-mausoleum: #094c49;
$swamp-mausoleum-rgb: 9, 76, 73;
$swamp-mausoleum-light: mix(#fff, $swamp-mausoleum, 20%);
$swamp-mausoleum-dark: mix(#000, $swamp-mausoleum, 20%);
.element {
color: $swamp-mausoleum;
box-shadow: 0 0 0 2px rgba($swamp-mausoleum, 0.35);
}