Named color · #7737AA
Shredder Lavender
Shredder Lavender is #7737AA: rgb(119 55 170), hsl(273 51% 44%), oklch(0.479 0.178 306.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Shredder Lavender color name →
#7737AA
oklch(0.479 0.178 306.3)
Color conversions
- HEX
- #7737aa
- RGB
- rgb(119 55 170)
- HSL
- hsl(273 51% 44%)
- HWB
- hwb(273 22% 33%)
- OKLCH
- oklch(0.479 0.178 306.3)
- OKLab
- oklab(0.479 0.105 -0.143)
- CIE Lab
- lab(36.52 44.12 -51.13)
- LCH
- lch(36.52 67.54 310.8)
- CMYK
- cmyk(30% 68% 0% 33%)
Tints · Shades · Tones
Tints
- 844DB4
- 9161BD
- 9E75C6
- AB89CF
- B99CD7
- C6B0E0
- D4C3E8
- E2D7F0
- F1EBF8
Shades
- 672E93
- 57267D
- 471E68
- 381653
- 2A0F3F
- 1C082D
- 10031B
- 05010B
- 010001
Tones
- 7841A7
- 794AA3
- 7A529F
- 7B599B
- 7B6097
- 7C6793
- 7D6E8F
- 7E748A
- 7F7A85
Color harmonies
Complementary +180°
- 7737AA
Shredder Lavender
- 4B6900
≈ Over the Hills
Analogous -30° +30°
- 7737AA
Shredder Lavender
- 484ABE
≈ Free Speech Blue
- 962582
≈ Warm Purple
Triadic +120° +240°
- 7737AA
Shredder Lavender
- 854F00
≈ Medium Brown
- 006C64
≈ Office Blue Green
Split-complementary +150° +210°
- 7737AA
Shredder Lavender
- 6E5C00
≈ Hot Mustard
- 007041
≈ Diisha Green
Tetradic +90° +180° +270°
- 7737AA
Shredder Lavender
- A42C00
≈ Rust Red
- 4B6900
≈ Over the Hills
- 00697C
≈ Caribbean Splash
Contrast & accessibility
Ag
AAAOn white
WCAG 7.21:1 · APCA Lc 84
Ag
FailOn black
WCAG 2.91:1 · APCA Lc 18
Best text color: #FFFFFF
WCAG 7.21:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--shredder-lavender: #7737aa;
--shredder-lavender-rgb: 119 55 170;
--shredder-lavender-oklch: oklch(0.479 0.178 306.3);
}
.element {
color: var(--shredder-lavender);
background-color: hsl(273 51% 44%);
border-color: oklch(0.479 0.178 306.3);
}Tailwind CSS v4
@theme {
--color-shredder-lavender: #7737aa;
--color-shredder-lavender-50: #ffe8ff;
--color-shredder-lavender-100: #f9d8ff;
--color-shredder-lavender-200: #eac0ff;
--color-shredder-lavender-300: #d19dfd;
--color-shredder-lavender-400: #b97ff0;
--color-shredder-lavender-500: #a45ee1;
--color-shredder-lavender-600: #8b50be;
--color-shredder-lavender-700: #6f4098;
--color-shredder-lavender-800: #502e73;
--color-shredder-lavender-900: #382051;
--color-shredder-lavender-950: #230e36;
}SCSS
$shredder-lavender: #7737aa;
$shredder-lavender-rgb: 119, 55, 170;
$shredder-lavender-light: mix(#fff, $shredder-lavender, 20%);
$shredder-lavender-dark: mix(#000, $shredder-lavender, 20%);
.element {
color: $shredder-lavender;
box-shadow: 0 0 0 2px rgba($shredder-lavender, 0.35);
}