Nearest named color · #7036C1
#7036C1
Nearest named color: Purple Emperor
#7036C1 (rgb(112 54 193), hsl(265 56% 48%), oklch(0.487 0.203 297.3)) is closest to the named color Purple Emperor. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#7036C1
oklch(0.487 0.203 297.3)
Color conversions
- HEX
- #7036c1
- RGB
- rgb(112 54 193)
- HSL
- hsl(265 56% 48%)
- HWB
- hwb(265 21% 24%)
- OKLCH
- oklch(0.487 0.203 297.3)
- OKLab
- oklab(0.487 0.093 -0.181)
- CIE Lab
- lab(36.9 47.41 -64.14)
- LCH
- lch(36.9 79.77 306.5)
- CMYK
- cmyk(42% 72% 0% 24%)
Tints · Shades · Tones
Tints
- 7C4EC9
- 8963D0
- 9777D7
- A48BDE
- B39EE4
- C1B2EA
- D0C5F0
- E0D8F5
- EFEBFA
Shades
- 602EA7
- 51258F
- 431E77
- 35165F
- 270F49
- 1A0834
- 0E0320
- 04010E
- 010002
Tones
- 7141BB
- 724BB6
- 7353B0
- 755BAA
- 7662A3
- 78699D
- 7A6F96
- 7C758F
- 7E7B88
Color harmonies
Complementary +180°
- 7036C1
Purple Emperor
- 5B6700
≈ Mud Green
Analogous -30° +30°
- 7036C1
Purple Emperor
- 2E4ED0
≈ New Car
- 961E99
≈ Acai Juice
Triadic +120° +240°
- 7036C1
Purple Emperor
- 904B00
≈ Parasite Brown
- 00705F
≈ Falcon Turquoise
Split-complementary +150° +210°
- 7036C1
Purple Emperor
- 785B00
≈ Blackfire Earth
- 007428
≈ Clear Green
Tetradic +90° +180° +270°
- 7036C1
Purple Emperor
- B50010
≈ Red Lust
- 5B6700
≈ Mud Green
- 006C78
≈ Toadstool Teal
Contrast & accessibility
Ag
AAAOn white
WCAG 7.03:1 · APCA Lc 84
Ag
FailOn black
WCAG 2.98:1 · APCA Lc 18
Best text color: #FFFFFF
WCAG 7.03:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--purple-emperor: #7036c1;
--purple-emperor-rgb: 112 54 193;
--purple-emperor-oklch: oklch(0.487 0.203 297.3);
}
.element {
color: var(--purple-emperor);
background-color: hsl(265 56% 48%);
border-color: oklch(0.487 0.203 297.3);
}Tailwind CSS v4
@theme {
--color-purple-emperor: #7036c1;
--color-purple-emperor-50: #fde9ff;
--color-purple-emperor-100: #f1d9ff;
--color-purple-emperor-200: #e0c0ff;
--color-purple-emperor-300: #c79dff;
--color-purple-emperor-400: #ad7eff;
--color-purple-emperor-500: #985cf9;
--color-purple-emperor-600: #814fd2;
--color-purple-emperor-700: #673fa9;
--color-purple-emperor-800: #4a2e7f;
--color-purple-emperor-900: #331f5a;
--color-purple-emperor-950: #1f0d3d;
}SCSS
$purple-emperor: #7036c1;
$purple-emperor-rgb: 112, 54, 193;
$purple-emperor-light: mix(#fff, $purple-emperor, 20%);
$purple-emperor-dark: mix(#000, $purple-emperor, 20%);
.element {
color: $purple-emperor;
box-shadow: 0 0 0 2px rgba($purple-emperor, 0.35);
}