Najbliższy nazwany kolor · #875AA3
#875AA3
Najbliższy nazwany kolor: Vicious Violet
#875AA3 (rgb(135 90 163), hsl(277 29% 50%), oklch(0.546 0.12 311.4)) jest najbliższy nazwanemu kolorowi Vicious Violet. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#875AA3
oklch(0.546 0.12 311.4)
Konwersje koloru
- HEX
- #875aa3
- RGB
- rgb(135 90 163)
- HSL
- hsl(277 29% 50%)
- HWB
- hwb(277 35% 36%)
- OKLCH
- oklch(0.546 0.12 311.4)
- OKLab
- oklab(0.546 0.079 -0.09)
- CIE Lab
- lab(45.55 29.38 -32.51)
- LCH
- lch(45.55 43.82 312.1)
- CMYK
- cmyk(17% 45% 0% 36%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 936AAC
- 9E7AB6
- AA8ABF
- B69AC8
- C2ABD2
- CEBBDB
- DACCE4
- E6DDED
- F3EEF6
Odcienie ciemniejsze
- 754D8D
- 634178
- 513563
- 41294F
- 311E3C
- 21132A
- 130919
- 06030A
- 010001
Tony
- 865EA0
- 86639D
- 856799
- 856B96
- 846E92
- 83728F
- 82768B
- 827988
- 817D84
Harmonie kolorów
Komplementarna +180°
- 875AA3
Vicious Violet
- 567E2C
≈ Master Chief
Analogowa -30° +30°
- 875AA3
Vicious Violet
- 6566B4
≈ Bluish Purple Anemone
- 9E5185
≈ Purple Zergling
Triada +120° +240°
- 875AA3
Vicious Violet
- 9A6300
≈ Raw Sienna
- 00817E
≈ Belly Flop
Komplementarna rozszczepiona +150° +210°
- 875AA3
Vicious Violet
- 7F7200
≈ Sunlit Kelp Green
- 048559
≈ Primal Green
Tetrada +90° +180° +270°
- 875AA3
Vicious Violet
- A95534
≈ Flat Earth
- 567E2C
≈ Master Chief
- 007D9A
≈ Pacific Pleasure
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.22:1 · APCA Lc 76
Ag
FailNa czerni
WCAG 4.02:1 · APCA Lc 26
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.22:1 (AA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--vicious-violet: #875aa3;
--vicious-violet-rgb: 135 90 163;
--vicious-violet-oklch: oklch(0.546 0.12 311.4);
}
.element {
color: var(--vicious-violet);
background-color: hsl(277 29% 50%);
border-color: oklch(0.546 0.12 311.4);
}Tailwind CSS v4
@theme {
--color-vicious-violet: #875aa3;
--color-vicious-violet-50: #ffecff;
--color-vicious-violet-100: #f6ddff;
--color-vicious-violet-200: #e7c6f9;
--color-vicious-violet-300: #cda5e3;
--color-vicious-violet-400: #b689d2;
--color-vicious-violet-500: #a06dc0;
--color-vicious-violet-600: #875da2;
--color-vicious-violet-700: #6c4a82;
--color-vicious-violet-800: #4f3661;
--color-vicious-violet-900: #372544;
--color-vicious-violet-950: #22132c;
}SCSS
$vicious-violet: #875aa3;
$vicious-violet-rgb: 135, 90, 163;
$vicious-violet-light: mix(#fff, $vicious-violet, 20%);
$vicious-violet-dark: mix(#000, $vicious-violet, 20%);
.element {
color: $vicious-violet;
box-shadow: 0 0 0 2px rgba($vicious-violet, 0.35);
}