Nazwany kolor · #9B4D93
Hyacinth Violet
Hyacinth Violet to #9B4D93: rgb(155 77 147), hsl(306 34% 45%), oklch(0.541 0.137 331.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Hyacinth Violet color name →
#9B4D93
oklch(0.541 0.137 331.2)
Konwersje koloru
- HEX
- #9b4d93
- RGB
- rgb(155 77 147)
- HSL
- hsl(306 34% 45%)
- HWB
- hwb(306 30% 39%)
- OKLCH
- oklch(0.541 0.137 331.2)
- OKLab
- oklab(0.541 0.12 -0.066)
- CIE Lab
- lab(44.78 40.41 -23.96)
- LCH
- lch(44.78 46.98 329.3)
- CMYK
- cmyk(0% 50% 5% 39%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A65F9E
- B070A8
- BB82B3
- C593BE
- CFA5C9
- D9B7D3
- E3C8DE
- ECDAE9
- F6EDF4
Odcienie ciemniejsze
- 86427F
- 72376C
- 5E2C59
- 4B2247
- 391836
- 280F25
- 180716
- 090208
- 010001
Tony
- 995391
- 975990
- 955E8E
- 92648C
- 90698A
- 8D6E88
- 8A7286
- 877784
- 847C82
Harmonie kolorów
Komplementarna +180°
- 9B4D93
Hyacinth Violet
- 158543
≈ Philippine Green
Analogowa -30° +30°
- 9B4D93
Hyacinth Violet
- 7E59B1
≈ Simply Purple
- AC476A
≈ Fuchsia Flock
Triada +120° +240°
- 9B4D93
Hyacinth Violet
- 876C00
≈ Muddy Brown
- 007D8E
≈ Metallic Seaweed
Komplementarna rozszczepiona +150° +210°
- 9B4D93
Hyacinth Violet
- 647A00
≈ Topiary Green
- 008172
≈ Green Garlands
Tetrada +90° +180° +270°
- 9B4D93
Hyacinth Violet
- A25B00
≈ Raw Umber
- 158543
≈ Philippine Green
- 0076B1
≈ Brilliant Blue
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.41:1 · APCA Lc 77
Ag
FailNa czerni
WCAG 3.87:1 · APCA Lc 25
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.41:1 (AA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--hyacinth-violet: #9b4d93;
--hyacinth-violet-rgb: 155 77 147;
--hyacinth-violet-oklch: oklch(0.541 0.137 331.2);
}
.element {
color: var(--hyacinth-violet);
background-color: hsl(306 34% 45%);
border-color: oklch(0.541 0.137 331.2);
}Tailwind CSS v4
@theme {
--color-hyacinth-violet: #9b4d93;
--color-hyacinth-violet-50: #ffe7ff;
--color-hyacinth-violet-100: #ffd8fc;
--color-hyacinth-violet-200: #f9bfed;
--color-hyacinth-violet-300: #e29dd5;
--color-hyacinth-violet-400: #cd7fc3;
--color-hyacinth-violet-500: #b860af;
--color-hyacinth-violet-600: #9c5294;
--color-hyacinth-violet-700: #7d4177;
--color-hyacinth-violet-800: #5c2f59;
--color-hyacinth-violet-900: #40203e;
--color-hyacinth-violet-950: #290f28;
}SCSS
$hyacinth-violet: #9b4d93;
$hyacinth-violet-rgb: 155, 77, 147;
$hyacinth-violet-light: mix(#fff, $hyacinth-violet, 20%);
$hyacinth-violet-dark: mix(#000, $hyacinth-violet, 20%);
.element {
color: $hyacinth-violet;
box-shadow: 0 0 0 2px rgba($hyacinth-violet, 0.35);
}