Amethyst is a soothing, regal purple with hints of blue, nestled between violet and lavender on the color wheel. It exudes elegance and calm. Similar shades include lilac and plum. Use it in designs to add a touch of sophistication and tranquility, perfect for a serene and harmonious vibe.
Amethyst is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #9966CC
- RGB value: 60.0% red, 40.0% green, 80.0% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as amethyst, consider:
- Violet (#7f00ff): Violet closely resembles Amethyst with its rich, deep hue that slightly leans towards a more intense blue-purple tone. Both colors share a vibrant, eye-catching quality.
- Indigo (#560591): Indigo offers a dark purple-blue shade, akin to the mystical allure of Amethyst. It provides a similar depth and richness, though with a bit more darkness and blue undertones.
- Lavender (#d3d3ff): Lavender is a softer, lighter variant of Amethyst, capturing the same calming purple essence with a more pastel, gentle feel. It reflects the more subdued side of the amethyst spectrum.
- Purple (#9d00ff): Purple brings an intense, bold variation, much like Amethyst. It shares Amethyst’s core characteristics with a strong and vivid shade, adding a slightly redder hue.
To complement Amethyst, consider pairing it with:
- Gold (#EFBF04): Gold introduces a warm, luxurious contrast to Amethyst's cool tones, adding a sophisticated and regal flair to the color palette.
- Mint Green (#ADEBB3): Mint Green brings a refreshing and vibrant balance, highlighting Amethyst's rich depth while creating a soothing, harmonious combination.
- Blush Pink (#FF7782): Blush Pink adds a gentle, romantic touch to Amethyst, enhancing its softness and creating a warm, inviting aesthetic.
- Ivory (#FFFFE3): Ivory serves as a neutral backdrop, allowing Amethyst to stand out while maintaining a clean and classic look.
- Apricot (#FFB27F): Apricot’s light, warm energy complements Amethyst by providing a lively yet balanced contrast.
While Amethyst, a mystical shade, evokes luxury and tranquility, it may clash with:
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Mystic Oasis
Lush Harmony
Orchid Splash
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
4.1:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
5.13:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #9966CC, known as Amethyst, has RGB values of R:153, G:102, B:204 and CMYK values of C:25, M:50, Y:0, K:20.
| VALUE | CSS | |
|---|---|---|
| HEX | #9966CC | #9966CC |
| RGB DECIMAL | 153, 102, 204 | RGB(153,102,204) |
| RGB PERCENTAGE | 60.0, 40.0, 80.0 | RGB(60.0%,40.0%,80.0%) |
| CMYK | 25, 50, 0, 20 | |
| HSL | HSL(270.0, 50.0%, 60.0%) | HSL(270.0, 50.0%, 60.0%) |
| HSV (OR HSB) | 270.0°, 50.0, 80.0 | |
| WEB SAFE | #153102204 | #153102204 |
| BINARY | 10011001, 01100110, 11001100 | |
| iOS - SwiftUI | Color(red: 0.600, green: 0.400, blue: 0.800) | |
| iOS - UIKit | UIColor(red: 0.600, green: 0.400, blue: 0.800, alpha: 1) | |
| Android - Compose | Color(0xFF9966CC) |
