Gray Color Generator
Generate gray color palettes from pure neutrals to warm and cool grays. Customize temperature, lightness, and shade count for design systems, UI backgrounds, and typography.
Quick Presets
Start with a curated gray palette
Customization
Adjust temperature and shade count
Generated Gray Palette
9 shades • Neutral temperature
Contrast Ratios
WCAG compliance for text on white and black backgrounds
| Shade | HEX | vs White | vs Black | Best For |
|---|
Export Options
Download your gray palette in various formats
Recommended Settings
Gray Color Best Practices
- •Use pure grays (0° temperature) for maximum versatility across color schemes
- •Warm grays (slight red/yellow tint) feel inviting and reduce eye strain
- •Cool grays (slight blue tint) appear modern and professional
- •Generate 9-11 shades for comprehensive coverage in design systems
- •Test gray text against white/dark backgrounds for WCAG compliance
Design System Application
- •Lightest grays (100-200) work well for subtle backgrounds and dividers
- •Mid-range grays (300-500) are perfect for disabled states and placeholders
- •Darker grays (600-800) provide good contrast for body text
- •Darkest gray (900) serves as near-black for maximum readability
- •Maintain consistent temperature across entire palette for cohesion
Pro Tips
- •Export as CSS variables for easy theme switching between warm/cool grays
- •Odd numbers of shades (5, 7, 9, 11) provide better visual balance
- •Neutral temperature (0°) creates pure grays that work with any brand color
- •Test gray-on-gray combinations to ensure sufficient contrast for UI elements
Most Popular
9 shades with neutral temperature creates a versatile gray scale for any design system
When to Use This Tool
Create a comprehensive gray palette as the foundation for your design system. Grays are used more than any other color in interfaces - backgrounds, borders, text, shadows, and disabled states all require a full gray scale.
Recommended: 9 shades with neutral temperature (0°)
Generate subtle gray variations for layered UI designs. Use lightest grays for page backgrounds, slightly darker for cards, and progressively darker for nested components to create visual depth.
Recommended: 7-11 shades with temperature matching your brand
Build accessible text color scales from body text (dark gray) to captions and placeholders (mid gray). Test each shade against your background colors to ensure WCAG AA or AAA compliance.
Recommended: Check contrast ratios - grays 600-900 for text on white
Experiment with temperature to find the perfect gray for your brand. Warm grays complement warm color schemes (reds, oranges), while cool grays pair better with blues and purples.
Recommended: Try +15° for warm brands, -15° for cool brands
How It Works
Choose temperature slider from -30° (cool blue-gray) to +30° (warm brown-gray), or 0° for pure neutral gray
Select number of shades (5-11) based on design system complexity - 9 is industry standard (Tailwind, Material Design)
Tool generates shades by varying lightness from 95% (lightest) to 10% (darkest) in HSL color space
For warm grays, adds subtle orange-brown hue (30°) with 5% saturation for inviting feel
For cool grays, adds blue hue (210°) with 5% saturation for modern, professional appearance
Each shade includes HEX, RGB, HSL values and auto-generated CSS variable names (--gray-100, --gray-200, etc.)
Contrast checker calculates WCAG compliance ratios against white and black backgrounds for accessibility
Export entire palette as CSS variables, SCSS, Tailwind config, or JSON for easy integration into your project
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What's the difference between warm, cool, and neutral grays?
Neutral grays have 0% saturation - pure grayscale from black to white with no color tint. Warm grays add a subtle red/orange hue (around 30°) with very low saturation (5%), making them feel inviting and reducing eye strain. Cool grays add blue hues (around 210°) with the same low saturation for a modern, professional appearance. The saturation is kept very low so the tint is subtle but perceptible when compared side-by-side.
How many gray shades do I need for my design system?
9 shades is the industry standard used by Tailwind CSS, Material Design, and Ant Design. This provides excellent coverage: 100-300 for backgrounds and dividers, 400-500 for disabled states and placeholders, 600-700 for secondary text, and 800-900 for primary text and near-black elements. Simpler systems can use 5-7 shades, while complex applications with many UI states benefit from 11 shades.
Should I use warm or cool grays for my brand?
It depends on your brand colors and design goals. Warm grays complement warm color palettes (reds, oranges, yellows) and create friendly, approachable designs. Cool grays pair with blues and purples for professional, modern interfaces. Neutral grays (0° temperature) are most versatile and work with any color scheme. Test both against your brand colors to see which feels more cohesive.
How do I ensure my gray text is accessible?
Use the built-in contrast checker to test each gray against your background. For normal text (16px), you need a contrast ratio of 4.5:1 for WCAG AA compliance or 7:1 for AAA. Generally, grays 600 and darker work for text on white backgrounds, while grays 100-400 work for backgrounds with dark text. Always test before finalizing, especially for critical content.
Can I use these grays with my brand colors?
Yes! Grays are meant to be neutral complements to brand colors. Neutral grays (0°) work universally with any brand palette. Warm grays enhance warm brand colors by creating visual harmony, and cool grays enhance cool brand colors. Just avoid mixing warm and cool grays in the same design system - pick one temperature and stay consistent throughout your interface.
What's the difference between this and the Color Tint Generator?
The Color Tint Generator mixes any color with white, black, or gray to create tints, shades, and tones. The Gray Color Generator specifically creates optimized gray scales with precise temperature control for design system foundations. Use this tool for creating your base gray palette. Use Color Tint Generator when you need to create lighter/darker variations of your brand colors.
Related Tools
Accessibility Color Checker
Check color accessibility compliance
Blue Color Generator
Generate blue color palettes
Color Converter
Convert between color formats
Color Tint Generator
Generate color tints
Contrast Checker
Check color contrast
Gradient Color Generator
Generate color gradients