最接近的命名颜色 · #3F4D6A
#3F4D6A
最接近的命名颜色: Bonne Nuit
#3F4D6A（rgb(63 77 106)、hsl(220 25% 33%)、oklch(0.421 0.052 264.4)）最接近命名颜色 Bonne Nuit。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#3F4D6A
oklch(0.421 0.052 264.4)
颜色转换
- HEX
- #3f4d6a
- RGB
- rgb(63 77 106)
- HSL
- hsl(220 25% 33%)
- HWB
- hwb(220 25% 58%)
- OKLCH
- oklch(0.421 0.052 264.4)
- OKLab
- oklab(0.421 -0.005 -0.052)
- CIE Lab
- lab(32.48 0.48 -18.84)
- LCH
- lch(32.48 18.84 271.5)
- CMYK
- cmyk(41% 27% 0% 58%)
浅色调 · 深色调 · 灰色调
浅色调
- 505D78
- 626E86
- 747F95
- 8690A4
- 9AA2B2
- ADB4C1
- C1C6D1
- D5D9E0
- EAECEF
深色调
- 35425B
- 2C374D
- 232C3F
- 1B2231
- 121824
- 0A0F18
- 04070D
- 010204
- 000000
灰色调
- 45526C
- 4B576F
- 525C71
- 586173
- 5F6676
- 656B78
- 6C717A
- 73767C
- 797B7E
配色和谐
互补色 +180°
- 3F4D6A
Bonne Nuit
- 5B4B2B
≈ Nightingale
类似色 -30° +30°
- 3F4D6A
Bonne Nuit
- 2F5265
≈ Regatta Bay
- 4F4867
≈ Darlak
三角配色 +120° +240°
- 3F4D6A
Bonne Nuit
- 67423F
≈ Folklore
- 3C553B
≈ Highlander
分裂互补色 +150° +210°
- 3F4D6A
Bonne Nuit
- 644632
≈ Copra
- 4D512F
≈ Warplock Bronze
四角配色 +90° +180° +270°
- 3F4D6A
Bonne Nuit
- 64414F
≈ Miranda’s Spike
- 5B4B2B
≈ Nightingale
- 2C574B
≈ Hypnotism
对比度与无障碍
Ag
AAA白底
WCAG 8.46:1 · APCA Lc 89
Ag
Fail黑底
WCAG 2.48:1 · APCA Lc 13
最佳文字颜色: #FFFFFF
WCAG 8.46:1 (AAA) · APCA Lc 89
Contrast pairs
代码片段
CSS
:root {
--bonne-nuit: #3f4d6a;
--bonne-nuit-rgb: 63 77 106;
--bonne-nuit-oklch: oklch(0.421 0.052 264.4);
}
.element {
color: var(--bonne-nuit);
background-color: hsl(220 25% 33%);
border-color: oklch(0.421 0.052 264.4);
}Tailwind CSS v4
@theme {
--color-bonne-nuit: #3f4d6a;
--color-bonne-nuit-50: #eef5ff;
--color-bonne-nuit-100: #e0e8fa;
--color-bonne-nuit-200: #cad4eb;
--color-bonne-nuit-300: #abb7d3;
--color-bonne-nuit-400: #8f9fbe;
--color-bonne-nuit-500: #7586a9;
--color-bonne-nuit-600: #63728f;
--color-bonne-nuit-700: #4f5b73;
--color-bonne-nuit-800: #394355;
--color-bonne-nuit-900: #272e3b;
--color-bonne-nuit-950: #151b25;
}SCSS
$bonne-nuit: #3f4d6a;
$bonne-nuit-rgb: 63, 77, 106;
$bonne-nuit-light: mix(#fff, $bonne-nuit, 20%);
$bonne-nuit-dark: mix(#000, $bonne-nuit, 20%);
.element {
color: $bonne-nuit;
box-shadow: 0 0 0 2px rgba($bonne-nuit, 0.35);
}