Skip to main content

Amethyst color guide

HEX

#9966CC

RGB

153, 102, 204

HSL

270°, 50%, 60%

HSV

270°, 50%, 80%

Amethyst carries the cool gleam of cut quartz — purple with a mineral clarity rather than a candy sheen. #9966CC feels "designed" in the sense of faceted jewelry and luxury packaging. As a mid-tone, it bridges accent blocks and body copy backgrounds better than neon magentas.

Best for

Event branding, newsletters, and customer-facing web pages.

Accessibility

Check contrast before using amethyst for text-heavy layouts, especially on low-contrast backgrounds.

Amethyst color swatch — #9966CC

How does amethyst compare to nearby colors?

What is the difference between amethyst and slate blue?

The main visual split is undertone: Amethyst (#9966CC) feels more cool, while Slate Blue (#6A5ACD) pulls in a different direction. Amethyst and Slate Blue are close enough to substitute for each other, but they do not create the same supporting cast once typography, photography, and neutrals are added. Start with amethyst when the palette wants more dusky violet; switch to slate blue when the better fit is denim or slate.

What color is amethyst?

Named for the violet variety of quartz. Widely used in jewelry marketing, wellness branding, and premium cosmetics.

What is the hex code for amethyst?

FormatValue
HEX#9966CC
RGBrgb(153, 102, 204)
HSLhsl(270°, 50%, 60%)
HSV / HSBhsv(270°, 50%, 80%)
CMYK (approx.)cmyk(25%, 50%, 0%, 20%)

Convert Amethyst to other color formats

Open the color converter with Amethyst (#9966CC) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.

Convert Amethyst in the color converter

What does amethyst mean in design?

Amethyst is often associated with refinement, introspection, and a composed luxury. It tends to read cooler and more crystalline than royal purple, and less sugary than orchid or violet.

How do I use amethyst in code?

CSS (hex)color: #9966CC;
CSS (rgb)color: rgb(153, 102, 204);
CSS (hsl)color: hsl(270, 50%, 60%);
RGB %rgb(60%, 40%, 80%)
Tailwindtext-[#9966CC]
SwiftUIColor(red: 0.600, green: 0.400, blue: 0.800)
UIKitUIColor(red: 0.600, green: 0.400, blue: 0.800, alpha: 1.0)
AndroidColor.rgb(153, 102, 204)
ComposeColor(0xFF9966CC)
Web Safe#9966CC

Is amethyst accessible?

CombinationRatioAAAA lgAAAAAA lgUI
AaWhite text on this color4.1:1
AaBlack text on this color5.13:1
AaThis color as text on white4.1:1
AaThis color as text on black5.13:1

WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.

How does amethyst look with color blindness?

Normal vision#9966CC
Protanopia (red-blind)#8382B3
Deuteranopia (green-blind)#868AAD
Tritanopia (blue-blind)#96A09C
Achromatopsia (total color blindness)#787878

Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.

What colors go with amethyst

#36454F
Charcoal

Pairing amethyst with charcoal adds useful depth while keeping the palette flexible for interfaces, decks, and editorial layouts.

#FFD700
Gold

Gold gives amethyst a warmer highlight, which helps the palette feel more tactile and less screen-native than it would with only neutrals.

#FFFDD0
Cream

Cream gives amethyst a quieter backdrop and preserves a more natural editorial feel than a colder off-white would.

#C0C0C0
Silver

Silver acts more like structure than spectacle beside amethyst, which is often exactly what a stronger source color needs.

#BCB88A
Sage Green

Sage Green shifts amethyst away from a purely cool read and makes the combination feel more considered in real layouts.

What colors clash with amethyst

#39FF14
Neon Green

With amethyst, Neon Green pulls the palette toward LED signage and away from the dusky violet quality that makes the source color usable.

#FF00FF
Magenta

Magenta remaps amethyst too aggressively, dragging it away from vintage editorial and art-school palettes and into a brighter, more performative palette.

#FFA500
Orange

With amethyst, orange creates a warm-cool collision that announces itself before it earns a compositional reason to exist.

#FFFF00
Yellow

Against amethyst, yellow often creates a high-alert contrast that suits signage more naturally than polished editorial or product work.

How should I use amethyst in design?

  • Use amethyst for buttons, badges, and chart accents where it can stand out. Test text contrast with WCAG tools before using it for body copy on light backgrounds.
  • Pair amethyst with warm accents (gold, rust, amber) when you need more energy, or stay in cool territory (navy, silver, sage) for a composed, professional look.
  • Amethyst works in beauty, creative-agency, and premium-product contexts where the brand wants to feel distinctive without resorting to standard corporate blue.

What are good amethyst palettes?

Morning palette

Event branding, newsletters, and customer-facing web pages.

Golden hour

Nonprofit campaigns, fundraising pages, and grant materials.

Brand-ready mix

Product launches, promotional banners, and e-commerce storefronts.

Design with amethyst in Moda

Create a presentation or document using amethyst as your accent color. Moda's AI applies your color palette automatically.

Create a design with amethyst

What are the shades and tints of amethyst?

Shades (darker)

Tints (lighter)

Tones (desaturated)

Hue variations

What are the color harmonies for amethyst?

Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.

Complementary
Green#99CC66Computed
Analogous
Purple#CC66CCComputedBlue#6666CCComputed
Triadic
Orange#CC9966ComputedCyan#66CC99Computed
Split-complementary
Yellow#CCCC66ComputedGreen#66CC66Computed
Monochromatic
Dark Purple#33194DComputedPurple#663399ComputedAmethyst#9966CCComputedLight Blue#CCB3E6Computed
Square
Red#CC6666ComputedGreen#99CC66ComputedCyan#66CCCCComputed

Frequently asked questions

What is the hex code for amethyst?

The hex code for amethyst is #9966CC. In RGB, that's 153 red, 102 green, and 204 blue. The approximate CMYK equivalent is 25% cyan, 50% magenta, 0% yellow, and 20% key (black).

Is amethyst a warm or cool color?

Amethyst sits near the center of the temperature scale but tips cool, which gives you room to steer the palette warmer or cooler with the surrounding accents.

Where does amethyst work best in a layout?

Amethyst is flexible enough to move between accents, section blocks, and supporting roles depending on the contrast around it. It works best when the rest of the palette gives it a clear job instead of asking it to do everything at once.

How should I use amethyst in a design?

Amethyst is versatile enough for headlines, accent bars, buttons, charts, or section backgrounds depending on the contrast around it. It works as either a primary or supporting color in decks, documents, and brand systems.

Can I use amethyst for text or backgrounds?

Amethyst works better with dark text than white text. Black text reaches 5.13:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.

Last updated April 6, 2026

Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.