最接近的命名颜色 · #6ACBB5
#6ACBB5
最接近的命名颜色: Bevelled Glass
#6ACBB5（rgb(106 203 181)、hsl(166 48% 61%)、oklch(0.777 0.098 177)）最接近命名颜色 Bevelled Glass。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#6ACBB5
oklch(0.777 0.098 177)
颜色转换
- HEX
- #6acbb5
- RGB
- rgb(106 203 181)
- HSL
- hsl(166 48% 61%)
- HWB
- hwb(166 42% 20%)
- OKLCH
- oklch(0.777 0.098 177)
- OKLab
- oklab(0.777 -0.098 0.005)
- CIE Lab
- lab(75.34 -34.02 1.69)
- LCH
- lch(75.34 34.06 177.1)
- CMYK
- cmyk(48% 0% 11% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- 7BD0BC
- 8CD6C3
- 9BDBCB
- AAE0D2
- B9E5D9
- C7EBE1
- D5F0E8
- E3F5F0
- F1FAF7
深色调
- 5BB09D
- 4D9686
- 3F7D6F
- 316559
- 244D44
- 183730
- 0D221D
- 040F0C
- 000202
灰色调
- 6FC3B0
- 72BCAA
- 76B4A5
- 78AD9F
- 7BA59A
- 7C9E95
- 7E9690
- 7F8F8A
- 808785
配色和谐
互补色 +180°
- 6ACBB5
Bevelled Glass
- E99CB7
≈ Always Rosey
类似色 -30° +30°
- 6ACBB5
Bevelled Glass
- 8CC892
≈ Good Luck Charm
- 60C8D6
≈ Watercourse
三角配色 +120° +240°
- 6ACBB5
Bevelled Glass
- BDA9EE
≈ Purple Sand
- E6A677
≈ Sweet Curry
分裂互补色 +150° +210°
- 6ACBB5
Bevelled Glass
- D8A0D7
≈ Velvet Horizon
- EF9E94
≈ Blush
四角配色 +90° +180° +270°
- 6ACBB5
Bevelled Glass
- 9AB5F6
≈ Wondrous Wisteria
- E99CB7
≈ Always Rosey
- D1B36A
≈ Dylan Velvet
对比度与无障碍
Ag
Fail白底
WCAG 1.94:1 · APCA Lc 37
Ag
AAA黑底
WCAG 10.82:1 · APCA Lc 65
最佳文字颜色: #000000
WCAG 10.82:1 (AAA) · APCA Lc 65
Contrast pairs
代码片段
CSS
:root {
--bevelled-glass: #6acbb5;
--bevelled-glass-rgb: 106 203 181;
--bevelled-glass-oklch: oklch(0.777 0.098 177);
}
.element {
color: var(--bevelled-glass);
background-color: hsl(166 48% 61%);
border-color: oklch(0.777 0.098 177);
}Tailwind CSS v4
@theme {
--color-bevelled-glass: #6acbb5;
--color-bevelled-glass-50: #d8fff6;
--color-bevelled-glass-100: #c6f3e8;
--color-bevelled-glass-200: #a7e3d5;
--color-bevelled-glass-300: #7ec8b8;
--color-bevelled-glass-400: #56b19d;
--color-bevelled-glass-500: #209b85;
--color-bevelled-glass-600: #1f8370;
--color-bevelled-glass-700: #19695a;
--color-bevelled-glass-800: #114d40;
--color-bevelled-glass-900: #0b362c;
--color-bevelled-glass-950: #002119;
}SCSS
$bevelled-glass: #6acbb5;
$bevelled-glass-rgb: 106, 203, 181;
$bevelled-glass-light: mix(#fff, $bevelled-glass, 20%);
$bevelled-glass-dark: mix(#000, $bevelled-glass, 20%);
.element {
color: $bevelled-glass;
box-shadow: 0 0 0 2px rgba($bevelled-glass, 0.35);
}