最接近的命名颜色 · #8FDCB0
#8FDCB0
最接近的命名颜色: Jovial Jade
#8FDCB0（rgb(143 220 176)、hsl(146 52% 71%)、oklch(0.832 0.099 158.3)）最接近命名颜色 Jovial Jade。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#8FDCB0
oklch(0.832 0.099 158.3)
颜色转换
- HEX
- #8fdcb0
- RGB
- rgb(143 220 176)
- HSL
- hsl(146 52% 71%)
- HWB
- hwb(146 56% 14%)
- OKLCH
- oklch(0.832 0.099 158.3)
- OKLab
- oklab(0.832 -0.092 0.037)
- CIE Lab
- lab(81.87 -31.85 13.83)
- LCH
- lch(81.87 34.73 156.5)
- CMYK
- cmyk(35% 0% 20% 14%)
浅色调 · 深色调 · 灰色调
浅色调
- 9BE0B8
- A7E3C0
- B2E7C7
- BEEACF
- C9EED7
- D4F1DF
- DFF5E7
- EAF8EF
- F4FCF7
深色调
- 7CBF99
- 69A382
- 57886C
- 456E56
- 345442
- 243C2E
- 15261C
- 07110B
- 010201
灰色调
- 8ED3AB
- 8EC9A6
- 8DC0A2
- 8BB69D
- 8AAD98
- 88A493
- 879B8E
- 85928A
- 828985
配色和谐
互补色 +180°
- 8FDCB0
Jovial Jade
- F3AFDE
≈ Hanami Pink
类似色 -30° +30°
- 8FDCB0
Jovial Jade
- B5D58F
≈ Fresh Lettuce
- 74DDD4
≈ Hammam Blue
三角配色 +120° +240°
- 8FDCB0
Jovial Jade
- BBC3FF
≈ Light Periwinkle
- FFB39B
≈ Persicus
分裂互补色 +150° +210°
- 8FDCB0
Jovial Jade
- DAB7FA
≈ Pink Illusion
- FFAEBC
≈ Poodle Skirt
四角配色 +90° +180° +270°
- 8FDCB0
Jovial Jade
- 9BCEFF
≈ Apocyan
- F3AFDE
≈ Hanami Pink
- F3BC81
≈ Majestic Dune
对比度与无障碍
Ag
Fail白底
WCAG 1.61:1 · APCA Lc 27
Ag
AAA黑底
WCAG 13.03:1 · APCA Lc 76
最佳文字颜色: #000000
WCAG 13.03:1 (AAA) · APCA Lc 76
Contrast pairs
代码片段
CSS
:root {
--jovial-jade: #8fdcb0;
--jovial-jade-rgb: 143 220 176;
--jovial-jade-oklch: oklch(0.832 0.099 158.3);
}
.element {
color: var(--jovial-jade);
background-color: hsl(146 52% 71%);
border-color: oklch(0.832 0.099 158.3);
}Tailwind CSS v4
@theme {
--color-jovial-jade: #8fdcb0;
--color-jovial-jade-50: #defeec;
--color-jovial-jade-100: #ccf3dd;
--color-jovial-jade-200: #b0e2c6;
--color-jovial-jade-300: #8ac7a6;
--color-jovial-jade-400: #69b088;
--color-jovial-jade-500: #439a6d;
--color-jovial-jade-600: #3a825d;
--color-jovial-jade-700: #2e684a;
--color-jovial-jade-800: #224c34;
--color-jovial-jade-900: #163523;
--color-jovial-jade-950: #072012;
}SCSS
$jovial-jade: #8fdcb0;
$jovial-jade-rgb: 143, 220, 176;
$jovial-jade-light: mix(#fff, $jovial-jade, 20%);
$jovial-jade-dark: mix(#000, $jovial-jade, 20%);
.element {
color: $jovial-jade;
box-shadow: 0 0 0 2px rgba($jovial-jade, 0.35);
}