命名颜色 · #54A64D
Lush Un’goro Crater
Lush Un’goro Crater 即 #54A64D：rgb(84 166 77)、hsl(115 37% 48%)、oklch(0.653 0.149 142.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Lush Un’goro Crater color name →
#54A64D
oklch(0.653 0.149 142.2)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- 67AF60
- 78B872
- 89C183
- 9ACA95
- ABD3A6
- BCDCB8
- CDE5CA
- DDEDDB
- EEF6ED
深色调
- 489042
- 3C7A37
- 31652C
- 265122
- 1B3E18
- 112B0F
- 081A07
- 020A02
- 000100
灰色调
- 5AA254
- 609F5A
- 659B60
- 6A9865
- 6E946A
- 72906F
- 768C73
- 7A8878
- 7D847C
配色和谐
互补色 +180°
- 54A64D
Lush Un’goro Crater
- BA6EC5
≈ Lavendless
类似色 -30° +30°
- 54A64D
Lush Un’goro Crater
- 939800
≈ Pea Soup
- 00A887
≈ Moray Eel
三角配色 +120° +240°
- 54A64D
Lush Un’goro Crater
- 5C8DEA
≈ Soft Blue
- DC6665
≈ Salami Slice
分裂互补色 +150° +210°
- 54A64D
Lush Un’goro Crater
- 937CE2
≈ Indigo Bloom
- D26599
≈ Nocturnal Rose
四角配色 +90° +180° +270°
- 54A64D
Lush Un’goro Crater
- 009DD3
≈ Structural Blue
- BA6EC5
≈ Lavendless
- D57229
≈ Bitter Orange
对比度与无障碍
Ag
Fail白底
WCAG 3.02:1 · APCA Lc 57
Ag
AA黑底
WCAG 6.93:1 · APCA Lc 45
最佳文字颜色: #000000
WCAG 6.93:1 (AA) · APCA Lc 45
Contrast pairs
代码片段
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);
}