Benannte Farbe · #664E62
Vicarious Violet
Vicarious Violet ist #664E62: rgb(102 78 98), hsl(310 13% 35%), oklch(0.456 0.044 332.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Vicarious Violet color name →
#664E62
oklch(0.456 0.044 332.1)
Farbumrechnungen
- HEX
- #664e62
- RGB
- rgb(102 78 98)
- HSL
- hsl(310 13% 35%)
- HWB
- hwb(310 31% 60%)
- OKLCH
- oklch(0.456 0.044 332.1)
- OKLab
- oklab(0.456 0.039 -0.021)
- CIE Lab
- lab(36.29 13.2 -7.64)
- LCH
- lch(36.29 15.25 329.9)
- CMYK
- cmyk(0% 24% 4% 60%)
Tints · Shades · Tones
Tints
- 745E70
- 836F7F
- 927F8E
- A1919E
- B0A2AD
- BFB4BD
- CFC6CD
- DFD9DE
- EFECEE
Shades
- 584354
- 4A3847
- 3C2D3A
- 2F232D
- 231921
- 170F16
- 0C070B
- 040203
- 000000
Tones
- 695365
- 6B5868
- 6E5D6B
- 71626E
- 736771
- 766C74
- 787177
- 7B767A
- 7D7B7D
Farbharmonien
Komplementär +180°
- 664E62
Vicarious Violet
- 445E4B
≈ Ethereal Woods
Analog -30° +30°
- 664E62
Vicarious Violet
- 5B516C
≈ Exotic Evening
- 6C4D55
≈ Flamboyant Plum
Triadisch +120° +240°
- 664E62
Vicarious Violet
- 60563A
≈ Olive Bark
- 385E65
≈ Jimbaran Bay
Geteilt komplementär +150° +210°
- 664E62
Vicarious Violet
- 535B3F
≈ Blue Black Crayfish
- 3A5F59
≈ Emerson
Tetradisch +90° +180° +270°
- 664E62
Vicarious Violet
- 69523D
≈ Coffee Liqueur
- 445E4B
≈ Ethereal Woods
- 415A6E
≈ Infinite Deep Sea
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 7.41:1 · APCA Lc 86
Ag
FailAuf Schwarz
WCAG 2.83:1 · APCA Lc 16
Beste Textfarbe: #FFFFFF
WCAG 7.41:1 (AAA) · APCA Lc 86
Contrast pairs
Code-Snippets
CSS
:root {
--vicarious-violet: #664e62;
--vicarious-violet-rgb: 102 78 98;
--vicarious-violet-oklch: oklch(0.456 0.044 332.1);
}
.element {
color: var(--vicarious-violet);
background-color: hsl(310 13% 35%);
border-color: oklch(0.456 0.044 332.1);
}Tailwind CSS v4
@theme {
--color-vicarious-violet: #664e62;
--color-vicarious-violet-50: #fef1fa;
--color-vicarious-violet-100: #f2e3ee;
--color-vicarious-violet-200: #e1cedc;
--color-vicarious-violet-300: #c6afc1;
--color-vicarious-violet-400: #af95aa;
--color-vicarious-violet-500: #987c93;
--color-vicarious-violet-600: #81697d;
--color-vicarious-violet-700: #675464;
--color-vicarious-violet-800: #4b3d4a;
--color-vicarious-violet-900: #342a33;
--color-vicarious-violet-950: #20171f;
}SCSS
$vicarious-violet: #664e62;
$vicarious-violet-rgb: 102, 78, 98;
$vicarious-violet-light: mix(#fff, $vicarious-violet, 20%);
$vicarious-violet-dark: mix(#000, $vicarious-violet, 20%);
.element {
color: $vicarious-violet;
box-shadow: 0 0 0 2px rgba($vicarious-violet, 0.35);
}