Where Onyx works best
HEX
#353839
RGB
53, 56, 57
HSL
195°, 4%, 22%
HSV
195°, 7%, 22%
The hush right before the lights go up — black-adjacent, with a mineral identity. #353839 makes surfaces feel carved, not printed; type on it can glow by contrast. It carries ceremony: invitations, watch dials, luxury packaging.
Best for
Financial services branding and client-facing digital experiences.
Accessibility
White text on onyx passes AAA at 11.82:1, so it is safe for dark backgrounds and section headers.
How does onyx compare to nearby colors?
What is the difference between onyx and slate gray?
Onyx (#353839) lands deeper on the value scale than Slate Gray (#708090), so the first impression is about darkness before hue. Onyx has enough shadow to function like the structural base of a palette, while Slate Gray stays better suited to lighter-facing uses. Use onyx if the palette needs to feel more anchored; switch to slate gray when the darker version starts to close the page down too much.
What color is onyx?
Onyx is a banded chalcedony used decoratively since antiquity. As a color name it typically denotes deep, cool near-black in jewelry and interiors.
What is the hex code for onyx?
| Format | Value |
|---|---|
| HEX | #353839 |
| RGB | rgb(53, 56, 57) |
| HSL | hsl(195°, 4%, 22%) |
| HSV / HSB | hsv(195°, 7%, 22%) |
| CMYK (approx.) | cmyk(7%, 2%, 0%, 78%) |
Convert Onyx to other color formats
Open the color converter with Onyx (#353839) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Onyx in the color converter →What does onyx mean in design?
Onyx is often associated with luxury, formality, and guarded elegance. It reads as more "jeweled" and slightly cooler than graphite, and more dramatic than mid-tone grays.
How do I use onyx in code?
| CSS (hex) | color: #353839; |
| CSS (rgb) | color: rgb(53, 56, 57); |
| CSS (hsl) | color: hsl(195, 4%, 22%); |
| RGB % | rgb(21%, 22%, 22%) |
| Tailwind | text-[#353839] |
| SwiftUI | Color(red: 0.208, green: 0.220, blue: 0.224) |
| UIKit | UIColor(red: 0.208, green: 0.220, blue: 0.224, alpha: 1.0) |
| Android | Color.rgb(53, 56, 57) |
| Compose | Color(0xFF353839) |
| Web Safe | #333333 |
Is onyx accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 11.82:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaBlack text on this color | 1.78:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on white | 11.82:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on black | 1.78: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 onyx look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with onyx
White is the easiest way to keep onyx usable in covers, dashboards, and dark sections because the contrast still holds at presentation distance.
Charcoal gives onyx a modern dark partner that feels softer and more material than default black.
Pairing onyx with navy blue adds structure without flattening the source color into something generic.
What colors clash with onyx
With a quiet color like onyx, magenta rarely reads as a helpful accent; it overwhelms the base mood and makes the system feel less composed.
With onyx, Pastel Pink often steers the system toward nursery or confectionery cues instead of the more grounded mood the source color supports.
Light Gray sits too close to onyx in value, so the palette can wash out before it ever establishes a clear hierarchy.
How should I use onyx in design?
- •Onyx works well as a dark background with light text, or as a bold accent for headlines and callout bars in presentations and branded materials.
- •As a neutral, onyx pairs with virtually any accent color — add one warm and one cool accent to build visual interest around it.
- •Onyx serves as a refined foundation for corporate decks, editorial layouts, and data-heavy interfaces that need quiet authority.
What are good onyx palettes?
Onyx foundation
Financial services branding and client-facing digital experiences.
Quiet contrast
Workshop handouts, training guides, and presentation templates.
Design with onyx in Moda
Create a presentation or document using onyx as your accent color. Moda's AI applies your color palette automatically.
Create a design with onyx →What are the shades and tints of onyx?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Similar colors
Charcoal
Charcoal introduces a tint where onyx stays achromatic, which is useful when the neutral layer needs more personality without becoming a full accent.
Slate Gray
Slate Gray stays neutral like onyx, yet the lighter-or-darker move changes how much hierarchy the palette gets before any accent color enters.
Midnight Blue
Midnight Blue does what onyx cannot: it nudges the palette toward a cool mood while still behaving like a supporting color.
Cerulean
Cerulean introduces a tint where onyx stays achromatic, which is useful when the neutral layer needs more personality without becoming a full accent.
Steel Blue
Steel Blue introduces a tint where onyx stays achromatic, which is useful when the neutral layer needs more personality without becoming a full accent.
Frequently asked questions
What is the hex code for onyx?
The hex code for onyx is #353839. In RGB, that's 53 red, 56 green, and 57 blue. The approximate CMYK equivalent is 7% cyan, 2% magenta, 0% yellow, and 78% key (black).
Is onyx a warm or cool color?
Onyx sits close to neutral, which means it can support either warm or cool accents without forcing the palette hard in one direction.
Is onyx strong enough for dark panels and covers?
Onyx is dark enough to anchor sections, hero blocks, and darker editorial surfaces. It is usually more convincing in that role than in tiny accent-only applications.
Where does onyx work best in a layout?
Onyx has enough depth to anchor a layout while still reading as a color, which makes it useful for dark section blocks, headlines, and heavier accents.
Is onyx accessible?
Onyx is strong enough for white text at 11.82:1 contrast, so it can handle dark panels, tags, and section headers without much trouble. As text on white, though, it is usually better reserved for larger headings or short accents than for long paragraphs.
More neutral colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Neutral colors
Compare onyx with other neutral tones.
Blue colors
Explore nearby color families to build stronger palettes and contrasts.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
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.