Blog category

Color and Design guides

Guides for colors, CSS, measurements, and practical design values.

Available guides

14 guides

How to calculate aspect ratio

Calculate missing width/height from an aspect ratio and simplify ratios.

How to check color contrast

Calculate WCAG-style contrast ratios and clearly report common text contrast thresholds.

How to convert hex to hsl

Convert HEX colors to HSL.

How to convert hex to rgb

Convert valid HEX colors to RGB/RGBA.

How to convert hsl to hex

Convert HSL colors to HEX.

How to convert px to rem converter

Convert pixels to rem using a configurable root font size.

How to convert rem to px converter

Convert rem to pixels using a configurable root font size.

How to convert rgb to hex

Convert valid RGB/RGBA values to HEX.

How to generate color palette

Generate useful color palettes locally with copyable values.

How to generate css border radius

Visually configure corner radii and copy the CSS.

How to generate css box shadow

Build and preview CSS box-shadow values with copyable output.

How to generate css gradient

Build linear/radial CSS gradients and copy the generated CSS.

How to generate random color

Generate random colors with HEX, RGB, and HSL values.

How to pick color

Pick a color and view common color representations with copy buttons.