Design Tools

Quick tools for front-end and visual design work, with copy-ready CSS and accessibility checks based on the WCAG contrast formula.

7 tools

Tools in this category

Color ConverterConvert colours between HEX, RGB, HSL, HWB, OKLCH and naive CMYK. Paste any CSS colour or use the picker, then copy each format. Runs in your browser.
Contrast CheckerCheck the WCAG 2.2 contrast ratio of text and background colours, see AA and AAA results for text and UI parts, and get the nearest passing colour.
CSS Gradient GeneratorBuild linear, radial and conic CSS gradients with 2 to 6 colour stops, set angle and positions, preview live and copy the background CSS.
Box Shadow GeneratorDesign CSS box shadows with several layers: offset, blur, spread, colour, opacity and inset. Preview on any background and copy the box-shadow CSS.
Color Palette GeneratorGenerate complementary, analogous, triadic, tetradic, split-complementary and shade palettes from one colour. Lock colours, then copy HEX, CSS or JSON.
PX to REM ConverterConvert px to rem or em and back with any root font size (default 16px). Includes a table of common sizes and converts px values in whole CSS snippets.
Aspect Ratio CalculatorFind the missing width or height for any aspect ratio, simplify dimensions such as 1920×1080 to 16:9, preview the shape and copy the CSS aspect-ratio rule.