🎨 Color Tools

Free tools for working with colors — convert between formats, generate palettes, build design system scales and more.

🎨

HEX to RGB

Convert any HEX color code to RGB, HSL, HSV and CMYK. Live preview, tints and shades panel, copy any format instantly.

Use tool →
🖌️

Palette Generator

Generate complementary, triadic, analogous, split-complementary, tetradic and monochromatic color palettes from any base color.

Use tool →
🎭

Shades Generator

Generate a 10-step tint and shade scale from any color. Perfect for design systems. Export as CSS variables, Tailwind config or hex array.

Use tool →
🌈

Gradient Generator

Create linear, radial and conic CSS gradients visually. Add color stops, adjust angle, copy the CSS output instantly. Includes preset gradients.

Use tool →

Contrast Checker

Check WCAG 2.1 contrast ratios for web accessibility. Shows AA and AAA pass/fail for normal text, large text and UI components. Live preview.

Use tool →
🎲

Random Colour

Generate random colours. Adjust hue, saturation and brightness ranges. Shows HEX, RGB, HSL values. Generate palettes of 2–8 colours.

Use tool →
🖼️

Image Color Picker

Upload or paste an image and click anywhere to get the exact HEX, RGB and HSL color values from that pixel. Free.

Use tool →
🏷️

Color Name Finder

Find the closest named color for any HEX or RGB value. Shows the 140+ CSS named colors and their nearest match. Free.

Use tool →
🎨

Color Mixer

Mix any two colors together. Adjustable blend ratio. Shows HEX, RGB and HSL values. Build custom palettes by mixing multiple colors.

Use tool →
👁️

Colour Blindness

Simulate how colours appear to people with colour blindness. Deuteranopia, protanopia, tritanopia and achromatopsia. Free.

Use tool →
🌡️

Color Temperature

Convert colour temperature in Kelvin to approximate RGB/HEX. Great for photographers and lighting designers. Free.

Use tool →
🎨

HSL → HEX

Convert HSL (Hue, Saturation, Lightness) colour values to HEX and RGB. Interactive sliders. Live preview. Free.

Use tool →
🌈

Scheme Generator

Generate complete colour schemes from a base colour. Complementary, triadic, tetradic, analogous and split. Free.

Use tool →
⚫⚪

Contrast Checker

Check colour contrast ratio against WCAG 2.1 AA and AAA standards. Pass/fail for normal and large text. Free.

Use tool →
🎨

Gradient

Build linear and radial CSS gradients visually. Multiple colour stops. Copy CSS instantly. Free.

Use tool →

Box Shadow

Build CSS box-shadow visually. Multiple shadows, inset support, colour and blur. Copy CSS. Free.

Use tool →

Border Radius

Build CSS border-radius visually. Per-corner control and ellipse support. Copy CSS. Free.

Use tool →
🖼️

Palette from Image

Extract the dominant colours from any image. Upload and get a 6-colour palette. Free.

Use tool →