Named color · #54A64D
Lush Un’goro Crater
Lush Un’goro Crater is #54A64D: rgb(84 166 77), hsl(115 37% 48%), oklch(0.653 0.149 142.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Lush Un’goro Crater color name →
#54A64D
oklch(0.653 0.149 142.2)
Color conversions
- HEX
- #54a64d
- RGB
- rgb(84 166 77)
- HSL
- hsl(115 37% 48%)
- HWB
- hwb(115 30% 35%)
- OKLCH
- oklch(0.653 0.149 142.2)
- OKLab
- oklab(0.653 -0.118 0.091)
- CIE Lab
- lab(61.45 -39.76 37.53)
- LCH
- lch(61.45 54.68 136.7)
- CMYK
- cmyk(49% 0% 54% 35%)
Tints · Shades · Tones
Tints
- 67AF60
- 78B872
- 89C183
- 9ACA95
- ABD3A6
- BCDCB8
- CDE5CA
- DDEDDB
- EEF6ED
Shades
- 489042
- 3C7A37
- 31652C
- 265122
- 1B3E18
- 112B0F
- 081A07
- 020A02
- 000100
Tones
- 5AA254
- 609F5A
- 659B60
- 6A9865
- 6E946A
- 72906F
- 768C73
- 7A8878
- 7D847C
Color harmonies
Complementary +180°
- 54A64D
Lush Un’goro Crater
- BA6EC5
≈ Lavendless
Analogous -30° +30°
- 54A64D
Lush Un’goro Crater
- 939800
≈ Pea Soup
- 00A887
≈ Moray Eel
Triadic +120° +240°
- 54A64D
Lush Un’goro Crater
- 5C8DEA
≈ Soft Blue
- DC6665
≈ Salami Slice
Split-complementary +150° +210°
- 54A64D
Lush Un’goro Crater
- 937CE2
≈ Indigo Bloom
- D26599
≈ Nocturnal Rose
Tetradic +90° +180° +270°
- 54A64D
Lush Un’goro Crater
- 009DD3
≈ Structural Blue
- BA6EC5
≈ Lavendless
- D57229
≈ Bitter Orange
Contrast & accessibility
Ag
FailOn white
WCAG 3.02:1 · APCA Lc 57
Ag
AAOn black
WCAG 6.93:1 · APCA Lc 45
Best text color: #000000
WCAG 6.93:1 (AA) · APCA Lc 45
Contrast pairs
Code snippets
CSS
:root {
--lush-un-goro-crater: #54a64d;
--lush-un-goro-crater-rgb: 84 166 77;
--lush-un-goro-crater-oklch: oklch(0.653 0.149 142.2);
}
.element {
color: var(--lush-un-goro-crater);
background-color: hsl(115 37% 48%);
border-color: oklch(0.653 0.149 142.2);
}Tailwind CSS v4
@theme {
--color-lush-un-goro-crater: #54a64d;
--color-lush-un-goro-crater-50: #dcffdb;
--color-lush-un-goro-crater-100: #caf6c9;
--color-lush-un-goro-crater-200: #ade5ac;
--color-lush-un-goro-crater-300: #87cb86;
--color-lush-un-goro-crater-400: #67b460;
--color-lush-un-goro-crater-500: #409e39;
--color-lush-un-goro-crater-600: #388532;
--color-lush-un-goro-crater-700: #2d6b28;
--color-lush-un-goro-crater-800: #224e18;
--color-lush-un-goro-crater-900: #173610;
--color-lush-un-goro-crater-950: #072103;
}SCSS
$lush-un-goro-crater: #54a64d;
$lush-un-goro-crater-rgb: 84, 166, 77;
$lush-un-goro-crater-light: mix(#fff, $lush-un-goro-crater, 20%);
$lush-un-goro-crater-dark: mix(#000, $lush-un-goro-crater, 20%);
.element {
color: $lush-un-goro-crater;
box-shadow: 0 0 0 2px rgba($lush-un-goro-crater, 0.35);
}