最接近的命名颜色 · #2CA4DF
#2CA4DF
最接近的命名颜色: High Blue
#2CA4DF（rgb(44 164 223)、hsl(200 74% 52%)、oklch(0.681 0.133 235.8)）最接近命名颜色 High Blue。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#2CA4DF
oklch(0.681 0.133 235.8)
颜色转换
- HEX
- #2ca4df
- RGB
- rgb(44 164 223)
- HSL
- hsl(200 74% 52%)
- HWB
- hwb(200 17% 13%)
- OKLCH
- oklch(0.681 0.133 235.8)
- OKLab
- oklab(0.681 -0.075 -0.11)
- CIE Lab
- lab(63.05 -17.91 -39.82)
- LCH
- lch(63.05 43.66 245.8)
- CMYK
- cmyk(80% 26% 0% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- 4BADE3
- 64B7E6
- 79C0EA
- 8EC9ED
- A1D2F1
- B4DBF4
- C7E4F7
- DAEDFA
- ECF6FC
深色调
- 258EC2
- 1E79A5
- 17648A
- 11506F
- 0A3D56
- 052B3D
- 021A27
- 010A12
- 000102
灰色调
- 3DA1D5
- 4A9DCC
- 549AC2
- 5C97B9
- 6493B0
- 6B8FA6
- 718C9D
- 768893
- 7B848A
配色和谐
互补色 +180°
- 2CA4DF
High Blue
- D6803E
≈ Clay Terrace
类似色 -30° +30°
- 2CA4DF
High Blue
- 00ADBC
≈ Placid Sea
- 7195EB
≈ Guilliman Blue
三角配色 +120° +240°
- 2CA4DF
High Blue
- D8739C
≈ The Sickener
- 95A234
≈ Pickled Cucumber
分裂互补色 +150° +210°
- 2CA4DF
High Blue
- DF756D
≈ Ardent Coral
- BD911A
≈ Moutarde de Bénichon
四角配色 +90° +180° +270°
- 2CA4DF
High Blue
- C27AC5
≈ Gulābī Pink
- D6803E
≈ Clay Terrace
- 5DAE64
≈ Algae
对比度与无障碍
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 {
--high-blue: #2ca4df;
--high-blue-rgb: 44 164 223;
--high-blue-oklch: oklch(0.681 0.133 235.8);
}
.element {
color: var(--high-blue);
background-color: hsl(200 74% 52%);
border-color: oklch(0.681 0.133 235.8);
}Tailwind CSS v4
@theme {
--color-high-blue: #2ca4df;
--color-high-blue-50: #d3fcff;
--color-high-blue-100: #bfefff;
--color-high-blue-200: #9eddff;
--color-high-blue-300: #72c1f3;
--color-high-blue-400: #3eaae2;
--color-high-blue-500: #0091d1;
--color-high-blue-600: #007bb1;
--color-high-blue-700: #00628e;
--color-high-blue-800: #004969;
--color-high-blue-900: #00324a;
--color-high-blue-950: #001e30;
}SCSS
$high-blue: #2ca4df;
$high-blue-rgb: 44, 164, 223;
$high-blue-light: mix(#fff, $high-blue, 20%);
$high-blue-dark: mix(#000, $high-blue, 20%);
.element {
color: $high-blue;
box-shadow: 0 0 0 2px rgba($high-blue, 0.35);
}