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
Material Design Palette
Grayscale (Neutral Colors)
What a colour palette is
This page is a collection of the standard colour palettes used in design, listed with their HEX codes. It gathers three kinds: the 16 web standard colours in use since the early days of CSS, the representative colours of the Material Design colour system that Google codified, and a greyscale ramp dividing white to black into ten steps. Click once on the code of a colour you like, such as #2196F3, to copy it and paste it straight into CSS or a design tool.
Picking colours one at a time on instinct tends to leave you with a jumble of similar tones and a design that never quite holds together. Every colour on this page belongs to a system that was designed as a whole, so simply choosing along Material Design's lightness numbers (50 to 900) or the greyscale steps (90% grey, 80% grey and so on) makes it easier to assemble a consistent scheme aligned in hue and lightness. The theory of combining colours — complementary, analogous and the rest — is explained in the glossary section.
How to use the colour palette
- Choose the group that suits your purpose The three groups — web standard colours, Material Design and greyscale — are stacked vertically. Scroll to the group closest to your use.
- Judge the colour from the swatch Each swatch appears alongside the colour name and HEX code, so you can narrow down candidates while seeing how they actually look on screen.
- Press the copy button Click the copy button beneath a colour you like and the HEX code goes to your clipboard automatically.
-
Paste into CSS or a design tool
Paste the copied HEX code straight into a CSS
colorproperty or the colour picker of Figma, Adobe XD and the like.
Tips for getting more out of it
- 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.
When the colour palette helps
Choosing the groundwork for a web scheme
When settling the base colour of a whole site, picking shades of one hue from a Material Design lightness ramp makes the colour separation of header, body and buttons fall into place naturally.
State colours for UI components
Prepare the normal, hover and pressed colours of a button as different lightnesses of the same hue — Blue 500 to Blue 700, say — and you can express the change of state while keeping the sense of unity.
Designing contrast between text and background
When choosing background and text colours from the greyscale ramp, combining steps that lie far apart gives better legibility. For a strict verdict, using a separate contrast checker is worthwhile.
Unifying the colours of slides and charts
Instead of picking the colours of slides and graphs by feel every time, carrying over the colour names and HEX codes from this page as an in-house colour guide stops the colours wandering between documents.
Colour scheme terms explained
- HEX code
- A notation expressing a colour as six hexadecimal digits in the form #RRGGBB. Red, green and blue are each given two digits, and it is the most widely used notation in CSS and design tools.
- Material Design
- The design system Google published in 2014. It codifies colour palettes with lightness numbers from 50 to 900 for each hue, the larger the number the darker the tone.
- Complementary colours
- A combination of colours lying at opposite positions on the colour wheel. Because they emphasise one another, it is used as a way of choosing an accent colour when you want strong contrast.
- Analogous colours
- A combination of colours adjacent on the colour wheel. Since the difference in hue is small, the scheme tends to come out cohesive and calm, and it is often used in choosing the base colour of a website.
- Triadic scheme
- A technique combining three colours at positions that divide the colour wheel into thirds. It is gentler than complementary colours and easier to balance with more variation than analogous ones.
- Greyscale
- A set of steps with no hue, made up only of light and dark from white to black. It is used as the foundation for adjusting the lightness difference between background and text and securing legibility.
- HSL
- A way of expressing a colour through three elements: hue, saturation and lightness. Compared with HEX it lends itself to intuitive adjustment, such as changing only the brightness while keeping the same hue.
Frequently Asked Questions
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.