Named color · #30BA8F
Mountain Meadow
Mountain Meadow is #30BA8F: rgb(48 186 143), hsl(161 59% 46%), oklch(0.706 0.132 167.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Mountain Meadow color name →
#30BA8F
oklch(0.706 0.132 167.1)
Color conversions
- HEX
- #30ba8f
- RGB
- rgb(48 186 143)
- HSL
- hsl(161 59% 46%)
- HWB
- hwb(161 19% 27%)
- OKLCH
- oklch(0.706 0.132 167.1)
- OKLab
- oklab(0.706 -0.128 0.029)
- CIE Lab
- lab(67.67 -45.56 10.97)
- LCH
- lch(67.67 46.86 166.5)
- CMYK
- cmyk(74% 0% 23% 27%)
Tints · Shades · Tones
Tints
- 50C19A
- 69C8A5
- 7ECFB0
- 92D6BB
- A5DDC6
- B8E4D1
- CAEBDC
- DCF2E8
- EDF8F3
Shades
- 28A17C
- 218969
- 1A7257
- 135C45
- 0C4634
- 063224
- 031E15
- 010D07
- 000201
Tones
- 41B48E
- 4EAF8C
- 58A98B
- 61A389
- 689D88
- 6E9886
- 739285
- 788C83
- 7C8682
Color harmonies
Complementary +180°
- 30BA8F
Mountain Meadow
- DB7CB0
≈ Middle Purple
Analogous -30° +30°
- 30BA8F
Mountain Meadow
- 77B35E
≈ Palm Tree
- 00B7BA
≈ Cyan Sky
Triadic +120° +240°
- 30BA8F
Mountain Meadow
- 9B92EE
≈ Perrywinkle
- E28454
≈ Orangevale
Split-complementary +150° +210°
- 30BA8F
Mountain Meadow
- C185D6
≈ Purception
- E67C82
≈ Lively Coral
Tetradic +90° +180° +270°
- 30BA8F
Mountain Meadow
- 69A2F1
≈ Feather Star
- DB7CB0
≈ Middle Purple
- CE942E
≈ Golden Pheasant
Contrast & accessibility
Ag
FailOn white
WCAG 2.45:1 · APCA Lc 48
Ag
AAAOn black
WCAG 8.54:1 · APCA Lc 54
Best text color: #000000
WCAG 8.54:1 (AAA) · APCA Lc 54
Contrast pairs
Code snippets
CSS
:root {
--mountain-meadow: #30ba8f;
--mountain-meadow-rgb: 48 186 143;
--mountain-meadow-oklch: oklch(0.706 0.132 167.1);
}
.element {
color: var(--mountain-meadow);
background-color: hsl(161 59% 46%);
border-color: oklch(0.706 0.132 167.1);
}Tailwind CSS v4
@theme {
--color-mountain-meadow: #30ba8f;
--color-mountain-meadow-50: #d1ffef;
--color-mountain-meadow-100: #bdf7e0;
--color-mountain-meadow-200: #9ae7cb;
--color-mountain-meadow-300: #6bcdac;
--color-mountain-meadow-400: #39b78e;
--color-mountain-meadow-500: #00a174;
--color-mountain-meadow-600: #008862;
--color-mountain-meadow-700: #006d4e;
--color-mountain-meadow-800: #005037;
--color-mountain-meadow-900: #003825;
--color-mountain-meadow-950: #002214;
}SCSS
$mountain-meadow: #30ba8f;
$mountain-meadow-rgb: 48, 186, 143;
$mountain-meadow-light: mix(#fff, $mountain-meadow, 20%);
$mountain-meadow-dark: mix(#000, $mountain-meadow, 20%);
.element {
color: $mountain-meadow;
box-shadow: 0 0 0 2px rgba($mountain-meadow, 0.35);
}