最接近的命名颜色 · #317F9A
#317F9A
最接近的命名颜色: Ahoy! Blue
#317F9A（rgb(49 127 154)、hsl(195 52% 40%)、oklch(0.56 0.086 224.5)）最接近命名颜色 Ahoy! Blue。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#317F9A
oklch(0.56 0.086 224.5)
颜色转换
- HEX
- #317f9a
- RGB
- rgb(49 127 154)
- HSL
- hsl(195 52% 40%)
- HWB
- hwb(195 19% 40%)
- OKLCH
- oklch(0.56 0.086 224.5)
- OKLab
- oklab(0.56 -0.061 -0.06)
- CIE Lab
- lab(49.32 -17.92 -22.03)
- LCH
- lch(49.32 28.39 230.9)
- CMYK
- cmyk(68% 18% 0% 40%)
浅色调 · 深色调 · 灰色调
浅色调
- 498BA4
- 5E98AE
- 73A4B8
- 87B1C2
- 9BBECC
- AFCBD6
- C3D8E0
- D7E5EB
- EBF2F5
深色调
- 296E85
- 225D71
- 1A4C5E
- 133C4B
- 0C2D39
- 061F27
- 031117
- 010609
- 000101
灰色调
- 3D7F98
- 468095
- 4F8093
- 578090
- 5F808D
- 66808B
- 6D8088
- 738086
- 7A8083
配色和谐
互补色 +180°
- 317F9A
Ahoy! Blue
- 9E644A
≈ Antique Copper
类似色 -30° +30°
- 317F9A
Ahoy! Blue
- 248484
≈ Bayou
- 5177A6
≈ Sage Blossom Blue
三角配色 +120° +240°
- 317F9A
Ahoy! Blue
- 986080
≈ Raspberry Jelly Red
- 7C7737
≈ Spanish Bistre
分裂互补色 +150° +210°
- 317F9A
Ahoy! Blue
- A05F65
≈ Pizza Pie
- 926D37
≈ Vintage Caramel
四角配色 +90° +180° +270°
- 317F9A
Ahoy! Blue
- 876598
≈ Dark Lavender
- 9E644A
≈ Antique Copper
- 5F804B
≈ Green Knoll
对比度与无障碍
Ag
AA白底
WCAG 4.53:1 · APCA Lc 71
Ag
AA黑底
WCAG 4.63:1 · APCA Lc 30
最佳文字颜色: #000000
WCAG 4.63:1 (AA) · APCA Lc 30
Contrast pairs
代码片段
CSS
:root {
--ahoy-blue: #317f9a;
--ahoy-blue-rgb: 49 127 154;
--ahoy-blue-oklch: oklch(0.56 0.086 224.5);
}
.element {
color: var(--ahoy-blue);
background-color: hsl(195 52% 40%);
border-color: oklch(0.56 0.086 224.5);
}Tailwind CSS v4
@theme {
--color-ahoy-blue: #317f9a;
--color-ahoy-blue-50: #ddfbff;
--color-ahoy-blue-100: #cbeefe;
--color-ahoy-blue-200: #aedcf1;
--color-ahoy-blue-300: #88c1d9;
--color-ahoy-blue-400: #63aac4;
--color-ahoy-blue-500: #3a92b0;
--color-ahoy-blue-600: #337c95;
--color-ahoy-blue-700: #296378;
--color-ahoy-blue-800: #1b4958;
--color-ahoy-blue-900: #11333d;
--color-ahoy-blue-950: #031e27;
}SCSS
$ahoy-blue: #317f9a;
$ahoy-blue-rgb: 49, 127, 154;
$ahoy-blue-light: mix(#fff, $ahoy-blue, 20%);
$ahoy-blue-dark: mix(#000, $ahoy-blue, 20%);
.element {
color: $ahoy-blue;
box-shadow: 0 0 0 2px rgba($ahoy-blue, 0.35);
}