Color & Design

10 free online tools — Pickers, palettes, gradients and CSS generators

Tools for the colour and CSS side of design: convert between HEX, RGB and HSL, pick colours from an image, check text contrast against WCAG, build palettes and gradients, generate box-shadow, border-radius and glassmorphism CSS with live previews, make placeholder images, and see your design as colour-blind users do.

Gradient Generator Build a gradient visually, copy the exact CSS that made it. Border Radius Generator Set each corner separately, add elliptical radii for organic shapes, preview live, and copy the shortest CSS that produces it. New Box Shadow Generator Dial in a shadow with sliders — or start from presets that follow how light actually works. Color Blindness Simulator Preview an image or a set of colours under protanopia, deuteranopia, tritanopia and more, side by side with normal vision. New Color Palette Generator One colour in — tints, shades and four classic harmonies out, ready as CSS variables. Color Picker From Image Hover over an image to read the exact colour under the cursor, click to keep it, and pull out the dominant palette automatically. Glassmorphism Generator Tune transparency, blur, saturation, border and radius on a live frosted-glass card, and copy the CSS — Safari prefix included. New Placeholder Image Generator Make a solid-colour placeholder with a label at any size — download PNG, JPG, WebP or SVG, or copy a data URI to paste straight into an img tag. Color Converter Convert between every common colour format, with shades, tints and harmonies. Contrast Checker Check text and background colours against WCAG AA and AAA, with a fix suggestion.

Colour

The colour converter translates any notation; the image colour picker reads exact values from a photo or screenshot and extracts its dominant palette; the palette generator builds tints, shades and harmonies from one colour. Before shipping, the contrast checker tests text against WCAG AA and AAA, and the colour blindness simulator shows what a red/green status light looks like to the 8% of men who cannot tell them apart.

CSS generators

Visual editors that emit clean CSS: gradients, box shadows (layered), border radius including elliptical blob shapes, and glassmorphism cards with the Safari prefix included. Each shows the result live and copies the shortest CSS that reproduces it exactly.

Working assets

The placeholder image generator makes dummy images in any size as PNG, SVG or a data URI that needs no file at all — no third-party placeholder service to go down mid-demo.

A note on colour spaces

Browsers work in sRGB, and so do these tools. Values picked from an image are sRGB values; a photo saved in Display P3 will read slightly differently in a colour-managed editor. For the web that is correct; for print, take values from the source file.