最接近的命名颜色 · #63D8CE
#63D8CE
最接近的命名颜色: Hammam Blue
#63D8CE（rgb(99 216 206)、hsl(175 60% 62%)、oklch(0.812 0.107 187.7)）最接近命名颜色 Hammam Blue。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#63D8CE
oklch(0.812 0.107 187.7)
颜色转换
- HEX
- #63d8ce
- RGB
- rgb(99 216 206)
- HSL
- hsl(175 60% 62%)
- HWB
- hwb(175 39% 15%)
- OKLCH
- oklch(0.812 0.107 187.7)
- OKLab
- oklab(0.812 -0.106 -0.014)
- CIE Lab
- lab(79.47 -36.38 -5.67)
- LCH
- lch(79.47 36.82 188.9)
- CMYK
- cmyk(54% 0% 5% 15%)
浅色调 · 深色调 · 灰色调
浅色调
- 77DCD3
- 89E0D8
- 9AE4DD
- A9E8E1
- B8ECE6
- C7F0EB
- D5F4F0
- E3F8F5
- F1FBFA
深色调
- 55BCB3
- 47A098
- 3A857F
- 2E6B66
- 21534E
- 163B38
- 0B2523
- 03110F
- 000202
灰色调
- 6ACFC6
- 6FC6BE
- 73BDB6
- 77B4AE
- 7AACA6
- 7CA39E
- 7E9A97
- 7F918F
- 808987
配色和谐
互补色 +180°
- 63D8CE
Hammam Blue
- FDA4B5
≈ Ballet Slippers
类似色 -30° +30°
- 63D8CE
Hammam Blue
- 83D7A7
≈ Fresco Green
- 66D2EF
≈ Heisenberg Blue
三角配色 +120° +240°
- 63D8CE
Hammam Blue
- D4AFF7
≈ Teasel Dipsacus
- F0B474
≈ Golden Chime
分裂互补色 +150° +210°
- 63D8CE
Hammam Blue
- EFA7DA
≈ Pretty Pink Piggy
- FEA98F
≈ Frozen Salmon
四角配色 +90° +180° +270°
- 63D8CE
Hammam Blue
- B3BCFF
≈ Dried Lilac
- FDA4B5
≈ Ballet Slippers
- D4C26E
≈ Citrus Yellow
对比度与无障碍
Ag
Fail白底
WCAG 1.71:1 · APCA Lc 31
Ag
AAA黑底
WCAG 12.24:1 · APCA Lc 72
最佳文字颜色: #000000
WCAG 12.24:1 (AAA) · APCA Lc 72
Contrast pairs
代码片段
CSS
:root {
--hammam-blue: #63d8ce;
--hammam-blue-rgb: 99 216 206;
--hammam-blue-oklch: oklch(0.812 0.107 187.7);
}
.element {
color: var(--hammam-blue);
background-color: hsl(175 60% 62%);
border-color: oklch(0.812 0.107 187.7);
}Tailwind CSS v4
@theme {
--color-hammam-blue: #63d8ce;
--color-hammam-blue-50: #d3fffc;
--color-hammam-blue-100: #c0f4ef;
--color-hammam-blue-200: #9ee3de;
--color-hammam-blue-300: #71c9c3;
--color-hammam-blue-400: #42b3aa;
--color-hammam-blue-500: #009c93;
--color-hammam-blue-600: #00847c;
--color-hammam-blue-700: #006a63;
--color-hammam-blue-800: #004e48;
--color-hammam-blue-900: #003632;
--color-hammam-blue-950: #00211e;
}SCSS
$hammam-blue: #63d8ce;
$hammam-blue-rgb: 99, 216, 206;
$hammam-blue-light: mix(#fff, $hammam-blue, 20%);
$hammam-blue-dark: mix(#000, $hammam-blue, 20%);
.element {
color: $hammam-blue;
box-shadow: 0 0 0 2px rgba($hammam-blue, 0.35);
}