Free Color Tools for Designers and Developers
Generate color palettes, build CSS gradients, check WCAG contrast ratios, create tints and shades, explore color schemes, and convert between HEX, RGB, HSL, and CSS variables. Every tool runs in your browser with no account required.
Color Palette Generator
Generate harmonious 5-color palettes from any starting hue.
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
WCAG Contrast Checker
Test color pairs against WCAG 2.1 AA and AAA standards.
CSS Box Shadow Generator
Generate CSS box shadows with slider controls and live preview.
Color Format Converter
Convert HEX to RGB, HSL, RGBA, and CSS custom properties.
Tints and Shades Generator
Generate a full 11-step color scale from any hex color.
Color Scheme Generator
Generate complementary, analogous, and triadic color schemes.
Color Name Finder
Find the closest CSS named color for any HEX code.
Image Color Extractor
Upload an image and extract its dominant color palette.
9
Color tools
WCAG 2.1
Contrast standard
HEX · RGB · HSL
Output formats
100%
Browser-based
Color scale preview
The tints and shades generator produces a full 10-step scale from any base color, matching Tailwind's 50–950 naming convention.
50
100
200
300
400
500
600
700
800
900
Color tools for every stage of design
Color decision making starts at the beginning of any design project and carries through to the final line of CSS. Start with palette generation to establish your primary, secondary, and accent colors. Use the tints and shades generator to build a complete scale for each base color. Run the contrast checker to confirm that every foreground and background combination meets WCAG 2.1 AA or AAA requirements before your design reaches production.
The color scheme generator covers complementary, analogous, triadic, split-complementary, and tetradic relationships. The image color extractor lets you pull a dominant palette from any photo or reference image. The color name finder maps any HEX value to the nearest named CSS color.
CSS output for every tool
All nine color tools produce CSS-ready output. The palette generator exports CSS custom properties. The gradient maker generates the complete background declaration. The format converter produces HEX, RGB, RGBA, HSL, and CSS variable output simultaneously. Results update in real time as you adjust inputs.
Frequently asked questions
Yes. All color tools use standard browser APIs including the Canvas API for image processing and CSS parsing for color conversion. They work in Chrome, Firefox, Safari, and Edge without any extension or plugin.
Yes. The palette generator, tints and shades generator, and gradient maker all include Tailwind-compatible output. The tints and shades tool matches Tailwind's 50–950 color scale naming convention exactly.
The contrast checker uses the WCAG 2.1 relative luminance formula exactly as defined in the specification. Results match Google Lighthouse, WebAIM Contrast Checker, and other industry-standard tools.
No. All image processing runs locally in your browser using the Canvas API. Your image is never sent to a server, stored, or accessible outside your own device.