Gray symbolizes balance, neutrality and sophistication. Sitting between white and black, it is one of the most versatile colors in design.
Gray is a neutral sitting between white and black. It symbolizes balance, neutrality and sophistication, and is key for structure, typography and surfaces in UI.
In web design, branding and digital interfaces it is used to add elegance, improve readability and create clean compositions that let the main content stand out without distracting the user.
Gray is often associated with concepts such as:
Its meaning can vary by context, although it usually conveys calm, objectivity and sophistication.
In color psychology, gray conveys calm, stability and rationality. Because it is not a dominant color, it helps reduce visual noise and supports focus, which is why it is one of the most used colors in digital interfaces and technology products.
The emotions it usually conveys are:
When overused it can feel cold, so it is often combined with more vivid colors to add dynamism.
Gray is present in almost every design-related discipline. It is commonly found in:
Its neutrality makes it an excellent supporting color for almost any project.
Among the best-known HTML and CSS colors related to gray are:
| Name | Sample | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Gainsboro | |||||
| LightGray | |||||
| Silver | |||||
| DarkGray | |||||
| Gray | |||||
| DimGray | |||||
| SlateGray | |||||
| LightSlateGray | |||||
| DarkSlateGray |
From the lightest grays to anthracite tones, each variant brings a different personality to the interface.
HTML colorsNot all grays feel the same. Their chromatic temperature completely changes the mood of an interface and is one of the key ideas people look for when working with neutral palettes.
They have a slight brown, red or yellow tint and create more welcoming environments. They fit well in artisan branding, physical-goods ecommerce and interfaces with a human tone.
They contain blue or green undertones and feel more technological and minimalist. They are common in software, dashboards and digital products.
They are widely used in design systems such as Material Design, Tailwind CSS or Bootstrap. Scales like gray, slate, zinc or cool gray help build consistent typography, borders and surfaces.
Many designers search for terms like gray color palette, neutral gray, slate gray or cool gray. Understanding these differences helps you choose the right scale and use gray more effectively in UI.
Gray pairs with practically any color thanks to its neutrality. Some widely used combinations are:
#FFFFFF#111111#2563EB#16A34A#FFA500#FFD700#EF4444#7C3AED#EC4899#DAA520These combinations help create elegant, modern and easy-to-read interfaces.
Gray has no complementary color, since it belongs to the group of achromatic colors along with white and black. Its main advantage is that it can balance almost any chromatic combination without disrupting the harmony of the design.
Gray works as a neutral within any chromatic harmony. The harmonies on this page use the same logic as Matizly’s Color Wheel and Palette Generator.
It softens transitions between nearby colors and reduces visual saturation.
Variations are generated with the same Matizly studio functions. For grays, the most useful ones are lightness scales and warm or cool undertones:
Light grays
These scales help build secondary typography, borders, disabled states and surfaces consistently.
Palettes with gray convey elegance, professionalism and minimalism. Some popular combinations are:
3 colors
3 colors
3 colors
3 colors
3 colors
3 colors
These combinations are common in web design, mobile apps and corporate branding.
Color palettesGray plays a very important role in interface accessibility.
Light grays can be hard to read on white backgrounds, while dark grays usually offer excellent contrast without the visual hardness of pure black.
Always checking the contrast ratio against WCAG guidelines helps create more accessible experiences.
Dark gray text / white background
10.31:1AA ✓
White text / dark gray background
10.31:1AA ✓
Medium gray text / white background
4.83:1AA ✓
White text / slate background
7.58:1AA ✓
Gray makes it possible to create elegant, discreet gradients. Some common combinations are:
#6B7280 → #FFFFFF#6B7280 → #111111#6B7280 → #2563EB#6B7280 → #C0C0C0#6B7280 → #16A34A#6B7280 → #7C3AEDThese gradients frequently appear in dashboards, mobile apps, technology products and minimalist interfaces.
Gradient generatorGray is one of the most important colors in interface design. Its ability to organize information visually makes it essential in almost any modern design system.
Gray symbolizes balance, neutrality, professionalism and stability. It is a color that conveys calm and sophistication.
Gray pairs very well with white, black, blue, green, orange, yellow, red, purple and gold.
Gray has no complementary color because it belongs to the achromatic colors along with white and black.
It is widely used in web design, user interfaces, mobile apps, corporate branding, technology, architecture and industrial design.
Warm grays have a slight brown, red or yellow tint and feel more welcoming. Cool grays contain blue or green undertones and feel more technological and minimalist. Neutral grays are the foundation of many design systems.
Pick any color and copy Hex, RGB, HSL or OKLCH with shades, tints and harmonies.
Try it nowBrowse ready-made palettes and save your favorites on this device.
Try it nowExplore harmonies on an interactive wheel and build balanced palettes from one base color.
Try it now