最接近的命名颜色 · #2B3E62
#2B3E62
最接近的命名颜色: Nautilus
#2B3E62（rgb(43 62 98)、hsl(219 39% 28%)、oklch(0.366 0.067 262.4)）最接近命名颜色 Nautilus。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#2B3E62
oklch(0.366 0.067 262.4)
颜色转换
- HEX
- #2b3e62
- RGB
- rgb(43 62 98)
- HSL
- hsl(219 39% 28%)
- HWB
- hwb(219 17% 62%)
- OKLCH
- oklch(0.366 0.067 262.4)
- OKLab
- oklab(0.366 -0.009 -0.067)
- CIE Lab
- lab(25.96 1.23 -24.01)
- LCH
- lch(25.96 24.04 272.9)
- CMYK
- cmyk(56% 37% 0% 62%)
浅色调 · 深色调 · 灰色调
浅色调
- 3D4F71
- 516180
- 65748F
- 79869F
- 8E9AAF
- A4ADBE
- BAC1CE
- D0D5DE
- E8EAEF
深色调
- 243554
- 1D2B47
- 16233A
- 101A2D
- 0A1221
- 050A16
- 02040B
- 010103
- 000000
灰色调
- 334565
- 3B4B69
- 43526C
- 4C586F
- 545F72
- 5D6575
- 656C78
- 6E737B
- 77797D
配色和谐
互补色 +180°
- 2B3E62
Nautilus
- 503B0D
≈ Pineapple
类似色 -30° +30°
- 2B3E62
Nautilus
- 0E445C
≈ Sailor Blue
- 40375F
≈ Patriot Blue
三角配色 +120° +240°
- 2B3E62
Nautilus
- 5D2F2E
≈ Jazz
- 284726
≈ Forestry
分裂互补色 +150° +210°
- 2B3E62
Nautilus
- 5A341A
≈ Baker’s Chocolate
- 3F4213
≈ Alligator Gladiator
四角配色 +90° +180° +270°
- 2B3E62
Nautilus
- 592F42
≈ Fig
- 503B0D
≈ Pineapple
- 084A3B
≈ Aqua Deep
对比度与无障碍
Ag
AAA白底
WCAG 10.66:1 · APCA Lc 95
Ag
Fail黑底
WCAG 1.96:1 · APCA Lc 8
最佳文字颜色: #FFFFFF
WCAG 10.66:1 (AAA) · APCA Lc 95
Contrast pairs
代码片段
CSS
:root {
--nautilus: #2b3e62;
--nautilus-rgb: 43 62 98;
--nautilus-oklch: oklch(0.366 0.067 262.4);
}
.element {
color: var(--nautilus);
background-color: hsl(219 39% 28%);
border-color: oklch(0.366 0.067 262.4);
}Tailwind CSS v4
@theme {
--color-nautilus: #2b3e62;
--color-nautilus-50: #ecf5ff;
--color-nautilus-100: #dde8ff;
--color-nautilus-200: #c6d5f2;
--color-nautilus-300: #a6b8db;
--color-nautilus-400: #899fc7;
--color-nautilus-500: #6e86b3;
--color-nautilus-600: #5d7297;
--color-nautilus-700: #4a5b79;
--color-nautilus-800: #35435a;
--color-nautilus-900: #242e3f;
--color-nautilus-950: #131b28;
}SCSS
$nautilus: #2b3e62;
$nautilus-rgb: 43, 62, 98;
$nautilus-light: mix(#fff, $nautilus, 20%);
$nautilus-dark: mix(#000, $nautilus, 20%);
.element {
color: $nautilus;
box-shadow: 0 0 0 2px rgba($nautilus, 0.35);
}