Design tools

Color, contrast, gradients, and units

Convert colors, build CSS gradients and shadows, check WCAG contrast, and switch between pixels and rem.

No signup. Color values and measurements stay in your browser.

Start now

Choose a tool and start.

Each tool opens instantly. Enter a color or a number and read the result.

Color converter Switch a color between HEX, RGB, and HSL. Convert color Contrast checker See whether two colors pass WCAG AA and AAA. Check contrast PX and REM Convert pixels to rem, or rem back to pixels. Convert units CSS gradient Build a linear or radial gradient and copy the CSS. Build gradient Box shadow Preview a box-shadow and copy the CSS property. Build shadow

Three quick steps from open to result.

Choose a tool

Open a color, contrast, gradient, shadow, or unit tool.
Enter the values

Paste a hex or rgb color, a pair of colors, or a pixel or rem number.
Use the result

Copy the converted color, the contrast ratio, or the unit value.

Concrete reasons people open these tools and finish the job in one visit.

Color math and unit conversion run immediately in the page.

Palette values and layout measurements are not sent to a server.

Check as many color pairs and unit conversions as you need.

Contrast results include WCAG AA and AAA for normal and large text.

Are the design tools free?

Yes. Color conversion, gradients, shadows, contrast checks, and px/rem conversion are free and do not require an account.

Which color formats can I paste?

Use a hex color such as #4f46c7, or an rgb() value. The converter shows HEX, RGB, and HSL.

What does the contrast checker compare?

It compares the text color with the background color and reports the ratio plus WCAG AA and AAA results.

What root size does px/rem use?

The default root font size is 16px. You can change it before converting pixels to rem or rem to pixels.