Color Palette Reference — Copy Standard Web & Material Design Colors

A reference collection of go-to design palettes — standard web colors, the Material Design color system, and a grayscale ramp — each with a HEX code and a one-click copy button.

Standard Web Colors

Black
#000000
White
#FFFFFF
Red
#FF0000
Green
#008000
Blue
#0000FF
Yellow
#FFFF00
Cyan
#00FFFF
Magenta
#FF00FF
Gray
#808080
Silver
#C0C0C0
Maroon
#800000
Navy
#000080
Olive
#808000
Teal
#008080
Purple
#800080
Lime
#00FF00

Material Design Palette

Material Red 500
#F44336
Material Pink 500
#E91E63
Material Purple 500
#9C27B0
Material Deep Purple 500
#673AB7
Material Indigo 500
#3F51B5
Material Blue 500
#2196F3
Material Cyan 500
#00BCD4
Material Teal 500
#009688
Material Green 500
#4CAF50
Material Lime 500
#CDDC39
Material Yellow 500
#FFEB3B
Material Amber 500
#FFC107
Material Orange 500
#FF9800
Material Deep Orange 500
#FF5722
Material Brown 500
#795548

Grayscale (Neutral Colors)

White
#FFFFFF
90% Gray
#E6E6E6
80% Gray
#CCCCCC
70% Gray
#B3B3B3
60% Gray
#999999
40% Gray
#666666
30% Gray
#4D4D4D
20% Gray
#333333
10% Gray
#1A1A1A
Black
#000000

Tips

  • Click the "Copy" button under any swatch to instantly copy its HEX code (e.g. #F44336) to your clipboard.
  • Paste the copied code directly into CSS or design tools like Figma and Adobe XD — no reformatting needed.
  • Material Design colors are named as "color + tone number" (e.g. Red 500) — a higher number means a darker shade.
  • The grayscale ramp is handy when you need a consistent set of tones for text, backgrounds, and borders across a UI.
  • If you are stuck picking colors, starting from the 16 standard web colors tends to produce a legible, high-contrast palette.

Frequently Asked Questions

It's the systematic color palette defined by Google's "Material Design" system, first published in 2014. Each hue has tone numbers from 50 to 900, where a higher number means a darker shade. It is widely used across Android and web app design.

They're just two notations for the same color. A HEX code (e.g. #F44336) writes R, G, and B as two hexadecimal digits each, while an RGB value (e.g. rgb(244, 67, 54)) writes them in decimal. Either can be converted to the other and both describe the exact same color.

Standard web colors (black, red, blue, etc.) are the basic named colors that have existed since the early days of CSS, while the Material Design color system is a more recent, systematically designed palette guideline from Google. This page lists both so you can pick whichever fits your use case.

Yes — you can drop it straight into a CSS property value like color: #F44336;. The same notation also works as-is in most design tools and programming languages.
ツールくん

Side Note — Why designers avoid picking colors "by feel"

When Google unveiled "Material Design" in 2014, it wasn't just a visual style guide — it was a full design system meant to unify color, typography, motion, and layout under one consistent set of rules. Its color palette in particular was designed with unusual rigor: every hue (Red, Blue, Green, and so on) comes with tone numbers from 50 through 900, letting designers build a cohesive color scheme across an entire app without relying on gut feeling alone.

Picking colors ad hoc, one at a time, tends to scatter subtly-different-but-similar shades throughout an app, producing a design that feels inconsistent. Choosing from a pre-built, systematic palette instead keeps the color scheme coherent, and it also lets you express a button's different states (default, hover, pressed) naturally, simply by moving up or down the tone scale within the same hue.

The way CSS lets you specify color has been extended many times over the years. CSS1, which arrived in 1996, supported only 16 basic named colors and HEX codes. Today you can also specify color in perceptually-oriented spaces like HSL, HWB, and LAB. Even so, the HEX code remains by far the most widely used notation in practice — it is still the common language shared by designers and engineers alike.

More tools in this category