Named color · #4D52DE
Dark Soft Violet
Dark Soft Violet is #4D52DE: rgb(77 82 222), hsl(238 69% 59%), oklch(0.522 0.209 274.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Dark Soft Violet color name →
#4D52DE
oklch(0.522 0.209 274.9)
Color conversions
- HEX
- #4d52de
- RGB
- rgb(77 82 222)
- HSL
- hsl(238 69% 59%)
- HWB
- hwb(238 30% 13%)
- OKLCH
- oklch(0.522 0.209 274.9)
- OKLab
- oklab(0.522 0.018 -0.208)
- CIE Lab
- lab(41.42 32.52 -73.66)
- LCH
- lch(41.42 80.52 293.8)
- CMYK
- cmyk(65% 63% 0% 13%)
Tints · Shades · Tones
Tints
- 5B66E3
- 6A78E8
- 7B8AEC
- 8C9BF0
- 9EACF4
- B0BDF7
- C3CDFA
- D7DEFC
- EBEEFE
Shades
- 4246C1
- 373BA5
- 2C2F89
- 22256F
- 181A55
- 0F113D
- 070826
- 020212
- 000002
Tones
- 5059D5
- 5560CD
- 5965C4
- 5E6ABB
- 636FB2
- 6873A8
- 6E779F
- 747A95
- 7A7D8B
Color harmonies
Complementary +180°
- 4D52DE
Dark Soft Violet
- 7D6800
≈ Arousing Alligator
Analogous -30° +30°
- 4D52DE
Dark Soft Violet
- 006FAF
≈ Daphne
- 863AC7
≈ Dreamscape Purple
Triadic +120° +240°
- 4D52DE
Dark Soft Violet
- BB2E00
≈ Dropped Brick
- 007E47
≈ Picture Book Green
Split-complementary +150° +210°
- 4D52DE
Dark Soft Violet
- 975900
≈ Sepia Wash
- 587500
≈ Topiary Green
Tetradic +90° +180° +270°
- 4D52DE
Dark Soft Violet
- C10359
≈ Velvet Magic
- 7D6800
≈ Arousing Alligator
- 007A70
≈ Pond Moss
Contrast & accessibility
Ag
AAOn white
WCAG 5.87:1 · APCA Lc 79
Ag
FailOn black
WCAG 3.57:1 · APCA Lc 23
Best text color: #FFFFFF
WCAG 5.87:1 (AA) · APCA Lc 79
Contrast pairs
Code snippets
CSS
:root {
--dark-soft-violet: #4d52de;
--dark-soft-violet-rgb: 77 82 222;
--dark-soft-violet-oklch: oklch(0.522 0.209 274.9);
}
.element {
color: var(--dark-soft-violet);
background-color: hsl(238 69% 59%);
border-color: oklch(0.522 0.209 274.9);
}Tailwind CSS v4
@theme {
--color-dark-soft-violet: #4d52de;
--color-dark-soft-violet-50: #e5f1ff;
--color-dark-soft-violet-100: #d6e2ff;
--color-dark-soft-violet-200: #beccff;
--color-dark-soft-violet-300: #9dabff;
--color-dark-soft-violet-400: #7d8eff;
--color-dark-soft-violet-500: #646eff;
--color-dark-soft-violet-600: #555ee2;
--color-dark-soft-violet-700: #434bb6;
--color-dark-soft-violet-800: #2d3789;
--color-dark-soft-violet-900: #1e2661;
--color-dark-soft-violet-950: #0f1343;
}SCSS
$dark-soft-violet: #4d52de;
$dark-soft-violet-rgb: 77, 82, 222;
$dark-soft-violet-light: mix(#fff, $dark-soft-violet, 20%);
$dark-soft-violet-dark: mix(#000, $dark-soft-violet, 20%);
.element {
color: $dark-soft-violet;
box-shadow: 0 0 0 2px rgba($dark-soft-violet, 0.35);
}