Free Color Tools

Pick colors, build palettes, generate gradients and check color contrast.

Color Picker & Palette

Choose a color

Selected HEX

CSS Gradient Generator

Start color

End color

Gradient angle

CSS Gradient Code

Color Contrast Checker

Text color

Background color

Sample text preview - Aa 123

Contrast ratio: —

How to Use Free Color Tools

Select a color with the picker to create a five-color palette. Use the gradient generator to choose start and end colors and set the gradient angle, then copy the CSS code into your website. The contrast checker compares foreground text with its background and displays a contrast ratio to help you assess readability.

Frequently Asked Questions

Can I use generated colors in a website?

Yes. Copy the HEX values or CSS gradient code and use them in your own stylesheets.

What does contrast ratio mean?

It describes the difference in perceived brightness between text and its background. Higher ratios generally improve readability.

Does this tool work on phones?

Yes, its controls and layout adapt to small screens.