Using Warm Gray in design
HEX
#9E9E8E
RGB
158, 158, 142
HSL
60°, 8%, 59%
HSV
60°, 10%, 62%
You can feel the sun in warm gray — concrete warmed by afternoon light, linen with a little hay in the fiber. #9E9E8E has a yellow-green undertone that keeps spaces from feeling icy even at medium values. It bridges "true gray" and "greige" without fully committing to beige.
Best for
Event branding, newsletters, and customer-facing web pages.
Accessibility
Check contrast before using warm gray for text-heavy layouts, especially on low-contrast backgrounds.
How does warm gray compare to nearby colors?
What is the difference between warm gray and khaki?
Warm Gray (#9E9E8E) feels more softened on screen, while Khaki (#C3B091) pushes the family in the opposite direction. Warm Gray is easier to live with across large areas, because it carries less chroma pressure than Khaki. Choose warm gray when the surrounding system aligns better with system design and layout structure, and move to khaki when the stronger contextual fit is handmade goods and material-focused editorial work.
What color is warm gray?
Warm gray is a staple in interior paint lines and fashion neutrals, often used for textiles where a cooler gray would clash with wood tones.
What is the hex code for warm gray?
| Format | Value |
|---|---|
| HEX | #9E9E8E |
| RGB | rgb(158, 158, 142) |
| HSL | hsl(60°, 8%, 59%) |
| HSV / HSB | hsv(60°, 10%, 62%) |
| CMYK (approx.) | cmyk(0%, 0%, 10%, 38%) |
Convert Warm Gray to other color formats
Open the color converter with Warm Gray (#9E9E8E) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Warm Gray in the color converter →What does warm gray mean in design?
Warm gray is often associated with comfort, tactility, and understated warmth. It reads earthier than slate or cool gray, and less misty than smoke.
How do I use warm gray in code?
| CSS (hex) | color: #9E9E8E; |
| CSS (rgb) | color: rgb(158, 158, 142); |
| CSS (hsl) | color: hsl(60, 8%, 59%); |
| RGB % | rgb(62%, 62%, 56%) |
| Tailwind | text-[#9E9E8E] |
| SwiftUI | Color(red: 0.620, green: 0.620, blue: 0.557) |
| UIKit | UIColor(red: 0.620, green: 0.620, blue: 0.557, alpha: 1.0) |
| Android | Color.rgb(158, 158, 142) |
| Compose | Color(0xFF9E9E8E) |
| Web Safe | #999999 |
Is warm gray accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 2.71:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 7.74:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 2.71:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 7.74: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 warm gray look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with warm gray
Pairing warm gray with charcoal adds useful depth while keeping the palette flexible for interfaces, decks, and editorial layouts.
Pairing warm gray with navy blue adds structure without flattening the source color into something generic.
Emerald gives warm gray a second note that is different enough to feel intentional but not so different that the palette loses coherence.
What colors clash with warm gray
With a quiet color like warm gray, magenta rarely reads as a helpful accent; it overwhelms the base mood and makes the system feel less composed.
Light Gray sits too close to warm gray in value, so the palette can wash out before it ever establishes a clear hierarchy.
How should I use warm gray in design?
- •Warm Gray works as either a primary or supporting color — it has enough presence to carry a layout but is restrained enough to share the stage with bolder accents.
- •As a neutral, warm gray pairs with virtually any accent color — add one warm and one cool accent to build visual interest around it.
- •Use warm gray where you need structure without personality: table borders, input fields, disabled states, and background scaffolding.
What are good warm gray palettes?
Sunlit warmth
Startup branding, pitch materials, and product landing pages.
Design with warm gray in Moda
Create a presentation or document using warm gray as your accent color. Moda's AI applies your color palette automatically.
Create a design with warm gray →What are the shades and tints of warm gray?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for warm gray?
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.
Similar colors
Khaki
Khaki does what warm gray cannot: it nudges the palette toward a warm mood while still behaving like a supporting color.
Brass
Brass introduces a tint where warm gray stays achromatic, which is useful when the neutral layer needs more personality without becoming a full accent.
Pewter
Pewter lives in almost the same neutral band as warm gray, but its smoky gray lean can make woods, metals, and off-whites read differently around it.
Tan
Tan introduces a tint where warm gray stays achromatic, which is useful when the neutral layer needs more personality without becoming a full accent.
Dark Gray
Dark Gray lives in almost the same neutral band as warm gray, but its smoky gray lean can make woods, metals, and off-whites read differently around it.
Frequently asked questions
What is the hex code for warm gray?
The hex code for warm gray is #9E9E8E. In RGB, that's 158 red, 158 green, and 142 blue. The approximate CMYK equivalent is 0% cyan, 0% magenta, 10% yellow, and 38% key (black).
Is warm gray a warm or cool color?
Warm Gray functions as a neutral in most palettes, but its subtle yellow-range undertone gives it a warmer cast than a pure gray. It pairs especially well with other warm tones like cream and gold, though it can support cool accents too.
Can warm gray carry a full palette without feeling too loud?
Warm Gray is restrained enough to carry larger areas without becoming exhausting. That makes it useful for document systems, presentation themes, and site sections where louder colors would wear out their welcome.
Where does warm gray work best in a layout?
Warm Gray is muted and versatile. It can carry a full presentation theme, document system, or website section without overwhelming the layout, and it pairs flexibly with both warm and cool accents.
Is warm gray accessible?
Warm Gray works better with dark text than white text. Black text reaches 7.74:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More neutral colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Neutral colors
Compare warm gray 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.