Named color · #746F9D
Purple Spire
Purple Spire is #746F9D: rgb(116 111 157), hsl(247 19% 53%), oklch(0.564 0.071 288.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Purple Spire color name →
#746F9D
oklch(0.564 0.071 288.9)
Color conversions
- HEX
- #746f9d
- RGB
- rgb(116 111 157)
- HSL
- hsl(247 19% 53%)
- HWB
- hwb(247 44% 38%)
- OKLCH
- oklch(0.564 0.071 288.9)
- OKLab
- oklab(0.564 0.023 -0.067)
- CIE Lab
- lab(48.67 9.96 -24.36)
- LCH
- lch(48.67 26.32 292.2)
- CMYK
- cmyk(26% 29% 0% 38%)
Tints · Shades · Tones
Tints
- 817DA7
- 8E8AB1
- 9B98BA
- A9A7C4
- B7B5CE
- C5C3D8
- D3D2E1
- E1E1EB
- F0F0F5
Shades
- 646088
- 545173
- 45425F
- 37344C
- 29273A
- 1B1A28
- 0F0E18
- 050409
- 010101
Tones
- 75719A
- 767398
- 777495
- 797692
- 7A788F
- 7B7A8C
- 7C7B89
- 7D7D86
- 7F7E83
Color harmonies
Complementary +180°
- 746F9D
Purple Spire
- 797947
≈ Tara’s Drapes
Analogous -30° +30°
- 746F9D
Purple Spire
- 5C779F
≈ Montreux Blue
- 886890
≈ Poetry Mauve
Triadic +120° +240°
- 746F9D
Purple Spire
- 986950
≈ Old Driftwood
- 48836E
≈ Herb Blend
Split-complementary +150° +210°
- 746F9D
Purple Spire
- 8C7144
≈ Rokou Brown
- 608058
≈ Garden Grove
Tetradic +90° +180° +270°
- 746F9D
Purple Spire
- 9B6565
≈ Copper Rose
- 797947
≈ Tara’s Drapes
- 3C8285
≈ Pacific Sea Teal
Contrast & accessibility
Ag
AAOn white
WCAG 4.66:1 · APCA Lc 72
Ag
AAOn black
WCAG 4.50:1 · APCA Lc 29
Best text color: #FFFFFF
WCAG 4.66:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--purple-spire: #746f9d;
--purple-spire-rgb: 116 111 157;
--purple-spire-oklch: oklch(0.564 0.071 288.9);
}
.element {
color: var(--purple-spire);
background-color: hsl(247 19% 53%);
border-color: oklch(0.564 0.071 288.9);
}Tailwind CSS v4
@theme {
--color-purple-spire: #746f9d;
--color-purple-spire-50: #f5f2ff;
--color-purple-spire-100: #e7e4fe;
--color-purple-spire-200: #d4d0f1;
--color-purple-spire-300: #b7b2da;
--color-purple-spire-400: #9c98c6;
--color-purple-spire-500: #847fb2;
--color-purple-spire-600: #706b97;
--color-purple-spire-700: #595679;
--color-purple-spire-800: #403f5a;
--color-purple-spire-900: #2c2b3f;
--color-purple-spire-950: #1a1828;
}SCSS
$purple-spire: #746f9d;
$purple-spire-rgb: 116, 111, 157;
$purple-spire-light: mix(#fff, $purple-spire, 20%);
$purple-spire-dark: mix(#000, $purple-spire, 20%);
.element {
color: $purple-spire;
box-shadow: 0 0 0 2px rgba($purple-spire, 0.35);
}