命名颜色 · #52634B
Nature Surrounds
Nature Surrounds 即 #52634B：rgb(82 99 75)、hsl(103 14% 34%)、oklch(0.478 0.043 136.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Nature Surrounds color name →
#52634B
oklch(0.478 0.043 136.6)
颜色转换
- HEX
- #52634b
- RGB
- rgb(82 99 75)
- HSL
- hsl(103 14% 34%)
- HWB
- hwb(103 29% 61%)
- OKLCH
- oklch(0.478 0.043 136.6)
- OKLab
- oklab(0.478 -0.031 0.029)
- CIE Lab
- lab(40 -10.5 11.46)
- LCH
- lch(40 15.54 132.5)
- CMYK
- cmyk(17% 0% 24% 61%)
浅色调 · 深色调 · 灰色调
浅色调
- 62715B
- 72806C
- 828F7D
- 939E8F
- A4AEA1
- B6BEB3
- C8CEC5
- DADED8
- ECEEEC
深色调
- 465540
- 3B4735
- 2F3A2B
- 252E21
- 1A2117
- 11160E
- 080B06
- 020302
- 000000
灰色调
- 576650
- 5B6955
- 606C5B
- 646F60
- 697165
- 6D746B
- 727770
- 777A75
- 7B7D7B
配色和谐
互补色 +180°
- 52634B
Nature Surrounds
- 67566E
≈ Medicine Man
类似色 -30° +30°
- 52634B
Nature Surrounds
- 605F43
≈ Hyde Park
- 456558
≈ Earhart Emerald
三角配色 +120° +240°
- 52634B
Nature Surrounds
- 4E5E76
≈ Vintage Indigo
- 745355
≈ Sheringa Rose
分裂互补色 +150° +210°
- 52634B
Nature Surrounds
- 5B5A75
≈ Agate Violet
- 705462
≈ Earth Brown Violet
四角配色 +90° +180° +270°
- 52634B
Nature Surrounds
- 436270
≈ Bunglehouse Blue
- 67566E
≈ Medicine Man
- 725649
≈ Rue Bourbon
对比度与无障碍
Ag
AA白底
WCAG 6.47:1 · APCA Lc 82
Ag
Fail黑底
WCAG 3.24:1 · APCA Lc 20
最佳文字颜色: #FFFFFF
WCAG 6.47:1 (AA) · APCA Lc 82
Contrast pairs
代码片段
CSS
:root {
--nature-surrounds: #52634b;
--nature-surrounds-rgb: 82 99 75;
--nature-surrounds-oklch: oklch(0.478 0.043 136.6);
}
.element {
color: var(--nature-surrounds);
background-color: hsl(103 14% 34%);
border-color: oklch(0.478 0.043 136.6);
}Tailwind CSS v4
@theme {
--color-nature-surrounds: #52634b;
--color-nature-surrounds-50: #eff8ed;
--color-nature-surrounds-100: #e1ecde;
--color-nature-surrounds-200: #cbd9c7;
--color-nature-surrounds-300: #adbda8;
--color-nature-surrounds-400: #93a58c;
--color-nature-surrounds-500: #798d71;
--color-nature-surrounds-600: #677760;
--color-nature-surrounds-700: #52604d;
--color-nature-surrounds-800: #3c4637;
--color-nature-surrounds-900: #293025;
--color-nature-surrounds-950: #171d14;
}SCSS
$nature-surrounds: #52634b;
$nature-surrounds-rgb: 82, 99, 75;
$nature-surrounds-light: mix(#fff, $nature-surrounds, 20%);
$nature-surrounds-dark: mix(#000, $nature-surrounds, 20%);
.element {
color: $nature-surrounds;
box-shadow: 0 0 0 2px rgba($nature-surrounds, 0.35);
}