En yakın adlandırılmış renk · #75558C
#75558C
En yakın adlandırılmış renk: Ninja Princess
#75558C (rgb(117 85 140), hsl(275 24% 44%), oklch(0.505 0.092 310.1)) en çok Ninja Princess adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#75558C
oklch(0.505 0.092 310.1)
Renk dönüşümleri
- HEX
- #75558c
- RGB
- rgb(117 85 140)
- HSL
- hsl(275 24% 44%)
- HWB
- hwb(275 33% 45%)
- OKLCH
- oklch(0.505 0.092 310.1)
- OKLab
- oklab(0.505 0.059 -0.071)
- CIE Lab
- lab(41.31 21.92 -25.59)
- LCH
- lch(41.31 33.7 310.6)
- CMYK
- cmyk(16% 39% 0% 45%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 826597
- 8F75A3
- 9D86AE
- AA96BA
- B8A7C5
- C6B8D1
- D4CADC
- E2DBE8
- F0EDF3
Koyu tonlar
- 654979
- 553D67
- 463155
- 372643
- 291C33
- 1C1123
- 0F0814
- 050207
- 010001
Gri tonlar
- 765A8B
- 775E8A
- 786289
- 7A6788
- 7B6B87
- 7C6F86
- 7D7484
- 7E7883
- 7F7C82
Renk uyumları
Tamamlayıcı +180°
- 75558C
Ninja Princess
- 536F34
≈ Deep Pine
Analog -30° +30°
- 75558C
Ninja Princess
- 5B5E98
≈ Wizard’s Potion
- 874F75
≈ Purple Davenport
Üçlü +120° +240°
- 75558C
Ninja Princess
- 865A21
≈ Grizzly
- 007470
≈ Reef
Bölünmüş tamamlayıcı +150° +210°
- 75558C
Ninja Princess
- 71661C
≈ Spicy Mustard
- 2A7552
≈ Greasy Greens
Dörtlü +90° +180° +270°
- 75558C
Ninja Princess
- 91513B
≈ Sierra Redwood
- 536F34
≈ Deep Pine
- 007089
≈ Blue Jay Crest
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 6.11:1 · APCA Lc 80
Ag
FailSiyah üzerinde
WCAG 3.43:1 · APCA Lc 21
En iyi metin rengi: #FFFFFF
WCAG 6.11:1 (AA) · APCA Lc 80
Contrast pairs
Kod parçacıkları
CSS
:root {
--ninja-princess: #75558c;
--ninja-princess-rgb: 117 85 140;
--ninja-princess-oklch: oklch(0.505 0.092 310.1);
}
.element {
color: var(--ninja-princess);
background-color: hsl(275 24% 44%);
border-color: oklch(0.505 0.092 310.1);
}Tailwind CSS v4
@theme {
--color-ninja-princess: #75558c;
--color-ninja-princess-50: #feeeff;
--color-ninja-princess-100: #f2e0ff;
--color-ninja-princess-200: #e2caf1;
--color-ninja-princess-300: #c7aada;
--color-ninja-princess-400: #af8fc7;
--color-ninja-princess-500: #9974b4;
--color-ninja-princess-600: #816398;
--color-ninja-princess-700: #684f7a;
--color-ninja-princess-800: #4b395b;
--color-ninja-princess-900: #342740;
--color-ninja-princess-950: #201529;
}SCSS
$ninja-princess: #75558c;
$ninja-princess-rgb: 117, 85, 140;
$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);
}