Najbliższy nazwany kolor · #7D5393
#7D5393
Najbliższy nazwany kolor: Ninja Princess
#7D5393 (rgb(125 83 147), hsl(279 28% 45%), oklch(0.514 0.108 313.2)) jest najbliższy nazwanemu kolorowi Ninja Princess. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#7D5393
oklch(0.514 0.108 313.2)
Konwersje koloru
- HEX
- #7d5393
- RGB
- rgb(125 83 147)
- HSL
- hsl(279 28% 45%)
- HWB
- hwb(279 33% 42%)
- OKLCH
- oklch(0.514 0.108 313.2)
- OKLab
- oklab(0.514 0.074 -0.079)
- CIE Lab
- lab(42.05 27.08 -28.56)
- LCH
- lch(42.05 39.36 313.5)
- CMYK
- cmyk(15% 44% 0% 42%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 89639E
- 9674A9
- A385B3
- B096BE
- BCA7C9
- CAB8D4
- D7C9DF
- E4DBE9
- F1EDF4
Odcienie ciemniejsze
- 6C477F
- 5B3B6C
- 4B3059
- 3B2547
- 2C1B36
- 1E1125
- 110816
- 050208
- 010001
Tony
- 7D5891
- 7E5D90
- 7E618E
- 7F668C
- 7F6A8A
- 7F6F89
- 7F7387
- 807884
- 807C82
Harmonie kolorów
Komplementarna +180°
- 7D5393
Ninja Princess
- 4D742E
≈ Loren Forest
Analogowa -30° +30°
- 7D5393
Ninja Princess
- 605DA3
≈ Giant Onion
- 914C77
≈ Sugar Plum
Triada +120° +240°
- 7D5393
Ninja Princess
- 8C5C03
≈ Rat Brown
- 007775
≈ Prismarine
Komplementarna rozszczepiona +150° +210°
- 7D5393
Ninja Princess
- 736900
≈ Brown Green
- 097A55
≈ Poplar Forest
Tetrada +90° +180° +270°
- 7D5393
Ninja Princess
- 9A5030
≈ Hawaiian Coconut
- 4D742E
≈ Loren Forest
- 00738F
≈ Ocean Mirage
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.94:1 · APCA Lc 80
Ag
FailNa czerni
WCAG 3.53:1 · APCA Lc 22
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.94:1 (AA) · APCA Lc 80
Contrast pairs
Fragmenty kodu
CSS
:root {
--ninja-princess: #7d5393;
--ninja-princess-rgb: 125 83 147;
--ninja-princess-oklch: oklch(0.514 0.108 313.2);
}
.element {
color: var(--ninja-princess);
background-color: hsl(279 28% 45%);
border-color: oklch(0.514 0.108 313.2);
}Tailwind CSS v4
@theme {
--color-ninja-princess: #7d5393;
--color-ninja-princess-50: #ffecff;
--color-ninja-princess-100: #f6deff;
--color-ninja-princess-200: #e6c7f5;
--color-ninja-princess-300: #cda7de;
--color-ninja-princess-400: #b58bcc;
--color-ninja-princess-500: #9f6fb9;
--color-ninja-princess-600: #875f9c;
--color-ninja-princess-700: #6c4b7d;
--color-ninja-princess-800: #4e375e;
--color-ninja-princess-900: #372642;
--color-ninja-princess-950: #21142a;
}SCSS
$ninja-princess: #7d5393;
$ninja-princess-rgb: 125, 83, 147;
$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);
}