Explore the base color
Review HEX, RGB, HSL, and HSV for gray, then browse shades, tints, tones, and hues.
Color tools
Gray color codes
Gray color codes for #808080 — HEX, RGB, HSL, HSV, shades, named grays, and copy-ready CSS.
Loading tool…
Loading Preparing tool…
How to use
Follow these steps for a clear answer.
Pick a variation or named shade
Click a generated strip or a CSS named gray shade to load codes and harmonies.
Copy for CSS
Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.
Color formulas
Core relationships used by this color tool.
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.
Example colors
Common picks with formula and result.
ϟ
color: gray;Base gray
CSS keyword
#808080 · rgb(128, 128, 128)
ϟ
greyRelated shade
Family neighbor
#808080
ϟ
background-color: #808080;UI accent
Background use
Pair with readable text
ϟ
H + 180°Complement direction
Harmony hint
Toward warm accent (coral) or cool accent (blue)
Gray color family specification
Version 1.0.0
- Definition
- Gray in CSS centers on the keyword gray (#808080 / rgb(128, 128, 128) / hsl(0°, 0%, 50%)). Designers use gray families for neutral, balanced, and professional on screens.
- What it calculates
- Gray family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
- Inputs
- Selected variation chip, named shade, or harmony swatch
- Section mode (variations, named shades, harmonies)
- Outputs
- HEX, RGB, HSL, HSV
- Optional CSS keyword
- Contrast ratios on white and black
- Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circleGray (alias grey) structures interfaces. Ladder from lightgray to dimgray for elevation and hierarchy.
For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.
:root { --gray: #808080; --gray-soft: #d3d3d3; --gray-ink: #555555; } .banner { background-color: var(--gray); color: #ffffff; }- Popular CSS grays
Name HEX RGB Feel gray #808080 128, 128, 128 Base keyword grey #808080 128, 128, 128 Named shade darkgray #A9A9A9 169, 169, 169 Dark shade lightgray #D3D3D3 211, 211, 211 Light tint dimgray #696969 105, 105, 105 Dark shade silver #C0C0C0 192, 192, 192 Named shade slategray #708090 112, 128, 144 Named shade gainsboro #DCDCDC 220, 220, 220 Named shade black #000000 0, 0, 0 Named shade white #FFFFFF 255, 255, 255 Named shade darkgrey #A9A9A9 169, 169, 169 Dark shade darkslategray #2F4F4F 47, 79, 79 Dark shade i Related hues may appear in Named shades when useful for gray-adjacent palettes.- Assumptions
- Base keyword gray = #808080 in sRGB.
- Named list uses CSS Color Module keywords in/near the gray family.
- Tool runs locally; nothing is uploaded.
- Units
- HEX: #RRGGBB
- RGB: 0–255
- HSL/HSV: hue degrees; S/L/V percent
- Boundary conditions
- Lightness/saturation steps stay within visible ranges (~0–100%).
- Hue offsets wrap modulo 360°.
- Example
- gray → #808080; complementary toward warm accent (coral) or cool accent (blue)
- Validation cases
- gray → #808080
- silver → #C0C0C0
- shade of gray → same hue, lower lightness
- tint of gray → same hue, higher lightness
- Sources
- CSS Color Module named colors (gray family)
- Classical shade/tint/tone and hue-harmony geometry
- WCAG relative-luminance contrast
- Calculation version
- 1.0.0
Related tools
Frequently asked questions
Key distinctions behind the tool.
What is the hex code for gray?
The CSS named color gray is #808080, equal to rgb(128, 128, 128) and hsl(0°, 0%, 50%).
What is the difference between gray and silver?
Gray/grey is mid #808080. Silver is lighter and often used for borders and disabled states.
What colors go with gray?
Any brand hue. Gray is the backbone of UI chrome, borders, and secondary text. Always check text contrast.
Is gray good for body text?
Mid gray (#808080) on white is often below AA for small text—use darker grays (#555–#333) for body copy.
How do I use gray in CSS?
Use color: gray;, color: #808080;, or color: rgb(128, 128, 128); on any property that accepts a <color> value, including background-color and border-color.