最接近的命名颜色 · #7A4F8E
#7A4F8E
最接近的命名颜色: Ninja Princess
#7A4F8E（rgb(122 79 142)、hsl(281 29% 43%)、oklch(0.501 0.108 314.4)）最接近命名颜色 Ninja Princess。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#7A4F8E
oklch(0.501 0.108 314.4)
颜色转换
- HEX
- #7a4f8e
- RGB
- rgb(122 79 142)
- HSL
- hsl(281 29% 43%)
- HWB
- hwb(281 31% 44%)
- OKLCH
- oklch(0.501 0.108 314.4)
- OKLab
- oklab(0.501 0.076 -0.077)
- CIE Lab
- lab(40.53 27.41 -27.95)
- LCH
- lch(40.53 39.15 314.4)
- CMYK
- cmyk(14% 44% 0% 44%)
浅色调 · 深色调 · 灰色调
浅色调
- 876099
- 9471A5
- A182B0
- AE93BB
- BBA4C6
- C8B6D2
- D6C8DD
- E3DAE8
- F1ECF4
深色调
- 69447B
- 593868
- 492E56
- 3A2344
- 2B1934
- 1D1024
- 100715
- 050207
- 010001
灰色调
- 7B548D
- 7C5A8C
- 7C5F8B
- 7D6489
- 7E6888
- 7E6D87
- 7F7285
- 7F7783
- 807B82
配色和谐
互补色 +180°
- 7A4F8E
Ninja Princess
- 48712C
≈ Druid Green
类似色 -30° +30°
- 7A4F8E
Ninja Princess
- 5D599E
≈ Purple Opulence
- 8D4872
≈ Twilight Lavender
三角配色 +120° +240°
- 7A4F8E
Ninja Princess
- 875900
≈ Soil of Avagddu
- 007272
≈ Boating Green
分裂互补色 +150° +210°
- 7A4F8E
Ninja Princess
- 6E6600
≈ Earthy Khaki Green
- 007653
≈ Victoria Peak
四角配色 +90° +180° +270°
- 7A4F8E
Ninja Princess
- 954D2B
≈ Khaki Brown
- 48712C
≈ Druid Green
- 006E8B
≈ Seaport
对比度与无障碍
Ag
AA白底
WCAG 6.29:1 · APCA Lc 81
Ag
Fail黑底
WCAG 3.33:1 · APCA Lc 21
最佳文字颜色: #FFFFFF
WCAG 6.29:1 (AA) · APCA Lc 81
Contrast pairs
代码片段
CSS
:root {
--ninja-princess: #7a4f8e;
--ninja-princess-rgb: 122 79 142;
--ninja-princess-oklch: oklch(0.501 0.108 314.4);
}
.element {
color: var(--ninja-princess);
background-color: hsl(281 29% 43%);
border-color: oklch(0.501 0.108 314.4);
}Tailwind CSS v4
@theme {
--color-ninja-princess: #7a4f8e;
--color-ninja-princess-50: #ffecff;
--color-ninja-princess-100: #f7ddff;
--color-ninja-princess-200: #e7c7f4;
--color-ninja-princess-300: #cea7dd;
--color-ninja-princess-400: #b68bcb;
--color-ninja-princess-500: #a06fb8;
--color-ninja-princess-600: #885e9b;
--color-ninja-princess-700: #6d4b7c;
--color-ninja-princess-800: #4f375d;
--color-ninja-princess-900: #372541;
--color-ninja-princess-950: #22142a;
}SCSS
$ninja-princess: #7a4f8e;
$ninja-princess-rgb: 122, 79, 142;
$ninja-princess-light: mix(#fff, $ninja-princess, 20%);
$ninja-princess-dark: mix(#000, $ninja-princess, 20%);
.element {
color: $ninja-princess;
box-shadow: 0 0 0 2px rgba($ninja-princess, 0.35);
}