最接近的命名颜色 · #7E99C8
#7E99C8
最接近的命名颜色: King Neptune
#7E99C8(rgb(126 153 200)、hsl(218 40% 64%)、oklch(0.68 0.076 261.3))最接近命名颜色 King Neptune。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度,以及 CSS、Tailwind v4 和 SCSS 代码。
#7E99C8
oklch(0.68 0.076 261.3)
颜色转换
- HEX
- #7e99c8
- RGB
- rgb(126 153 200)
- HSL
- hsl(218 40% 64%)
- HWB
- hwb(218 49% 22%)
- OKLCH
- oklch(0.68 0.076 261.3)
- OKLab
- oklab(0.68 -0.012 -0.075)
- CIE Lab
- lab(62.49 -0.92 -27.62)
- LCH
- lch(62.49 27.64 268.1)
- CMYK
- cmyk(37% 24% 0% 22%)
浅色调 · 深色调 · 灰色调
浅色调
- 8AA3CE
- 97ADD3
- A3B7D9
- B0C1DF
- BDCBE4
- CAD6EA
- D7E0EF
- E4EAF4
- F2F5FA
深色调
- 6D84AE
- 5C7094
- 4C5D7B
- 3C4A63
- 2D384C
- 1F2736
- 111721
- 05080F
- 010102
灰色调
- 7E97C1
- 7F94BA
- 7F92B2
- 7F8FAB
- 7F8DA4
- 808A9D
- 808896
- 80858E
- 808387
配色和谐
互补色 +180°
- 7E99C8
King Neptune
- B09461
≈ Antelope
类似色 -30° +30°
- 7E99C8
King Neptune
- 65A1BF
≈ Fate
- 9890C4
≈ Hermosa
三角配色 +120° +240°
- 7E99C8
King Neptune
- C38684
≈ All’s Ace
- 7EA578
≈ Greyish Green
分裂互补色 +150° +210°
- 7E99C8
King Neptune
- BF8B6D
≈ Tiny Fawn
- 9A9D65
≈ Domain
四角配色 +90° +180° +270°
- 7E99C8
King Neptune
- BD859E
≈ Mauvey Nude
- B09461
≈ Antelope
- 65A892
≈ Calmness
对比度与无障碍
Ag
Fail白底
WCAG 2.88:1 · APCA Lc 55
Ag
AAA黑底
WCAG 7.27:1 · APCA Lc 47
最佳文字颜色: #000000
WCAG 7.27:1 (AAA) · APCA Lc 47
Contrast pairs
代码片段
CSS
:root {
--king-neptune: #7e99c8;
--king-neptune-rgb: 126 153 200;
--king-neptune-oklch: oklch(0.68 0.076 261.3);
}
.element {
color: var(--king-neptune);
background-color: hsl(218 40% 64%);
border-color: oklch(0.68 0.076 261.3);
}Tailwind CSS v4
@theme {
--color-king-neptune: #7e99c8;
--color-king-neptune-50: #eaf6ff;
--color-king-neptune-100: #dbe8ff;
--color-king-neptune-200: #c3d5f6;
--color-king-neptune-300: #a3b8df;
--color-king-neptune-400: #859fcc;
--color-king-neptune-500: #6a86b9;
--color-king-neptune-600: #5a729c;
--color-king-neptune-700: #475b7d;
--color-king-neptune-800: #32435d;
--color-king-neptune-900: #222e41;
--color-king-neptune-950: #111b2a;
}SCSS
$king-neptune: #7e99c8;
$king-neptune-rgb: 126, 153, 200;
$king-neptune-light: mix(#fff, $king-neptune, 20%);
$king-neptune-dark: mix(#000, $king-neptune, 20%);
.element {
color: $king-neptune;
box-shadow: 0 0 0 2px rgba($king-neptune, 0.35);
}