Named color · #6A31CA
Sagat Purple
Sagat Purple is #6A31CA: rgb(106 49 202), hsl(262 61% 49%), oklch(0.482 0.218 293.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Sagat Purple color name →
#6A31CA
oklch(0.482 0.218 293.4)
Color conversions
- HEX
- #6a31ca
- RGB
- rgb(106 49 202)
- HSL
- hsl(262 61% 49%)
- HWB
- hwb(262 19% 21%)
- OKLCH
- oklch(0.482 0.218 293.4)
- OKLab
- oklab(0.482 0.086 -0.2)
- CIE Lab
- lab(35.96 50.31 -70.95)
- LCH
- lch(35.96 86.97 305.3)
- CMYK
- cmyk(48% 76% 0% 21%)
Tints · Shades · Tones
Tints
- 764BD1
- 8362D8
- 9176DE
- 9F8AE4
- AE9EEA
- BEB1EF
- CDC5F4
- DED8F8
- EEEBFC
Shades
- 5B29AF
- 4D2295
- 3F1A7C
- 311364
- 240C4D
- 180637
- 0D0322
- 04010F
- 000002
Tones
- 6B3EC4
- 6D49BD
- 6E52B6
- 705AAF
- 7261A8
- 7568A1
- 776F99
- 7A7591
- 7D7A89
Color harmonies
Complementary +180°
- 6A31CA
Sagat Purple
- 5F6400
≈ Mud Green
Analogous -30° +30°
- 6A31CA
Sagat Purple
- 144DD6
≈ Pacific Bridge
- 9411A2
≈ Shiffurple
Triadic +120° +240°
- 6A31CA
Sagat Purple
- 914700
≈ Parasite Brown
- 006F5A
≈ Teal Dark Green
Split-complementary +150° +210°
- 6A31CA
Sagat Purple
- 795800
≈ Blackfire Earth
- 00730E
≈ Spreadsheet Green
Tetradic +90° +180° +270°
- 6A31CA
Sagat Purple
- B20021
≈ Mammary Red
- 5F6400
≈ Mud Green
- 006B73
≈ Toadstool Teal
Contrast & accessibility
Ag
AAAOn white
WCAG 7.22:1 · APCA Lc 84
Ag
FailOn black
WCAG 2.90:1 · APCA Lc 18
Best text color: #FFFFFF
WCAG 7.22:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--sagat-purple: #6a31ca;
--sagat-purple-rgb: 106 49 202;
--sagat-purple-oklch: oklch(0.482 0.218 293.4);
}
.element {
color: var(--sagat-purple);
background-color: hsl(262 61% 49%);
border-color: oklch(0.482 0.218 293.4);
}Tailwind CSS v4
@theme {
--color-sagat-purple: #6a31ca;
--color-sagat-purple-50: #f9e9ff;
--color-sagat-purple-100: #eddaff;
--color-sagat-purple-200: #dcc1ff;
--color-sagat-purple-300: #c19dff;
--color-sagat-purple-400: #a77eff;
--color-sagat-purple-500: #9259ff;
--color-sagat-purple-600: #7c4ddc;
--color-sagat-purple-700: #633db1;
--color-sagat-purple-800: #462d86;
--color-sagat-purple-900: #311e5f;
--color-sagat-purple-950: #1d0d41;
}SCSS
$sagat-purple: #6a31ca;
$sagat-purple-rgb: 106, 49, 202;
$sagat-purple-light: mix(#fff, $sagat-purple, 20%);
$sagat-purple-dark: mix(#000, $sagat-purple, 20%);
.element {
color: $sagat-purple;
box-shadow: 0 0 0 2px rgba($sagat-purple, 0.35);
}