最接近的命名颜色 · #00618E
#00618E
最接近的命名颜色: Wavy Navy
#00618E（rgb(0 97 142)、hsl(199 100% 28%)、oklch(0.468 0.105 238.6)）最接近命名颜色 Wavy Navy。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#00618E
oklch(0.468 0.105 238.6)
颜色转换
- HEX
- #00618e
- RGB
- rgb(0 97 142)
- HSL
- hsl(199 100% 28%)
- HWB
- hwb(199 0% 44%)
- OKLCH
- oklch(0.468 0.105 238.6)
- OKLab
- oklab(0.468 -0.055 -0.09)
- CIE Lab
- lab(38.22 -11.39 -32.21)
- LCH
- lch(38.22 34.16 250.5)
- CMYK
- cmyk(100% 32% 0% 44%)
浅色调 · 深色调 · 灰色调
浅色调
- 2B7099
- 4580A5
- 5D8FB0
- 749FBB
- 8BAEC7
- A2BED2
- B9CEDD
- D0DEE9
- E7EFF4
深色调
- 00537B
- 004668
- 003956
- 002D44
- 002134
- 001524
- 000B15
- 000307
- 000001
灰色调
- 1D658D
- 2D688C
- 3A6B8B
- 456E8A
- 507288
- 5A7587
- 647885
- 6D7A84
- 777D82
配色和谐
互补色 +180°
- 00618E
Wavy Navy
- 85490E
≈ Brown Eyed Girl
类似色 -30° +30°
- 00618E
Wavy Navy
- 006672
≈ Wakame Green
- 425695
≈ Nuthatch Back
三角配色 +120° +240°
- 00618E
Wavy Navy
- 883E59
≈ Ancient Royal Banner
- 55620B
≈ Forestial Outpost
分裂互补色 +150° +210°
- 00618E
Wavy Navy
- 8C4037
≈ Burnt Henna
- 705700
≈ Pickled Grape Leaves
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AA白底
WCAG 6.77:1 · APCA Lc 83
Ag
Fail黑底
WCAG 3.10:1 · APCA Lc 19
最佳文字颜色: #FFFFFF
WCAG 6.77:1 (AA) · APCA Lc 83
Contrast pairs
代码片段
CSS
:root {
--wavy-navy: #00618e;
--wavy-navy-rgb: 0 97 142;
--wavy-navy-oklch: oklch(0.468 0.105 238.6);
}
.element {
color: var(--wavy-navy);
background-color: hsl(199 100% 28%);
border-color: oklch(0.468 0.105 238.6);
}Tailwind CSS v4
@theme {
--color-wavy-navy: #00618e;
--color-wavy-navy-50: #dbfaff;
--color-wavy-navy-100: #caedff;
--color-wavy-navy-200: #acdbfd;
--color-wavy-navy-300: #86bfe8;
--color-wavy-navy-400: #5fa7d5;
--color-wavy-navy-500: #358fc3;
--color-wavy-navy-600: #2f79a5;
--color-wavy-navy-700: #256184;
--color-wavy-navy-800: #174762;
--color-wavy-navy-900: #0f3145;
--color-wavy-navy-950: #021d2c;
}SCSS
$wavy-navy: #00618e;
$wavy-navy-rgb: 0, 97, 142;
$wavy-navy-light: mix(#fff, $wavy-navy, 20%);
$wavy-navy-dark: mix(#000, $wavy-navy, 20%);
.element {
color: $wavy-navy;
box-shadow: 0 0 0 2px rgba($wavy-navy, 0.35);
}