命名颜色 · #0E87CC
Water Blue
Water Blue 即 #0E87CC：rgb(14 135 204)、hsl(202 87% 43%)、oklch(0.599 0.141 242.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Water Blue color name →
#0E87CC
oklch(0.599 0.141 242.8)
颜色转换
- HEX
- #0e87cc
- RGB
- rgb(14 135 204)
- HSL
- hsl(202 87% 43%)
- HWB
- hwb(202 5% 20%)
- OKLCH
- oklch(0.599 0.141 242.8)
- OKLab
- oklab(0.599 -0.064 -0.125)
- CIE Lab
- lab(53.09 -11.18 -44.86)
- LCH
- lch(53.09 46.24 256)
- CMYK
- cmyk(93% 34% 0% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- 3993D2
- 539FD8
- 6BACDD
- 81B8E2
- 96C4E8
- ABCFED
- C0DBF1
- D5E7F6
- EAF3FB
深色调
- 0B75B1
- 076397
- 05517E
- 034165
- 02314E
- 012137
- 001322
- 00060F
- 000102
灰色调
- 2987C5
- 3987BD
- 4686B6
- 5086AE
- 5A85A7
- 63849F
- 6B8498
- 728290
- 798188
配色和谐
互补色 +180°
- 0E87CC
Water Blue
- B86A00
≈ Brown Orange
类似色 -30° +30°
- 0E87CC
Water Blue
- 008FA5
≈ Parrot Flight
- 6577D3
≈ Indigo Light
三角配色 +120° +240°
- 0E87CC
Water Blue
- C25778
≈ Panama Rose
- 718C13
≈ Scallion
分裂互补色 +150° +210°
- 0E87CC
Water Blue
- C55B46
≈ Summer Fig
- 997D00
≈ Cerignola Olive
四角配色 +90° +180° +270°
- 0E87CC
Water Blue
- B05CA4
≈ Royalty Loyalty
- B86A00
≈ Brown Orange
- 259755
≈ Garnish
对比度与无障碍
Ag
Fail白底
WCAG 3.92:1 · APCA Lc 66
Ag
AA黑底
WCAG 5.35:1 · APCA Lc 36
最佳文字颜色: #000000
WCAG 5.35:1 (AA) · APCA Lc 36
Contrast pairs
代码片段
CSS
:root {
--water-blue: #0e87cc;
--water-blue-rgb: 14 135 204;
--water-blue-oklch: oklch(0.599 0.141 242.8);
}
.element {
color: var(--water-blue);
background-color: hsl(202 87% 43%);
border-color: oklch(0.599 0.141 242.8);
}Tailwind CSS v4
@theme {
--color-water-blue: #0e87cc;
--color-water-blue-50: #d4faff;
--color-water-blue-100: #c1eeff;
--color-water-blue-200: #a1dbff;
--color-water-blue-300: #76bffb;
--color-water-blue-400: #47a7ea;
--color-water-blue-500: #008edb;
--color-water-blue-600: #0078b8;
--color-water-blue-700: #026094;
--color-water-blue-800: #00476e;
--color-water-blue-900: #00314d;
--color-water-blue-950: #001d33;
}SCSS
$water-blue: #0e87cc;
$water-blue-rgb: 14, 135, 204;
$water-blue-light: mix(#fff, $water-blue, 20%);
$water-blue-dark: mix(#000, $water-blue, 20%);
.element {
color: $water-blue;
box-shadow: 0 0 0 2px rgba($water-blue, 0.35);
}