Skip to content
XUtilHub

Free Color & Design Tools – Palettes, Contrast, Gradients, Shadows

Everything for choosing and using color: generate palettes, check text contrast against WCAG, build CSS gradients and shadows, turn one brand color into a full Tailwind scale, see your design through color-blind eyes, and find the name of any color. Copy ready-to-use CSS or Tailwind code.

7 tools

Contrast CheckerNEW

Check the contrast ratio between text and background colors against WCAG 2 AA and AAA, with a live preview and one-click fixes that pass.

Color Palette GeneratorNEW

Generate beautiful 5-color palettes: random, analogous, monochrome, complementary, triadic, pastel or earthy. Lock colors, press space, export CSS or PNG.

CSS Gradient GeneratorNEW

Create CSS gradients visually: linear, radial or conic, with up to 8 color stops, angle control and presets. Copy the CSS or Tailwind class.

Box Shadow GeneratorNEW

Create CSS box shadows visually with multiple layers, blur, spread, opacity and inset. Presets for soft, layered, glow and neumorphic shadows.

Color Shades GeneratorNEW

Turn one brand color into a full 50–950 shade scale like Tailwind's. Balanced OKLCH shades, exported for Tailwind v4, v3, CSS variables and SCSS.

Color Blindness SimulatorNEW

Upload an image to see how people with deuteranopia, protanopia, tritanopia and achromatopsia see it. Side by side, scientifically based, no upload.

Color Name FinderNEW

Find the name of any color from its HEX, RGB or HSL code. See the closest CSS color names and common names, plus a list of all 148 CSS colors.

Color tools for designers and developers

Good color makes a site look professional and easy to read. These tools help you pick colors that work together, check that text is readable, and turn your choices into code you can paste straight into CSS or Tailwind. Everything runs in your browser, so nothing you make is uploaded.

Which tool do I need?

I want to…Use
Find a color scheme for a website, logo or brandColor Palette Generator
Check that text is readable on its backgroundContrast Checker
Make a gradient backgroundCSS Gradient Generator
Add a shadow to a card or buttonBox Shadow Generator
Turn one brand color into light and dark shadesColor Shades Generator
See how color-blind people see my designColor Blindness Simulator
Find out what a color is calledColor Name Finder

Design for everyone

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and many more people read screens in bright sunlight or with low vision. Check contrast with the contrast checker, and never rely on red versus green alone to show meaning. Test with the color blindness simulator.

More color tools

Color picker and converter, pick colors from an image, favicon generator and CSS minifier.

Frequently asked questions

Are these design tools free?

Yes. Every tool is free with no sign-up, and you can use the colors and code in personal and commercial projects.

Do you upload my images?

No. The color blindness simulator and every other tool run entirely in your browser, so your images and colors stay on your device.

Which code formats can I copy?

HEX, RGB and HSL values, plain CSS, CSS variables, SCSS variables, and Tailwind classes or theme config for both Tailwind v3 and v4.

What is a good contrast ratio?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text, icons and borders. AAA asks for 7:1 for normal text.