最接近的命名颜色 · #52A6BD
#52A6BD
最接近的命名颜色: Surgical
#52A6BD（rgb(82 166 189)、hsl(193 45% 53%)、oklch(0.682 0.088 218.2)）最接近命名颜色 Surgical。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#52A6BD
oklch(0.682 0.088 218.2)
颜色转换
- HEX
- #52a6bd
- RGB
- rgb(82 166 189)
- HSL
- hsl(193 45% 53%)
- HWB
- hwb(193 32% 26%)
- OKLCH
- oklch(0.682 0.088 218.2)
- OKLab
- oklab(0.682 -0.069 -0.054)
- CIE Lab
- lab(63.59 -21.51 -20.1)
- LCH
- lch(63.59 29.44 223.1)
- CMYK
- cmyk(57% 12% 0% 26%)
浅色调 · 深色调 · 灰色调
浅色调
- 66AFC4
- 78B8CA
- 8AC1D1
- 9BC9D7
- ACD2DE
- BCDBE5
- CDE4EB
- DEEDF2
- EEF6F8
深色调
- 4690A4
- 3B7A8C
- 2F6574
- 25515D
- 1A3E47
- 112B33
- 081A1F
- 020A0D
- 000102
灰色调
- 59A2B7
- 5F9FB1
- 659BAB
- 6A97A4
- 6F939E
- 739098
- 768C92
- 7A888C
- 7D8486
配色和谐
互补色 +180°
- 52A6BD
Surgical
- C88671
≈ Secluded Canyon
类似色 -30° +30°
- 52A6BD
Surgical
- 4FAAA3
≈ Paradise Island
- 6C9ECD
≈ Blue Electress
三角配色 +120° +240°
- 52A6BD
Surgical
- BD84AC
≈ Joie de Vivre
- A79A58
≈ Iyanden Darksun
分裂互补色 +150° +210°
- 52A6BD
Surgical
- C8828E
≈ Fake Crush
- BD8F5C
≈ Corner Café
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 2.78:1 · APCA Lc 53
Ag
AAA黑底
WCAG 7.54:1 · APCA Lc 48
最佳文字颜色: #000000
WCAG 7.54:1 (AAA) · APCA Lc 48
Contrast pairs
代码片段
CSS
:root {
--surgical: #52a6bd;
--surgical-rgb: 82 166 189;
--surgical-oklch: oklch(0.682 0.088 218.2);
}
.element {
color: var(--surgical);
background-color: hsl(193 45% 53%);
border-color: oklch(0.682 0.088 218.2);
}Tailwind CSS v4
@theme {
--color-surgical: #52a6bd;
--color-surgical-50: #dbfcff;
--color-surgical-100: #c9effc;
--color-surgical-200: #abdeee;
--color-surgical-300: #84c2d7;
--color-surgical-400: #5dabc1;
--color-surgical-500: #3094ad;
--color-surgical-600: #2b7d92;
--color-surgical-700: #226475;
--color-surgical-800: #164a56;
--color-surgical-900: #0e333c;
--color-surgical-950: #011f26;
}SCSS
$surgical: #52a6bd;
$surgical-rgb: 82, 166, 189;
$surgical-light: mix(#fff, $surgical, 20%);
$surgical-dark: mix(#000, $surgical, 20%);
.element {
color: $surgical;
box-shadow: 0 0 0 2px rgba($surgical, 0.35);
}