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.

Other categories