Color Tools for Designers — Free Palette, Gradient, Contrast, Converter

Color Tools on Metoolzy

Metoolzy offers a suite of 5 color design tools running entirely in the browser — perfect for designers, frontend developers, and content creators.

1. Color Palette Generator

Color Palette generates harmonious color palettes with just 1 click. Randomize for inspiration, and copy HEX/RGB codes.

When to use: Selecting a color scheme for websites, apps, social media posts, or presentations.

2. Gradient Generator

Gradient Generator creates visual CSS gradients. Drag color stops, pick a direction, and copy the ready-to-use CSS code.

When to use: Background gradients for hero sections, button hovers, or card overlays.

3. Contrast Checker (WCAG)

Contrast Checker tests the contrast ratio between text and background according to WCAG 2.1 standards. Shows AA/AAA compliance results.

When to use: Ensuring a website is accessible for users with poor vision.

4. Color Converter

Color Converter converts between HEX, RGB, HSL, and CMYK. Enter any format → see all other formats + a live color preview.

When to use: When a design tool uses HEX but the code requires RGB, or printing requires CMYK.

5. CSS Unit Converter

CSS Unit Converter converts px ↔ rem ↔ em ↔ % ↔ pt ↔ vw. Customize the base font size and viewport width.

When to use: Responsive design, converting from px to rem for typography.

Suggested Workflow

1. Use Color Palette to find a color scheme
2. Check Contrast for text/background combinations
3. Create a Gradient for backgrounds
4. Use Color Converter to convert to the required format
5. Use CSS Unit Converter to convert px → rem for responsive design

👉 See all Design & Color Tools →