Named color · #30A877
Cosmic Green
Cosmic Green is #30A877: rgb(48 168 119), hsl(156 56% 42%), oklch(0.654 0.128 161.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Cosmic Green color name →
#30A877
oklch(0.654 0.128 161.5)
Color conversions
- HEX
- #30a877
- RGB
- rgb(48 168 119)
- HSL
- hsl(156 56% 42%)
- HWB
- hwb(156 19% 34%)
- OKLCH
- oklch(0.654 0.128 161.5)
- OKLab
- oklab(0.654 -0.122 0.041)
- CIE Lab
- lab(61.52 -43.15 15.5)
- LCH
- lch(61.52 45.85 160.2)
- CMYK
- cmyk(71% 0% 29% 34%)
Tints · Shades · Tones
Tints
- 4DB184
- 65BA91
- 7AC29E
- 8ECBAC
- A2D4B9
- B5DDC7
- C7E5D5
- DAEEE3
- ECF6F1
Shades
- 289267
- 217C57
- 1A6747
- 135238
- 0C3F2A
- 062C1C
- 031A10
- 010A05
- 000101
Tones
- 3FA478
- 4BA079
- 559C7A
- 5D997B
- 64957C
- 6B917D
- 718D7E
- 76887E
- 7B847F
Color harmonies
Complementary +180°
- 30A877
Cosmic Green
- C46FA7
≈ Crocus
Analogous -30° +30°
- 30A877
Cosmic Green
- 73A048
≈ Indubitably Green
- 00A6A1
≈ Jadestone
Triadic +120° +240°
- 30A877
Cosmic Green
- 8485DC
≈ Indigo Bloom
- D1734F
≈ Coral Gold
Split-complementary +150° +210°
- 30A877
Cosmic Green
- AA78C9
≈ Wisteria
- D26C7C
≈ Pinkish
Tetradic +90° +180° +270°
- 30A877
Cosmic Green
- 5094DC
≈ Flax Flower Blue
- C46FA7
≈ Crocus
- C08123
≈ Turmeric Brown
Contrast & accessibility
Ag
FailOn white
WCAG 3.00:1 · APCA Lc 56
Ag
AAOn black
WCAG 6.99:1 · APCA Lc 45
Best text color: #000000
WCAG 6.99:1 (AA) · APCA Lc 45
Contrast pairs
Code snippets
CSS
:root {
--cosmic-green: #30a877;
--cosmic-green-rgb: 48 168 119;
--cosmic-green-oklch: oklch(0.654 0.128 161.5);
}
.element {
color: var(--cosmic-green);
background-color: hsl(156 56% 42%);
border-color: oklch(0.654 0.128 161.5);
}Tailwind CSS v4
@theme {
--color-cosmic-green: #30a877;
--color-cosmic-green-50: #d5ffeb;
--color-cosmic-green-100: #c1f6dc;
--color-cosmic-green-200: #a1e6c5;
--color-cosmic-green-300: #75cca5;
--color-cosmic-green-400: #4bb686;
--color-cosmic-green-500: #009f6a;
--color-cosmic-green-600: #00875a;
--color-cosmic-green-700: #046c48;
--color-cosmic-green-800: #064f32;
--color-cosmic-green-900: #053722;
--color-cosmic-green-950: #002211;
}SCSS
$cosmic-green: #30a877;
$cosmic-green-rgb: 48, 168, 119;
$cosmic-green-light: mix(#fff, $cosmic-green, 20%);
$cosmic-green-dark: mix(#000, $cosmic-green, 20%);
.element {
color: $cosmic-green;
box-shadow: 0 0 0 2px rgba($cosmic-green, 0.35);
}