最接近的命名颜色 · #34AE7B
#34AE7B
最接近的命名颜色: Jubilant Jade
#34AE7B（rgb(52 174 123)、hsl(155 54% 44%)、oklch(0.671 0.131 161.1)）最接近命名颜色 Jubilant Jade。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#34AE7B
oklch(0.671 0.131 161.1)
颜色转换
- HEX
- #34ae7b
- RGB
- rgb(52 174 123)
- HSL
- hsl(155 54% 44%)
- HWB
- hwb(155 20% 32%)
- OKLCH
- oklch(0.671 0.131 161.1)
- OKLab
- oklab(0.671 -0.124 0.042)
- CIE Lab
- lab(63.6 -44.03 16.17)
- LCH
- lch(63.6 46.91 159.8)
- CMYK
- cmyk(70% 0% 29% 32%)
浅色调 · 深色调 · 灰色调
浅色调
- 51B688
- 68BF94
- 7DC7A1
- 91CFAE
- A4D7BB
- B6DFC9
- C9E7D6
- DBEFE4
- EDF7F1
深色调
- 2C976A
- 24805A
- 1C6A4A
- 15553A
- 0E412C
- 072E1E
- 031C10
- 010B05
- 000101
灰色调
- 43AA7C
- 4EA57C
- 57A17D
- 5F9C7D
- 66987E
- 6D937E
- 728E7F
- 778A7F
- 7C8580
配色和谐
互补色 +180°
- 34AE7B
Jubilant Jade
- CB73AD
≈ Sky Magenta
类似色 -30° +30°
- 34AE7B
Jubilant Jade
- 78A64A
≈ Greenery
- 00ACA7
≈ Teal Me No Lies
三角配色 +120° +240°
- 34AE7B
Jubilant Jade
- 888AE4
≈ Perrywinkle
- D87753
≈ Peachy Scene
分裂互补色 +150° +210°
- 34AE7B
Jubilant Jade
- B07DD1
≈ Lavender Blossom
- D97181
≈ Strawberry Milkshake
四角配色 +90° +180° +270°
- 34AE7B
Jubilant Jade
- 539AE3
≈ Flax Flower Blue
- CB73AD
≈ Sky Magenta
- C78626
≈ Gentleman’s Whiskey
对比度与无障碍
Ag
Fail白底
WCAG 2.80:1 · APCA Lc 54
Ag
AAA黑底
WCAG 7.48:1 · APCA Lc 48
最佳文字颜色: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
代码片段
CSS
:root {
--jubilant-jade: #34ae7b;
--jubilant-jade-rgb: 52 174 123;
--jubilant-jade-oklch: oklch(0.671 0.131 161.1);
}
.element {
color: var(--jubilant-jade);
background-color: hsl(155 54% 44%);
border-color: oklch(0.671 0.131 161.1);
}Tailwind CSS v4
@theme {
--color-jubilant-jade: #34ae7b;
--color-jubilant-jade-50: #d4ffeb;
--color-jubilant-jade-100: #c1f6dc;
--color-jubilant-jade-200: #a0e6c4;
--color-jubilant-jade-300: #73cda4;
--color-jubilant-jade-400: #48b685;
--color-jubilant-jade-500: #00a069;
--color-jubilant-jade-600: #008759;
--color-jubilant-jade-700: #006c47;
--color-jubilant-jade-800: #045031;
--color-jubilant-jade-900: #043721;
--color-jubilant-jade-950: #002211;
}SCSS
$jubilant-jade: #34ae7b;
$jubilant-jade-rgb: 52, 174, 123;
$jubilant-jade-light: mix(#fff, $jubilant-jade, 20%);
$jubilant-jade-dark: mix(#000, $jubilant-jade, 20%);
.element {
color: $jubilant-jade;
box-shadow: 0 0 0 2px rgba($jubilant-jade, 0.35);
}