Nearest named color · #7A4F8E
#7A4F8E
Nearest named color: Ninja Princess
#7A4F8E (rgb(122 79 142), hsl(281 29% 43%), oklch(0.501 0.108 314.4)) is closest to the named color Ninja Princess. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#7A4F8E
oklch(0.501 0.108 314.4)
Color conversions
- 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%)
Tints · Shades · Tones
Tints
- 876099
- 9471A5
- A182B0
- AE93BB
- BBA4C6
- C8B6D2
- D6C8DD
- E3DAE8
- F1ECF4
Shades
- 69447B
- 593868
- 492E56
- 3A2344
- 2B1934
- 1D1024
- 100715
- 050207
- 010001
Tones
- 7B548D
- 7C5A8C
- 7C5F8B
- 7D6489
- 7E6888
- 7E6D87
- 7F7285
- 7F7783
- 807B82
Color harmonies
Complementary +180°
- 7A4F8E
Ninja Princess
- 48712C
≈ Druid Green
Analogous -30° +30°
- 7A4F8E
Ninja Princess
- 5D599E
≈ Purple Opulence
- 8D4872
≈ Twilight Lavender
Triadic +120° +240°
- 7A4F8E
Ninja Princess
- 875900
≈ Soil of Avagddu
- 007272
≈ Boating Green
Split-complementary +150° +210°
- 7A4F8E
Ninja Princess
- 6E6600
≈ Earthy Khaki Green
- 007653
≈ Victoria Peak
Tetradic +90° +180° +270°
- 7A4F8E
Ninja Princess
- 954D2B
≈ Khaki Brown
- 48712C
≈ Druid Green
- 006E8B
≈ Seaport
Contrast & accessibility
Ag
AAOn white
WCAG 6.29:1 · APCA Lc 81
Ag
FailOn black
WCAG 3.33:1 · APCA Lc 21
Best text color: #FFFFFF
WCAG 6.29:1 (AA) · APCA Lc 81
Contrast pairs
Code snippets
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);
}