Design & Color Tools
Gradients, palettes, contrast checks and CSS generators.
Pick and convert colours, build palettes and gradients, and check that your text has enough contrast to be readable. These tools help you get design details right, and they show you the CSS values to use.
Tools in this category
CSS Gradient Generator
Create linear, radial and conic CSS gradients with multiple colour stops, live preview and copy-ready code.
Gradient Color Picker
Generate evenly spaced intermediate colours between two or more colours, in RGB, HSL or perceptual OKLCH space.
HEX / RGB / HSL Color Converter
Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH, with alpha support and CSS-ready values.
Color Palette Generator
Generate harmonious colour palettes (complementary, analogous, triadic, shades) from a base colour, or at random.
Contrast and Accessibility Checker
Check the WCAG contrast ratio between text and background colours and get passing alternatives.
Lorem Ipsum Generator
Generate placeholder text by paragraphs, sentences or words, as plain text or HTML.
Box Shadow Generator
Design layered CSS box shadows visually, including inset shadows, and copy the CSS.
CSS Border Radius Generator
Shape boxes with per-corner and elliptical border-radius values and copy the CSS.
CSS Button Generator
Design accessible CSS buttons with hover and focus states, then copy the HTML and CSS.
Favicon Generator
Create favicon.ico, PNG icons, an Apple touch icon and a web manifest from an image or text.
Font Pairing Preview
Preview heading and body font combinations with your own text, from system fonts or Google Fonts.
CSS Flexbox Playground
Experiment with flex container and item properties visually and copy the resulting CSS.
CSS Grid Generator
Build CSS Grid layouts with columns, rows, gaps and named areas, and copy the HTML and CSS.
CSS Transform Generator
Combine translate, rotate, scale, skew and 3D perspective transforms with a live preview.
CSS Animation Generator
Create CSS keyframe animations from presets (fade, slide, bounce, pulse, spin) with timing controls.
Color Blindness Simulator
Preview how images and colour palettes appear with protanopia, deuteranopia, tritanopia and achromatopsia.
Image Color Extractor
Extract the dominant colours from an image and pick exact colours by clicking on it.
Color Picker
Pick a colour visually or from your screen and get its HEX, RGB and HSL values, with recent colours saved.