Named color · #6D5ACF
Astro Purple
Astro Purple is #6D5ACF: rgb(109 90 207), hsl(250 55% 58%), oklch(0.548 0.174 286.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Astro Purple color name →
#6D5ACF
oklch(0.548 0.174 286.6)
Color conversions
- HEX
- #6d5acf
- RGB
- rgb(109 90 207)
- HSL
- hsl(250 55% 58%)
- HWB
- hwb(250 35% 19%)
- OKLCH
- oklch(0.548 0.174 286.6)
- OKLab
- oklab(0.548 0.05 -0.166)
- CIE Lab
- lab(44.96 30.88 -59.22)
- LCH
- lch(44.96 66.79 297.5)
- CMYK
- cmyk(47% 57% 0% 19%)
Tints · Shades · Tones
Tints
- 796CD5
- 867CDB
- 948DE0
- A29DE6
- B1ADEB
- C0BEEF
- CFCEF4
- DFDEF8
- EFEFFC
Shades
- 5E4DB4
- 4F4199
- 41357F
- 332967
- 261E4F
- 191338
- 0D0923
- 040310
- 010002
Tones
- 6E5FC8
- 6F64C0
- 7169B9
- 736DB1
- 7570A9
- 7774A2
- 79779A
- 7B7A91
- 7D7D89
Color harmonies
Complementary +180°
- 6D5ACF
Astro Purple
- 7A7400
≈ Medusa’s Snakes
Analogous -30° +30°
- 6D5ACF
Astro Purple
- 1B6ED3
≈ Enchanting Sapphire
- 9848B3
≈ Tyrian Shimmer
Triadic +120° +240°
- 6D5ACF
Astro Purple
- B54D00
≈ Skrag Brown
- 008562
≈ Spectral Green
Split-complementary +150° +210°
- 6D5ACF
Astro Purple
- 966600
≈ Gamboge Brown
- 3C8500
≈ Mughal Green
Tetradic +90° +180° +270°
- 6D5ACF
Astro Purple
- C1374C
≈ Fire-Breathing Dragon
- 7A7400
≈ Medusa’s Snakes
- 008183
≈ Teal
Contrast & accessibility
Ag
AAOn white
WCAG 5.23:1 · APCA Lc 76
Ag
FailOn black
WCAG 4.01:1 · APCA Lc 26
Best text color: #FFFFFF
WCAG 5.23:1 (AA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--astro-purple: #6d5acf;
--astro-purple-rgb: 109 90 207;
--astro-purple-oklch: oklch(0.548 0.174 286.6);
}
.element {
color: var(--astro-purple);
background-color: hsl(250 55% 58%);
border-color: oklch(0.548 0.174 286.6);
}Tailwind CSS v4
@theme {
--color-astro-purple: #6d5acf;
--color-astro-purple-50: #f2eeff;
--color-astro-purple-100: #e5dfff;
--color-astro-purple-200: #d1c8ff;
--color-astro-purple-300: #b4a8ff;
--color-astro-purple-400: #998bff;
--color-astro-purple-500: #826df1;
--color-astro-purple-600: #6e5dcb;
--color-astro-purple-700: #574aa3;
--color-astro-purple-800: #3e367b;
--color-astro-purple-900: #2a2557;
--color-astro-purple-950: #18133b;
}SCSS
$astro-purple: #6d5acf;
$astro-purple-rgb: 109, 90, 207;
$astro-purple-light: mix(#fff, $astro-purple, 20%);
$astro-purple-dark: mix(#000, $astro-purple, 20%);
.element {
color: $astro-purple;
box-shadow: 0 0 0 2px rgba($astro-purple, 0.35);
}