Softonic

Material Design Color Picker

Step 1 / 3 Choose a color family

Fixed 2014 Material Design palette (Material Design 2). Material 3 uses generated tonal palettes instead.

Choose a color family

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

The Material Design palette defines 19 color families, Red, Pink, Purple through Grey and Blue Grey, each with a ramp from shade 50 (pale) through 900 (near black), plus optional accent shades A100–A700. This picker lays out every swatch in a grid and lets you copy any value as HEX, RGB, HSL or Material token name for use in Tailwind, CSS variables, iOS UIColor, or Android color resources.

How to use the palette

  1. 1

    Scan the grid

    Families run down the left; shades run across the top from 50 to 900.

  2. 2

    Tap a swatch

    See HEX, RGB, HSL, and the canonical Material token name (e.g. Indigo 500).

  3. 3

    Copy the format you need

    One click copies the exact string: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Check contrast

    The panel shows the WCAG contrast ratio against white and black to pick accessible text colors.

The shade ladder

Shade Use
50 Hover backgrounds, pale surfaces
100 Chip backgrounds, low-emphasis fills
200 Disabled states, secondary surfaces
300 Borders, separators
400 Secondary text on light backgrounds
500 Default / primary color, the baseline
600 Interactive states (hover, pressed)
700 Headers, strong emphasis
800 Dark text on light backgrounds
900 Highest-contrast element (near black)
A100 Light accent
A200 Lighter-than-default accent
A400 Accent (often the “bright” brand highlight)
A700 Deep accent

Families in the Material palette

Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey.

Brown, Grey and Blue Grey don’t have accent shades, they’re the neutral families.

Picking a primary

The spec suggests 500 as the primary color, 700 for the darker variant (used in the status bar on Android), and an A200 or A400 accent for secondary actions. This is a convention, not a rule, modern Material 3 (dynamic color) derives palettes from a single seed color rather than picking from fixed ramps.

Accessibility checkpoint

  • Body text: contrast ratio ≥ 4.5:1 against its background (WCAG AA).
  • Large text (18 pt+ bold or 24 pt+ regular): ≥ 3:1.
  • UI components and graphical objects: ≥ 3:1.

The palette is not contrast-safe by default. Yellow 500 on white fails WCAG badly. Always check the ratio before shipping a combination, the picker shows it inline.

Formats supported

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (modern syntax) or rgb(63, 81, 181) (legacy).
  • HSL: hsl(231 48% 48%).
  • Material token: Indigo 500, handy for design docs and Figma.
  • Tailwind: indigo-500, drop straight into a class attribute if your Tailwind theme uses the Material scale.
  • Android color XML: <color name="indigo_500">#FF3F51B5</color>, ARGB format.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Frequently Asked Questions

This tool reproduces Google’s fixed 2014 Material Design palette, later documented on the Material Design 2 site. It does not generate Material 3 tonal palettes from a seed color. Use it when you need the classic numbered and accent swatches.

Brown, Grey and Blue Grey are neutrals and don’t participate in accent color pairings. The spec simply omits A100–A700 for them.

Tailwind’s default palette is inspired by Material but not identical. If you want exact Material colors, extend theme.extend.colors with the Material values and reference them as material-indigo-500 in your class names.

Convention says yes, but nothing stops you from using 700 or an accent as primary. The 500 convention is about having a reliable baseline shade with 8 steps either direction for variation.

Related Tools

Image Resizer

Resize images to pixel-exact dimensions or percentages while preserving aspect ratio. Batch-friendly, no upload.

QR Code Generator

Generate a browser-local QR code from a plain text or URL payload. Adjust size, colours and error correction, then download PNG.

Meme Generator

Add fixed top and bottom captions to a JPG, PNG, or WebP image in your browser. Set font, size, colors, and stroke, then download a PNG.

Barcode Generator

Create a 1D barcode in your browser in Code 128, EAN, UPC, ITF-14 and other supported formats. Download the rendered result as SVG or PNG.

Image Compressor

Compress JPG, PNG and WebP images to reduce file size while preserving visual quality. Entirely in your browser, no upload.

GIF Maker

Turn a sequence of images or a short video into an animated GIF. Set frame rate, loop count and dimensions before exporting.