Color Matcher

Material Design (19 base colors), Tailwind CSS (20 color families at 500 level), and classic web colors (named colors like Coral, Crimson, Gold). Filter by category using the chips.

Click any color swatch to copy its hex code to your clipboard. The swatch border briefly turns green to confirm the copy. Paste it directly into your CSS or design tool.

Pantone is a standardized color matching system used in print and manufacturing — each color is a physical ink formula. HEX is a digital screen color using RGB. Pantone colors can't be perfectly reproduced on screen because of the difference between ink (subtractive, CMYK) and light (additive, RGB).

Check contrast ratios using WCAG guidelines. Body text needs 4.5:1 minimum contrast. Large text (18px+ bold or 24px+) needs 3:1. Use online contrast checkers with your specific foreground and background hex codes. Avoid placing colors from the same palette row next to each other.

Yes, search by color name (e.g., "Teal"), hex code (e.g., "#E84D4D"), or category name. The results filter instantly as you type and combine with the category filter.