最接近的命名颜色 · #176A9A
#176A9A
最接近的命名颜色: Wavy Navy
#176A9A（rgb(23 106 154)、hsl(202 74% 35%)、oklch(0.501 0.107 240.5)）最接近命名颜色 Wavy Navy。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#176A9A
oklch(0.501 0.107 240.5)
颜色转换
- HEX
- #176a9a
- RGB
- rgb(23 106 154)
- HSL
- hsl(202 74% 35%)
- HWB
- hwb(202 9% 40%)
- OKLCH
- oklch(0.501 0.107 240.5)
- OKLab
- oklab(0.501 -0.053 -0.093)
- CIE Lab
- lab(41.97 -10.75 -33.45)
- LCH
- lch(41.97 35.14 252.2)
- CMYK
- cmyk(85% 31% 0% 40%)
浅色调 · 深色调 · 灰色调
浅色调
- 3678A4
- 4E87AF
- 6596B9
- 7AA4C3
- 90B3CD
- A6C2D7
- BCD1E1
- D2E0EB
- E8F0F5
深色调
- 125B85
- 0E4D71
- 0A3F5E
- 06314B
- 042439
- 021827
- 010D17
- 000409
- 000001
灰色调
- 296D98
- 366F96
- 417293
- 4C7491
- 55768E
- 5E788C
- 677A89
- 6F7C86
- 787E83
配色和谐
互补色 +180°
- 176A9A
Wavy Navy
- 8F5316
≈ Plain Old Brown
类似色 -30° +30°
- 176A9A
Wavy Navy
- 00707F
≈ Caribbean Dream
- 4D5FA0
≈ Bio Blue
三角配色 +120° +240°
- 176A9A
Wavy Navy
- 934760
≈ Glitterati
- 5B6C1A
≈ Bowser Shell
分裂互补色 +150° +210°
- 176A9A
Wavy Navy
- 97493D
≈ Smokin Hot
- 7A6000
≈ Ground Earth
四角配色 +90° +180° +270°
- 176A9A
Wavy Navy
- 854B80
≈ Vibrant Orchid
- 8F5316
≈ Plain Old Brown
- 2D7442
≈ Felt
对比度与无障碍
Ag
AA白底
WCAG 5.89:1 · APCA Lc 79
Ag
Fail黑底
WCAG 3.56:1 · APCA Lc 23
最佳文字颜色: #FFFFFF
WCAG 5.89:1 (AA) · APCA Lc 79
Contrast pairs
代码片段
CSS
:root {
--wavy-navy: #176a9a;
--wavy-navy-rgb: 23 106 154;
--wavy-navy-oklch: oklch(0.501 0.107 240.5);
}
.element {
color: var(--wavy-navy);
background-color: hsl(202 74% 35%);
border-color: oklch(0.501 0.107 240.5);
}Tailwind CSS v4
@theme {
--color-wavy-navy: #176a9a;
--color-wavy-navy-50: #dcfaff;
--color-wavy-navy-100: #caedff;
--color-wavy-navy-200: #addaff;
--color-wavy-navy-300: #86beea;
--color-wavy-navy-400: #60a7d7;
--color-wavy-navy-500: #378ec6;
--color-wavy-navy-600: #3078a7;
--color-wavy-navy-700: #266086;
--color-wavy-navy-800: #184763;
--color-wavy-navy-900: #0f3145;
--color-wavy-navy-950: #021d2d;
}SCSS
$wavy-navy: #176a9a;
$wavy-navy-rgb: 23, 106, 154;
$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);
}