Named color · #372418
Wetlands Swamp
Wetlands Swamp is #372418: rgb(55 36 24), hsl(23 39% 15%), oklch(0.28 0.036 53). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Wetlands Swamp color name →
#372418
oklch(0.28 0.036 53)
Color conversions
- HEX
- #372418
- RGB
- rgb(55 36 24)
- HSL
- hsl(23 39% 15%)
- HWB
- hwb(23 9% 78%)
- OKLCH
- oklch(0.28 0.036 53)
- OKLab
- oklab(0.28 0.021 0.029)
- CIE Lab
- lab(16.36 8.05 11.82)
- LCH
- lch(16.36 14.3 55.7)
- CMYK
- cmyk(0% 35% 56% 78%)
Tints · Shades · Tones
Tints
- 49372B
- 5B4A40
- 6E5F55
- 82746B
- 958982
- AAA09A
- BFB7B2
- D4CECB
- E9E6E5
Shades
- 2E1E13
- 26180F
- 1E120A
- 160C07
- 0F0704
- 080402
- 030201
- 010000
- 000000
Tones
- 3E2C22
- 45352B
- 4C3E35
- 54473F
- 5B504A
- 625954
- 6A635F
- 716C6A
- 787675
Color harmonies
Complementary +180°
- 372418
Wetlands Swamp
- 162C38
≈ Oceanic Noir
Analogous -30° +30°
- 372418
Wetlands Swamp
- 392221
≈ Warm Balaclavas Are Forever
- 322714
≈ Brown Tumbleweed
Triadic +120° +240°
- 372418
Wetlands Swamp
- 142F27
≈ Guerrilla Forest
- 292639
≈ Mangu Black
Split-complementary +150° +210°
- 372418
Wetlands Swamp
- 102E31
≈ Black Chasm
- 20293B
≈ Midnight Express
Tetradic +90° +180° +270°
- 372418
Wetlands Swamp
- 1E2E1D
≈ Kuro Green
- 162C38
≈ Oceanic Noir
- 322333
≈ Zero Gravity
Contrast & accessibility
Ag
AAAOn white
WCAG 14.70:1 · APCA Lc 101
Ag
FailOn black
WCAG 1.42:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 14.70:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--wetlands-swamp: #372418;
--wetlands-swamp-rgb: 55 36 24;
--wetlands-swamp-oklch: oklch(0.28 0.036 53);
}
.element {
color: var(--wetlands-swamp);
background-color: hsl(23 39% 15%);
border-color: oklch(0.28 0.036 53);
}Tailwind CSS v4
@theme {
--color-wetlands-swamp: #372418;
--color-wetlands-swamp-50: #fef3ec;
--color-wetlands-swamp-100: #f2e5dd;
--color-wetlands-swamp-200: #e1d1c6;
--color-wetlands-swamp-300: #c7b3a6;
--color-wetlands-swamp-400: #b0998b;
--color-wetlands-swamp-500: #9a8070;
--color-wetlands-swamp-600: #826d5f;
--color-wetlands-swamp-700: #68574c;
--color-wetlands-swamp-800: #4d3f37;
--color-wetlands-swamp-900: #352b26;
--color-wetlands-swamp-950: #211914;
}SCSS
$wetlands-swamp: #372418;
$wetlands-swamp-rgb: 55, 36, 24;
$wetlands-swamp-light: mix(#fff, $wetlands-swamp, 20%);
$wetlands-swamp-dark: mix(#000, $wetlands-swamp, 20%);
.element {
color: $wetlands-swamp;
box-shadow: 0 0 0 2px rgba($wetlands-swamp, 0.35);
}