Named color · #65648B
Twilight Purple
Twilight Purple is #65648B: rgb(101 100 139), hsl(242 16% 47%), oklch(0.52 0.061 285.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Twilight Purple color name →
#65648B
oklch(0.52 0.061 285.2)
Color conversions
- HEX
- #65648b
- RGB
- rgb(101 100 139)
- HSL
- hsl(242 16% 47%)
- HWB
- hwb(242 39% 45%)
- OKLCH
- oklch(0.52 0.061 285.2)
- OKLab
- oklab(0.52 0.016 -0.059)
- CIE Lab
- lab(43.65 7.41 -21.56)
- LCH
- lch(43.65 22.79 289)
- CMYK
- cmyk(27% 28% 0% 45%)
Tints · Shades · Tones
Tints
- 737296
- 8181A2
- 9090AD
- 9F9FB9
- AFAFC4
- BEBED0
- CECEDC
- DEDEE7
- EEEFF3
Shades
- 575678
- 494866
- 3C3B54
- 2F2E43
- 222232
- 171623
- 0C0B14
- 030307
- 000001
Tones
- 68678A
- 6A6A89
- 6D6D88
- 6F6F87
- 727286
- 757585
- 787884
- 7A7B83
- 7D7D81
Color harmonies
Complementary +180°
- 65648B
Twilight Purple
- 6E6B41
≈ Fossil Green
Analogous -30° +30°
- 65648B
Twilight Purple
- 516B8C
≈ Wickford Bay
- 765E81
≈ Mystical Purple
Triadic +120° +240°
- 65648B
Twilight Purple
- 875E4B
≈ Rawhide
- 457460
≈ Christmas Ivy
Split-complementary +150° +210°
- 65648B
Twilight Purple
- 7E6440
≈ Well Read
- 59714D
≈ Climbing Ivy
Tetradic +90° +180° +270°
- 65648B
Twilight Purple
- 895A5D
≈ Rabbit Paws
- 6E6B41
≈ Fossil Green
- 3A7474
≈ Ming
Contrast & accessibility
Ag
AAOn white
WCAG 5.60:1 · APCA Lc 78
Ag
FailOn black
WCAG 3.74:1 · APCA Lc 24
Best text color: #FFFFFF
WCAG 5.60:1 (AA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--twilight-purple: #65648b;
--twilight-purple-rgb: 101 100 139;
--twilight-purple-oklch: oklch(0.52 0.061 285.2);
}
.element {
color: var(--twilight-purple);
background-color: hsl(242 16% 47%);
border-color: oklch(0.52 0.061 285.2);
}Tailwind CSS v4
@theme {
--color-twilight-purple: #65648b;
--color-twilight-purple-50: #f3f3ff;
--color-twilight-purple-100: #e6e5fc;
--color-twilight-purple-200: #d2d1ee;
--color-twilight-purple-300: #b5b3d6;
--color-twilight-purple-400: #9a9ac2;
--color-twilight-purple-500: #8281ae;
--color-twilight-purple-600: #6e6d93;
--color-twilight-purple-700: #585776;
--color-twilight-purple-800: #3f4057;
--color-twilight-purple-900: #2b2c3d;
--color-twilight-purple-950: #191926;
}SCSS
$twilight-purple: #65648b;
$twilight-purple-rgb: 101, 100, 139;
$twilight-purple-light: mix(#fff, $twilight-purple, 20%);
$twilight-purple-dark: mix(#000, $twilight-purple, 20%);
.element {
color: $twilight-purple;
box-shadow: 0 0 0 2px rgba($twilight-purple, 0.35);
}