Color & CSS Tools
Color-code conversion, palette generation, contrast checking, and CSS gradient/shadow generators.
Design and UI work routinely raise needs like "express this color in hex and in OKLCH" or "does this pair clear WCAG contrast?". Tools in this section cover format conversion (including the modern OKLCH that CSS is standardizing on), contrast ratio AA/AAA checks, and CSS gradient code generation.
Tools in this topic (13)
HEX to RGB / HEX to HSL Color Code Converter
Convert HEX, RGB, HSL color codes. HEX to RGB, RGB to HEX, HEX to HSL supported
Color Palette Generator
Generate shades, tints, analogous, complementary, and triadic palettes from a base color
Color Picker
Pick any color and view it in HEX, RGB, and HSL formats
Color Contrast Checker
Check WCAG AA and AAA contrast ratio between two colors
CSS Gradient Generator
Generate CSS linear and radial gradients visually with a live preview
CSS Gradient Text Generator
Generate gradient text with CSS. Pick colors, adjust angle, copy code
CSS Text Shadow Generator
Generate CSS text-shadow values visually with a live preview
CSS Box Shadow Generator
Generate CSS box-shadow values visually with a live preview
CSS Minifier
Minify CSS code instantly. Remove comments and whitespace to reduce file size
CSS Formatter
Beautify minified or compact CSS into a readable form with 2 or 4 space indent
CSS Unit Converter
Convert between CSS units: px, rem, em, %, vw, vh, svh, lvh, dvh, and more
Aspect Ratio Calculator
Calculate and convert aspect ratios for images and video with resize calculator
CSS Border Radius Generator
Generate CSS border-radius values visually with a live preview
Related articles
-
Aspect ratios: 16:9, 4:3, golden ratio, and where each fits
The history of major aspect ratios (16:9, 4:3, 3:2, 21:9, 1:1, golden ratio) and how to choose for images, video, and UI.
-
Color spaces: hex, RGB, HSL, OKLCH and when each fits
Web color formats (hex, RGB, HSL, OKLCH), how they convert, and why a perceptually uniform space matters for modern design.
-
WCAG contrast ratio 4.5:1: where the number comes from and what implementations miss
The origin of the 4.5:1 contrast ratio in WCAG, the relative-luminance formula behind it, AA vs AAA levels, and the thresholds for different text sizes.