Nazwany kolor · #75528B
Ninja Princess
Ninja Princess to #75528B: rgb(117 82 139), hsl(277 26% 43%), oklch(0.499 0.096 311.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Ninja Princess color name →
#75528B
oklch(0.499 0.096 311.5)
Konwersje koloru
- HEX
- #75528b
- RGB
- rgb(117 82 139)
- HSL
- hsl(277 26% 43%)
- HWB
- hwb(277 32% 45%)
- OKLCH
- oklch(0.499 0.096 311.5)
- OKLab
- oklab(0.499 0.064 -0.072)
- CIE Lab
- lab(40.53 23.45 -26.2)
- LCH
- lch(40.53 35.16 311.8)
- CMYK
- cmyk(16% 41% 0% 45%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 826296
- 8F73A2
- 9D84AE
- AA94B9
- B8A6C5
- C6B7D0
- D4C9DC
- E2DBE8
- F0EDF3
Odcienie ciemniejsze
- 654678
- 553B66
- 462F54
- 372543
- 291A32
- 1C1123
- 0F0814
- 050207
- 010001
Tony
- 76578A
- 775C89
- 796088
- 7A6587
- 7B6A86
- 7C6E85
- 7D7384
- 7E7783
- 7F7C81
Harmonie kolorów
Komplementarna +180°
- 75528B
Ninja Princess
- 4F6E30
≈ Botanical
Analogowa -30° +30°
- 75528B
Ninja Princess
- 5A5B98
≈ Persian Plush
- 884B73
≈ Twilight Lavender
Triada +120° +240°
- 75528B
Ninja Princess
- 855918
≈ Grizzly
- 00726F
≈ Reef
Komplementarna rozszczepiona +150° +210°
- 75528B
Ninja Princess
- 6F6414
≈ Spicy Mustard
- 217451
≈ Green Velvet
Tetrada +90° +180° +270°
- 75528B
Ninja Princess
- 904F35
≈ Arabian Spice
- 4F6E30
≈ Botanical
- 006E88
≈ Private Eye
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.29:1 · APCA Lc 81
Ag
FailNa czerni
WCAG 3.33:1 · APCA Lc 21
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.29:1 (AA) · APCA Lc 81
Contrast pairs
Fragmenty kodu
CSS
:root {
--ninja-princess: #75528b;
--ninja-princess-rgb: 117 82 139;
--ninja-princess-oklch: oklch(0.499 0.096 311.5);
}
.element {
color: var(--ninja-princess);
background-color: hsl(277 26% 43%);
border-color: oklch(0.499 0.096 311.5);
}Tailwind CSS v4
@theme {
--color-ninja-princess: #75528b;
--color-ninja-princess-50: #ffeeff;
--color-ninja-princess-100: #f4dfff;
--color-ninja-princess-200: #e3c9f2;
--color-ninja-princess-300: #c9a9db;
--color-ninja-princess-400: #b18ec8;
--color-ninja-princess-500: #9b73b5;
--color-ninja-princess-600: #836299;
--color-ninja-princess-700: #694e7a;
--color-ninja-princess-800: #4c395c;
--color-ninja-princess-900: #352740;
--color-ninja-princess-950: #201529;
}SCSS
$ninja-princess: #75528b;
$ninja-princess-rgb: 117, 82, 139;
$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);
}