Named color · #AA33EE
Sweet Desire
Sweet Desire is #AA33EE: rgb(170 51 238), hsl(278 85% 57%), oklch(0.589 0.261 309.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Sweet Desire color name →
#AA33EE
oklch(0.589 0.261 309.1)
Color conversions
- HEX
- #aa33ee
- RGB
- rgb(170 51 238)
- HSL
- hsl(278 85% 57%)
- HWB
- hwb(278 20% 7%)
- OKLCH
- oklch(0.589 0.261 309.1)
- OKLab
- oklab(0.589 0.165 -0.203)
- CIE Lab
- lab(47.62 68.42 -72.07)
- LCH
- lch(47.62 99.37 313.5)
- CMYK
- cmyk(29% 79% 0% 7%)
Tints · Shades · Tones
Tints
- B351F1
- BB68F4
- C47DF7
- CC91F9
- D5A4FB
- DDB7FD
- E6C9FE
- EEDBFF
- F7EDFF
Shades
- 932BCF
- 7D23B1
- 681C93
- 531477
- 3F0D5C
- 2D0742
- 1B032A
- 0B0114
- 010003
Tones
- A642E3
- A24ED9
- 9E58CE
- 9A60C4
- 9567B9
- 916DAE
- 8D72A3
- 897798
- 847C8C
Color harmonies
Complementary +180°
- AA33EE
Sweet Desire
- 5F8E00
≈ Vida Loca
Analogous -30° +30°
- AA33EE
Sweet Desire
- 685FFF
≈ Blue Genie
- D400AD
≈ Perfectly Purple Place
Triadic +120° +240°
- AA33EE
Sweet Desire
- AD6C00
≈ Caramel
- 009089
≈ Nifty Turquoise
Split-complementary +150° +210°
- AA33EE
Sweet Desire
- 8F7D00
≈ Moscow Papyrus
- 00945F
≈ Green Gloss
Tetradic +90° +180° +270°
- AA33EE
Sweet Desire
- D44600
≈ Ōkaihau Express
- 5F8E00
≈ Vida Loca
- 008BA8
≈ Quintana
Contrast & accessibility
Ag
AAOn white
WCAG 4.75:1 · APCA Lc 72
Ag
FailOn black
WCAG 4.41:1 · APCA Lc 30
Best text color: #FFFFFF
WCAG 4.75:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--sweet-desire: #aa33ee;
--sweet-desire-rgb: 170 51 238;
--sweet-desire-oklch: oklch(0.589 0.261 309.1);
}
.element {
color: var(--sweet-desire);
background-color: hsl(278 85% 57%);
border-color: oklch(0.589 0.261 309.1);
}Tailwind CSS v4
@theme {
--color-sweet-desire: #aa33ee;
--color-sweet-desire-50: #ffe0ff;
--color-sweet-desire-100: #ffcfff;
--color-sweet-desire-200: #f8b2ff;
--color-sweet-desire-300: #e28aff;
--color-sweet-desire-400: #cb63ff;
--color-sweet-desire-500: #b82eff;
--color-sweet-desire-600: #9c2bdb;
--color-sweet-desire-700: #7d23b0;
--color-sweet-desire-800: #5b1886;
--color-sweet-desire-900: #3f105f;
--color-sweet-desire-950: #280141;
}SCSS
$sweet-desire: #aa33ee;
$sweet-desire-rgb: 170, 51, 238;
$sweet-desire-light: mix(#fff, $sweet-desire, 20%);
$sweet-desire-dark: mix(#000, $sweet-desire, 20%);
.element {
color: $sweet-desire;
box-shadow: 0 0 0 2px rgba($sweet-desire, 0.35);
}