Free Online Color Tools for Designers
Color work splits into two halves: choosing values and proving they work. These cover both — pickers, palette building, gradients, and conversion between HEX, RGB and HSL, alongside contrast checkers that give you the actual ratio. That second half is the useful one. A pairing at 4.4 to 1 fails WCAG AA for body text, and it is much better to learn that here than in a review.
Tools in this category
- HEX to RGB Converter Convert HEX color codes to RGB values instantly in your browser.
- RGB to HEX Converter Convert RGB and RGBA color values to HEX color codes instantly in your browser.
- RGB to HSL Converter Convert RGB and RGBA color values to HSL color codes instantly in your browser.
- HSL to RGB Converter Convert HSL and HSLA color values to RGB color codes instantly in your browser.
- HEX to HSL Converter Convert HEX color codes to HSL values instantly in your browser.
- HSL to HEX Converter Convert HSL and HSLA color values to HEX color codes instantly in your browser.
- CSS Gradient Generator Create linear and radial CSS gradients with a live preview and copy the code.
- Advanced CSS Gradient Generator Build multi-stop linear, radial, and conic CSS gradients with unlimited color stops, presets, and a live preview.
- CSS Box Shadow Generator Visually design CSS box-shadow with live preview, sliders for offset, blur, spread, color, opacity, and inset.
- CSS Border Radius Generator Visually generate CSS border-radius with live preview, per-corner sliders, a link-all toggle, and px or percent units.
- CSS Clamp Generator Generate a fluid, responsive CSS clamp() value from a minimum and maximum size and viewport, with px or rem units and a live preview of the formula.
- Tailwind Color Generator Generate a full Tailwind CSS color scale (50–950) from any base color, with live swatches and copy-ready Tailwind v4 @theme or v3 config output.
- Color Contrast Checker Check the WCAG contrast ratio between two colors and see if they pass AA and AAA accessibility levels.
- Accessible Color Checker Check if your text and background colors are accessible and get WCAG-compliant color suggestions that pass AA or AAA when they fail.
- Color Palette Generator Generate beautiful color palettes from any base color using harmony rules — complementary, analogous, triadic, tetradic, monochromatic, and shades — with live swatches and copy-ready CSS variables.
- Random Color Generator Generate one or many random colors at once in HEX, RGB, and HSL. Lock the colors you like, regenerate the rest, and copy any color or the whole batch — all in your browser.
- Material Color Generator Generate a full Material Design color palette from any base color, with all primary shades (50–900), accent colors (A100–A700), live swatches, and copy-ready CSS, SCSS, or JSON output.
- Favicon Generator Turn any image into favicon PNGs in every size you need.
- SVG Placeholder Generator Generate lightweight SVG placeholder images with custom size, colors, and text. Copy the SVG code or data URI, or download the file.
- CSS Filter Generator Visually build CSS filter effects with live preview and sliders for blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia.