最接近的命名颜色 · #9CA4F4
#9CA4F4
最接近的命名颜色: Cold Lips
#9CA4F4（rgb(156 164 244)、hsl(235 80% 78%)、oklch(0.744 0.116 278.8)）最接近命名颜色 Cold Lips。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#9CA4F4
oklch(0.744 0.116 278.8)
颜色转换
- HEX
- #9ca4f4
- RGB
- rgb(156 164 244)
- HSL
- hsl(235 80% 78%)
- HWB
- hwb(235 61% 4%)
- OKLCH
- oklch(0.744 0.116 278.8)
- OKLab
- oklab(0.744 0.018 -0.114)
- CIE Lab
- lab(69.11 11.38 -41.39)
- LCH
- lch(69.11 42.92 285.4)
- CMYK
- cmyk(36% 33% 0% 4%)
浅色调 · 深色调 · 灰色调
浅色调
- A5ADF6
- AFB6F7
- B8C0F9
- C2C9FA
- CCD2FB
- D6DBFC
- E0E4FD
- EAEDFE
- F5F6FF
深色调
- 878ED4
- 7379B5
- 5F6497
- 4C507A
- 393D5E
- 282B44
- 181A2B
- 090A14
- 010103
灰色调
- 99A1E8
- 969DDC
- 939AD1
- 9096C5
- 8D93BA
- 8B8FAE
- 888BA2
- 858897
- 83848B
配色和谐
互补色 +180°
- 9CA4F4
Cold Lips
- BEAD50
≈ Star Fruit Yellow Green
类似色 -30° +30°
- 9CA4F4
Cold Lips
- 6FB2F2
≈ French Sky Blue
- C197E4
≈ Bright Lavender
三角配色 +120° +240°
- 9CA4F4
Cold Lips
- EA9275
≈ Warm Welcome
- 65C291
≈ Felt Green
分裂互补色 +150° +210°
- 9CA4F4
Cold Lips
- DB9E55
≈ Honeycomb Yellow
- 95BA69
≈ Green Pepper
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 2.32:1 · APCA Lc 46
Ag
AAA黑底
WCAG 9.03:1 · APCA Lc 56
最佳文字颜色: #000000
WCAG 9.03:1 (AAA) · APCA Lc 56
Contrast pairs
代码片段
CSS
:root {
--cold-lips: #9ca4f4;
--cold-lips-rgb: 156 164 244;
--cold-lips-oklch: oklch(0.744 0.116 278.8);
}
.element {
color: var(--cold-lips);
background-color: hsl(235 80% 78%);
border-color: oklch(0.744 0.116 278.8);
}Tailwind CSS v4
@theme {
--color-cold-lips: #9ca4f4;
--color-cold-lips-50: #eef2ff;
--color-cold-lips-100: #e0e4ff;
--color-cold-lips-200: #cbcfff;
--color-cold-lips-300: #acb1f2;
--color-cold-lips-400: #9097e2;
--color-cold-lips-500: #767cd1;
--color-cold-lips-600: #646ab0;
--color-cold-lips-700: #50548e;
--color-cold-lips-800: #383e6a;
--color-cold-lips-900: #272b4a;
--color-cold-lips-950: #151831;
}SCSS
$cold-lips: #9ca4f4;
$cold-lips-rgb: 156, 164, 244;
$cold-lips-light: mix(#fff, $cold-lips, 20%);
$cold-lips-dark: mix(#000, $cold-lips, 20%);
.element {
color: $cold-lips;
box-shadow: 0 0 0 2px rgba($cold-lips, 0.35);
}