ToolsForWeb

Saved

Tap ☆ on any tool to keep it here.

AboutFAQContactPrivacyTerms
toolsforweb

Design

Color, contrast, and visual-design helpers for the web: color conversion, WCAG contrast checking, and CSS gradient, box-shadow, and border-radius generators.

6 tools
Aspect Ratio Calculator

Solve the missing width, height or ratio, reduce W:H to lowest terms and scale to fit.

Color Converter

Convert a color between HEX, RGB, HSL and OKLCH.

Color Contrast Checker

Check a text and background color pair against the WCAG 2.1 contrast thresholds, with a nearest-passing suggestion.

CSS Gradient Generator

Build a linear or radial CSS gradient with multiple color stops and copy the code.

CSS Box Shadow Generator

Dial in offset, blur, spread, color and inset for one or more box-shadows and copy the CSS.

CSS Border Radius Generator

Set each corner radius independently, including elliptical corners, and copy the border-radius CSS.

About Design

Helpers for the visual side of the web. Convert a color between HEX, RGB, HSL and OKLCH, check a text and background pair against the WCAG 2.1 contrast thresholds with a suggestion for the nearest passing color, and work out a missing width or height from an aspect ratio.

The CSS generators let you build a linear or radial gradient, a layered box shadow or asymmetric border radius visually, with a live preview, and copy the finished CSS straight into your stylesheet.

Questions

What contrast ratio does WCAG require?

Level AA needs 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.66px bold). Level AAA raises that to 7:1 and 4.5:1. The contrast checker shows which levels a color pair passes.

What is OKLCH and why use it?

OKLCH is a CSS color space where equal steps in lightness look equally different to the eye, which makes it easier to build consistent palettes than HSL. Modern browsers support it directly in CSS.

Does the generated CSS need vendor prefixes?

No. Gradients, box-shadow and border-radius are supported unprefixed in every current browser.