Skip to content

Color Tools

Pick colors, generate palettes, check contrast, and convert between color formats.

Generators 5

Palette Generator

hot

Generate beautiful color palettes using color harmony rules

CSS Gradient Generator

Create advanced CSS gradients with linear, radial, and conic support

Gradient Generator

Build linear, radial, and conic CSS gradients with a visual editor and presets

Random Color Generator

Generate random colors in various styles like pastel, dark, vivid, warm, and cool

Tint & Shade Generator

Generate tints and shades of any color in 10 even steps

Finder 3

Color Name Finder

Find the closest CSS named color for any HEX value

Material Color Finder

Find the closest Material Design color for any HEX value

Tailwind Color Finder

Find the closest Tailwind CSS color class for any HEX color

Accessibility 2

Contrast Checker

hot

Check WCAG color contrast ratios for accessibility compliance

Color Blindness Simulator

See how colors appear to people with different types of color blindness

Other 6

Color Picker

★

Pick any color and get its HEX, RGB, and HSL values instantly

Random Hex Palette

new

Roll fully random hex color palettes, lock the swatches you like, then reshuffle the rest. 2-10 colors per palette.

Color Format Converter

Convert colors between HEX, RGB, HSL, HSV, and CMYK formats

Color Harmony Finder

Find harmonious color combinations using color theory and a visual color wheel

Color Mixer

Mix two or more colors using RGB or HSL blending methods

Image Color Palette

Extract dominant colors from any image to create a color palette

What Do the Color Tools Handle?

Everything that involves picking, tweaking, or analyzing color during design and development work. Need a hex code from a visual picker? Want to check if your white text on a teal button passes WCAG AA contrast? Trying to find the closest Tailwind utility class to a brand color your client sent over as a Pantone? Building a cohesive five-color palette from scratch? Converting between HEX, RGB, HSL, CMYK, and other formats? It's all here. There are also some specialized tools, a Color Blindness Simulator that shows how your UI looks under deuteranopia, protanopia, and tritanopia, a Tint & Shade Generator for building consistent color scales, and a CSS Gradient Generator that gives you production-ready code.

Why Designers Keep These Open in a Tab

The feedback is instant and visual. Pick a color and you see it in every format at once, no manual conversion math. The Contrast Checker doesn't just say pass or fail; it tells you the exact ratio and how far off you are from the next WCAG level. The Palette Generator works from actual color theory, complementary, analogous, triadic, split-complementary, so you start with palettes that are mathematically harmonious instead of eyeballing it. Every value copies to clipboard with one click, ready to paste straight into CSS, Figma, or your design token file.

Color Tools Designers and Devs Rely On

  • Color Picker, Click anywhere on the spectrum or type a value, and get the color in HEX, RGB, HSL, and CMYK simultaneously. One click copies any format.
  • Contrast Checker, Plug in a foreground and background color and see your WCAG 2.1 AA and AAA pass/fail status with the exact contrast ratio.
  • Palette Generator, Pick a base color and a harmony rule, and get a full palette you can export as CSS custom properties, Tailwind config values, or plain hex codes.
  • Tailwind Color Finder, Enter any hex color and it finds the nearest Tailwind CSS class match, including the shade number. Useful when mapping brand colors to Tailwind projects.
  • CSS Gradient Generator, Visually build linear and radial gradients with multiple color stops, then copy the CSS with one click.
Back to all tools