Overview

The color palette tool automatically generates Material Design-like color shade palettes from input HEX color codes. It supports two modes: a comparison mode and a shade generation mode.

How to Use

1. Select Compare or Shades mode.
2. Enter one or more HEX color codes (e.g., #3490DC).
3. Click the "Generate" button.
4. Click on a color code to copy it.

Specifications & Glossary

• Compare mode: Displays multiple colors side by side for comparison. Shows shades (50–900) horizontally for each color, allowing you to see the tone differences between colors.
• Shades mode: Displays a detailed shade palette for a single color. Lets you view all shades of the selected color at a glance.
• Shade steps: 10 levels — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 — based on Material Design conventions. Lower numbers are lighter; higher numbers are darker.
• Shade generation algorithm: The input color is treated as the 500 step. Lighter colors (50–400) are generated by linear interpolation with white; darker colors (600–900) by linear interpolation with black. For example, step 50 mixes 90% white, and step 900 mixes 60% black.
• WCAG contrast ratio: The text color (black or white) for each shade is automatically selected based on the relative luminance formula L = 0.2126R + 0.7152G + 0.0722B, following WCAG accessibility guidelines.
• HEX color codes: Both 3-digit (#RGB) and 6-digit (#RRGGBB) formats are supported, with or without the # prefix.

Use Cases

• Designing color systems for Material Design or Tailwind CSS.
• Automatically generating shade palettes from brand colors.
• Selecting and verifying colors for accessibility (WCAG) compliance.