Nazwany kolor · #8B4963
Violet Quartz
Violet Quartz to #8B4963: rgb(139 73 99), hsl(336 31% 42%), oklch(0.494 0.094 356.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Violet Quartz color name →
#8B4963
oklch(0.494 0.094 356.1)
Konwersje koloru
- HEX
- #8b4963
- RGB
- rgb(139 73 99)
- HSL
- hsl(336 31% 42%)
- HWB
- hwb(336 29% 45%)
- OKLCH
- oklch(0.494 0.094 356.1)
- OKLab
- oklab(0.494 0.094 -0.006)
- CIE Lab
- lab(40.04 30.93 -2.07)
- LCH
- lch(40.04 31 356.2)
- CMYK
- cmyk(0% 47% 29% 45%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 975A71
- A36C80
- AF7D8F
- BB8F9E
- C7A1AE
- D2B3BD
- DDC6CE
- E9D9DE
- F4ECEE
Odcienie ciemniejsze
- 783E55
- 663447
- 542A3A
- 43202E
- 321721
- 230E16
- 14060B
- 070203
- 010000
Tony
- 8B4F66
- 8A5569
- 8A5A6C
- 89606E
- 886571
- 876B74
- 857077
- 84757A
- 827B7D
Harmonie kolorów
Komplementarna +180°
- 8B4963
Violet Quartz
- 007260
≈ Falcon Turquoise
Analogowa -30° +30°
- 8B4963
Violet Quartz
- 7D4D7E
≈ Vibrant Orchid
- 904A44
≈ Red Clay
Triada +120° +240°
- 8B4963
Violet Quartz
- 5F6821
≈ Deathworld Forest
- 1C6990
≈ Bondi
Komplementarna rozszczepiona +150° +210°
- 8B4963
Violet Quartz
- 3A7040
≈ Mount Hyjal
- 006F79
≈ Carnival Night
Tetrada +90° +180° +270°
- 8B4963
Violet Quartz
- 795D11
≈ Blackfire Earth
- 007260
≈ Falcon Turquoise
- 485F97
≈ Last Light Blue
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.49:1 · APCA Lc 82
Ag
FailNa czerni
WCAG 3.23:1 · APCA Lc 20
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.49:1 (AA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--violet-quartz: #8b4963;
--violet-quartz-rgb: 139 73 99;
--violet-quartz-oklch: oklch(0.494 0.094 356.1);
}
.element {
color: var(--violet-quartz);
background-color: hsl(336 31% 42%);
border-color: oklch(0.494 0.094 356.1);
}Tailwind CSS v4
@theme {
--color-violet-quartz: #8b4963;
--color-violet-quartz-50: #ffebf5;
--color-violet-quartz-100: #ffdbe8;
--color-violet-quartz-200: #f7c4d4;
--color-violet-quartz-300: #e0a4b7;
--color-violet-quartz-400: #cc87a0;
--color-violet-quartz-500: #b76b88;
--color-violet-quartz-600: #9b5b73;
--color-violet-quartz-700: #7c485c;
--color-violet-quartz-800: #5c3444;
--color-violet-quartz-900: #40232f;
--color-violet-quartz-950: #29121c;
}SCSS
$violet-quartz: #8b4963;
$violet-quartz-rgb: 139, 73, 99;
$violet-quartz-light: mix(#fff, $violet-quartz, 20%);
$violet-quartz-dark: mix(#000, $violet-quartz, 20%);
.element {
color: $violet-quartz;
box-shadow: 0 0 0 2px rgba($violet-quartz, 0.35);
}