Named color · #652DC1
Purple Spot
Purple Spot is #652DC1: rgb(101 45 193), hsl(263 62% 47%), oklch(0.465 0.212 293.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Purple Spot color name →
#652DC1
oklch(0.465 0.212 293.6)
Color conversions
- HEX
- #652dc1
- RGB
- rgb(101 45 193)
- HSL
- hsl(263 62% 47%)
- HWB
- hwb(263 18% 24%)
- OKLCH
- oklch(0.465 0.212 293.6)
- OKLab
- oklab(0.465 0.085 -0.194)
- CIE Lab
- lab(34 49.22 -68.94)
- LCH
- lch(34 84.71 305.5)
- CMYK
- cmyk(48% 77% 0% 24%)
Tints · Shades · Tones
Tints
- 7248C9
- 7F5ED1
- 8D73D8
- 9C88DF
- AB9CE5
- BBAFEB
- CCC3F1
- DCD7F6
- EEEBFB
Shades
- 5726A7
- 491F8F
- 3C1877
- 2F115F
- 220B49
- 170634
- 0C0220
- 03010E
- 000002
Tones
- 673BBB
- 6946B6
- 6B4FB0
- 6D58AA
- 705FA4
- 73679D
- 766D96
- 79748F
- 7C7A88
Color harmonies
Complementary +180°
- 652DC1
Purple Spot
- 5A5F00
≈ Greensboro
Analogous -30° +30°
- 652DC1
Purple Spot
- 1348CD
≈ Flying Fish Blue
- 8D0C9A
≈ Purple Feather Boa
Triadic +120° +240°
- 652DC1
Purple Spot
- 8A4300
≈ Chocolate Pancakes
- 006955
≈ Poster Green
Split-complementary +150° +210°
- 652DC1
Purple Spot
- 735400
≈ Pickled Grape Leaves
- 006D0E
≈ Leafy Lush
Tetradic +90° +180° +270°
- 652DC1
Purple Spot
- AA001F
≈ Incarnadine
- 5A5F00
≈ Greensboro
- 00666D
≈ Trouser Blue
Contrast & accessibility
Ag
AAAOn white
WCAG 7.78:1 · APCA Lc 86
Ag
FailOn black
WCAG 2.69:1 · APCA Lc 16
Best text color: #FFFFFF
WCAG 7.78:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--purple-spot: #652dc1;
--purple-spot-rgb: 101 45 193;
--purple-spot-oklch: oklch(0.465 0.212 293.6);
}
.element {
color: var(--purple-spot);
background-color: hsl(263 62% 47%);
border-color: oklch(0.465 0.212 293.6);
}Tailwind CSS v4
@theme {
--color-purple-spot: #652dc1;
--color-purple-spot-50: #f9eaff;
--color-purple-spot-100: #eddaff;
--color-purple-spot-200: #dcc1ff;
--color-purple-spot-300: #c19eff;
--color-purple-spot-400: #a77fff;
--color-purple-spot-500: #925cff;
--color-purple-spot-600: #7b4fd9;
--color-purple-spot-700: #633faf;
--color-purple-spot-800: #462e84;
--color-purple-spot-900: #301f5d;
--color-purple-spot-950: #1d0d40;
}SCSS
$purple-spot: #652dc1;
$purple-spot-rgb: 101, 45, 193;
$purple-spot-light: mix(#fff, $purple-spot, 20%);
$purple-spot-dark: mix(#000, $purple-spot, 20%);
.element {
color: $purple-spot;
box-shadow: 0 0 0 2px rgba($purple-spot, 0.35);
}