Design tools
Convert colors between formats, generate shades and gradients, check contrast for accessibility and size layouts with aspect ratios and rem units.
- Design
Color contrast checker
Check the WCAG 2.x contrast ratio between text and background colors, with pass or fail for AA, AAA and UI components. Solid colors only; no transparency.
Open tool - Design
Color converter
Convert a hex, rgb(), hsl(), hwb() or CSS named color to every other format, plus approximate CMYK and the nearest named color.
Open tool - Design
Color shades generator
Make lighter tints and darker shades of one color by mixing it with white and black, with a ready CSS custom properties block.
Open tool - Design
CSS gradient generator
Build a linear, radial or conic CSS gradient from color stops, one per line, with a solid fallback color line.
Open tool - Design
Aspect ratio calculator
Simplify a width and height to an aspect ratio, or use a ratio and one side to find the other side. Common ratios are named.
Open tool - Design
PX to REM converter
Convert pixel values to rem or em, or rem and em back to pixels, using a root font size. Enter one value or a shorthand list per line.
Open tool