Named color · #513B6E
Succinct Violet
Succinct Violet is #513B6E: rgb(81 59 110), hsl(266 30% 33%), oklch(0.4 0.087 302.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Succinct Violet color name →
#513B6E
oklch(0.4 0.087 302.6)
Color conversions
- HEX
- #513b6e
- RGB
- rgb(81 59 110)
- HSL
- hsl(266 30% 33%)
- HWB
- hwb(266 23% 57%)
- OKLCH
- oklch(0.4 0.087 302.6)
- OKLab
- oklab(0.4 0.047 -0.073)
- CIE Lab
- lab(29.19 18.69 -26.31)
- LCH
- lch(29.19 32.27 305.4)
- CMYK
- cmyk(26% 46% 0% 57%)
Tints · Shades · Tones
Tints
- 614D7C
- 715F8A
- 817299
- 9285A7
- A398B5
- B5ACC4
- C7C0D2
- D9D5E1
- ECEAF0
Shades
- 45325F
- 3A2950
- 2F2141
- 241933
- 1A1126
- 100919
- 07040E
- 020104
- 000001
Tones
- 554270
- 5A4972
- 5F5074
- 635776
- 685E78
- 6D647A
- 716B7C
- 76727D
- 7B797F
Color harmonies
Complementary +180°
- 513B6E
Succinct Violet
- 3F4F11
≈ No Emissions Green
Analogous -30° +30°
- 513B6E
Succinct Violet
- 384376
≈ Little Blue Heron
- 63355C
≈ Opulent Purple
Triadic +120° +240°
- 513B6E
Succinct Violet
- 683B08
≈ Bestial Brown
- 00544B
≈ Plankton Green
Split-complementary +150° +210°
- 513B6E
Succinct Violet
- 574600
≈ Sugarloaf Brown
- 1A5530
≈ Moor-Monster
Tetradic +90° +180° +270°
- 513B6E
Succinct Violet
- 6F3428
≈ Pueblo
- 3F4F11
≈ No Emissions Green
- 00515E
≈ Sandalwood Grey Blue
Contrast & accessibility
Ag
AAAOn white
WCAG 9.54:1 · APCA Lc 92
Ag
FailOn black
WCAG 2.20:1 · APCA Lc 10
Best text color: #FFFFFF
WCAG 9.54:1 (AAA) · APCA Lc 92
Contrast pairs
Code snippets
CSS
:root {
--succinct-violet: #513b6e;
--succinct-violet-rgb: 81 59 110;
--succinct-violet-oklch: oklch(0.4 0.087 302.6);
}
.element {
color: var(--succinct-violet);
background-color: hsl(266 30% 33%);
border-color: oklch(0.4 0.087 302.6);
}Tailwind CSS v4
@theme {
--color-succinct-violet: #513b6e;
--color-succinct-violet-50: #fbefff;
--color-succinct-violet-100: #eee1ff;
--color-succinct-violet-200: #dcccf3;
--color-succinct-violet-300: #c1addc;
--color-succinct-violet-400: #a892c9;
--color-succinct-violet-500: #9178b6;
--color-succinct-violet-600: #7b6699;
--color-succinct-violet-700: #62517b;
--color-succinct-violet-800: #473b5c;
--color-succinct-violet-900: #312940;
--color-succinct-violet-950: #1d1629;
}SCSS
$succinct-violet: #513b6e;
$succinct-violet-rgb: 81, 59, 110;
$succinct-violet-light: mix(#fff, $succinct-violet, 20%);
$succinct-violet-dark: mix(#000, $succinct-violet, 20%);
.element {
color: $succinct-violet;
box-shadow: 0 0 0 2px rgba($succinct-violet, 0.35);
}