最接近的命名颜色 · #20487E
#20487E
最接近的命名颜色: Maritime Outpost
#20487E（rgb(32 72 126)、hsl(214 59% 31%)、oklch(0.403 0.102 256.8)）最接近命名颜色 Maritime Outpost。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#20487E
oklch(0.403 0.102 256.8)
颜色转换
- HEX
- #20487e
- RGB
- rgb(32 72 126)
- HSL
- hsl(214 59% 31%)
- HWB
- hwb(214 13% 51%)
- OKLCH
- oklch(0.403 0.102 256.8)
- OKLab
- oklab(0.403 -0.023 -0.099)
- CIE Lab
- lab(29.99 1.11 -35.37)
- LCH
- lch(29.99 35.39 271.8)
- CMYK
- cmyk(75% 43% 0% 51%)
浅色调 · 深色调 · 灰色调
浅色调
- 35598B
- 4A6B98
- 5F7CA5
- 758EB2
- 8BA1BF
- A1B3CC
- B8C6D8
- CFD8E5
- E7ECF2
深色调
- 1A3D6D
- 15335C
- 0F294C
- 0A1F3C
- 06162D
- 030D1F
- 010611
- 000205
- 000001
灰色调
- 2A4E7F
- 34547F
- 3E5A80
- 485F80
- 516581
- 5A6A81
- 647081
- 6D7581
- 777B80
配色和谐
互补色 +180°
- 20487E
Maritime Outpost
- 624100
≈ Notorious Neanderthal
类似色 -30° +30°
- 20487E
Maritime Outpost
- 005068
≈ Hanada Blue
- 463E7C
≈ Sage Violet
三角配色 +120° +240°
- 20487E
Maritime Outpost
- 752D34
≈ Wine and Unwind
- 2C5416
≈ Navy Green
分裂互补色 +150° +210°
- 20487E
Maritime Outpost
- 73330D
≈ Beer Glazed Bacon
- 4E4B00
≈ Scorzonera Brown
四角配色 +90° +180° +270°
- 20487E
Maritime Outpost
- 6E2E53
≈ Bordeaux Red
- 624100
≈ Notorious Neanderthal
- 00563F
≈ Sacramento State Green
对比度与无障碍
Ag
AAA白底
WCAG 9.17:1 · APCA Lc 91
Ag
Fail黑底
WCAG 2.28:1 · APCA Lc 11
最佳文字颜色: #FFFFFF
WCAG 9.17:1 (AAA) · APCA Lc 91
Contrast pairs
代码片段
CSS
:root {
--maritime-outpost: #20487e;
--maritime-outpost-rgb: 32 72 126;
--maritime-outpost-oklch: oklch(0.403 0.102 256.8);
}
.element {
color: var(--maritime-outpost);
background-color: hsl(214 59% 31%);
border-color: oklch(0.403 0.102 256.8);
}Tailwind CSS v4
@theme {
--color-maritime-outpost: #20487e;
--color-maritime-outpost-50: #e4f7ff;
--color-maritime-outpost-100: #d4e9ff;
--color-maritime-outpost-200: #bad6ff;
--color-maritime-outpost-300: #98b9ec;
--color-maritime-outpost-400: #77a0da;
--color-maritime-outpost-500: #5888c9;
--color-maritime-outpost-600: #4b73a9;
--color-maritime-outpost-700: #3c5c88;
--color-maritime-outpost-800: #294465;
--color-maritime-outpost-900: #1b2f47;
--color-maritime-outpost-950: #0c1b2e;
}SCSS
$maritime-outpost: #20487e;
$maritime-outpost-rgb: 32, 72, 126;
$maritime-outpost-light: mix(#fff, $maritime-outpost, 20%);
$maritime-outpost-dark: mix(#000, $maritime-outpost, 20%);
.element {
color: $maritime-outpost;
box-shadow: 0 0 0 2px rgba($maritime-outpost, 0.35);
}