Gray in Design

Gray is the workhorse of web design. It handles borders, secondary text, backgrounds, and disabled states. Choosing the right gray family (Slate, Zinc, Neutral, Stone) defines your entire design tone.

Cultural Associations

UI design

Secondary content, borders, dividers, disabled states

Corporate

Professionalism, neutrality, balance, objectivity

Technology

Sophistication, modern minimalism, industrial precision

Psychology

Calm detachment, impartiality, formal composure

Your gray choice matters more than your brand color. Slate is cool and techy. Zinc is balanced. Stone is warm. Pick wrong and your entire design feels off.

In Web Design

  1. Body text color (Gray 700 for light mode, Gray 300 for dark mode)
  2. Border and divider colors for subtle visual separation
  3. Background tints for alternating sections and table rows
  4. Disabled button and input states to indicate unavailability

Recommended Tailwind Colors

Gray 500

gray-500

Slate 600

slate-600

Zinc 500

zinc-500

Neutral 500

neutral-500

Stone 500

stone-500

Case Studies

GitHub

Cool slate grays create a focused, developer-centric reading environment

Linear

Zinc gray palette creates a sleek, high-performance project management aesthetic

Notion

Warm stone-leaning grays make a productivity tool feel approachable and comfortable

Frequently Asked Questions

Which Tailwind gray family should I use?▼
Slate (blue-tinted) for tech and developer tools. Gray (slightly cool) for general purpose. Zinc (neutral) for minimal designs. Neutral (pure) for maximum flexibility. Stone (warm) for friendly, approachable brands.
What gray shade should I use for body text?▼
Gray 700 (#374151) or Slate 700 (#334155) on white backgrounds. Gray 300 (#d1d5db) or Slate 300 (#cbd5e1) on dark backgrounds. These provide comfortable reading contrast without being as harsh as pure black.

Related Articles

Blue in Web Design

Blue is the most used color on the web. It signals trust, professionalism, and stability. Used by 33% of top brands.

Red in Web Design

Red is the color of urgency, passion, and action. It increases heart rate, creates FOMO, and drives the highest click-through rates on CTA buttons.

Yellow in Web Design

Yellow is the color of optimism, attention, and caution. It is the most visible color in daylight and the hardest to read on screen when used poorly.

Green in Web Design

Green is the color of growth, success, and go-ahead signals. It is the easiest color for the human eye to process and the best choice for positive feedback states.

Orange in Web Design

Orange is the color of enthusiasm, creativity, and affordable value. It combines red's energy with yellow's friendliness, making it the top performer for e-commerce CTAs.

Purple in Web Design

Purple is the color of luxury, creativity, and premium quality. Historically the most expensive dye, it still communicates exclusivity and imagination in digital design.

Explore More Color Psychology

Discover how colors influence design decisions and user behavior with our Tailwind CSS color tools.

Browse Color Tools