Named color · #330066
Deep Violet
Deep Violet is #330066: rgb(51 0 102), hsl(270 100% 20%), oklch(0.276 0.15 296.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Deep Violet color name →
#330066
oklch(0.276 0.15 296.8)
Color conversions
- HEX
- #330066
- RGB
- rgb(51 0 102)
- HSL
- hsl(270 100% 20%)
- HWB
- hwb(270 0% 60%)
- OKLCH
- oklch(0.276 0.15 296.8)
- OKLab
- oklab(0.276 0.068 -0.134)
- CIE Lab
- lab(12.87 38.61 -47.63)
- LCH
- lch(12.87 61.32 309)
- CMYK
- cmyk(50% 100% 0% 60%)
Tints · Shades · Tones
Tints
- 432376
- 553C86
- 685395
- 7B6AA5
- 9082B4
- A59AC3
- BBB3D2
- D1CCE1
- E8E5F0
Shades
- 2B0058
- 23004A
- 1C003C
- 14002F
- 0D0023
- 070017
- 03000C
- 010004
- 000000
Tones
- 39166A
- 40256D
- 473270
- 4E3D74
- 564976
- 5E5479
- 665F7B
- 6F6A7D
- 77757F
Color harmonies
Complementary +180°
- 330066
Deep Violet
- 262B00
≈ Blind Forest
Analogous -30° +30°
- 330066
Deep Violet
- 09166F
≈ Major Tom
- 450047
≈ Jacarta
Triadic +120° +240°
- 330066
Deep Violet
- 401D00
≈ 90% Cocoa
- 003027
≈ Dark Jungle
Split-complementary +150° +210°
- 330066
Deep Violet
- 342500
≈ Black Swan
- 00320C
≈ Haunted Hills
Tetradic +90° +180° +270°
- 330066
Deep Violet
- 520004
≈ Umbral Umber
- 262B00
≈ Blind Forest
- 002E33
≈ Roof Tile Green
Contrast & accessibility
Ag
AAAOn white
WCAG 15.75:1 · APCA Lc 101
Ag
FailOn black
WCAG 1.33:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 15.75:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--deep-violet: #330066;
--deep-violet-rgb: 51 0 102;
--deep-violet-oklch: oklch(0.276 0.15 296.8);
}
.element {
color: var(--deep-violet);
background-color: hsl(270 100% 20%);
border-color: oklch(0.276 0.15 296.8);
}Tailwind CSS v4
@theme {
--color-deep-violet: #330066;
--color-deep-violet-50: #faedff;
--color-deep-violet-100: #eedeff;
--color-deep-violet-200: #dcc7ff;
--color-deep-violet-300: #c2a6fa;
--color-deep-violet-400: #a88aec;
--color-deep-violet-500: #926cdc;
--color-deep-violet-600: #7b5cba;
--color-deep-violet-700: #634a95;
--color-deep-violet-800: #473670;
--color-deep-violet-900: #31254f;
--color-deep-violet-950: #1d1335;
}SCSS
$deep-violet: #330066;
$deep-violet-rgb: 51, 0, 102;
$deep-violet-light: mix(#fff, $deep-violet, 20%);
$deep-violet-dark: mix(#000, $deep-violet, 20%);
.element {
color: $deep-violet;
box-shadow: 0 0 0 2px rgba($deep-violet, 0.35);
}