CSS & Design
RGB to HEX Converter
Convert RGB colour values to hex, HSL and CSS formats, with the luminance.
Each channel is written as two hexadecima…
Also called rgb hex converter · color converter
Tech & Media · 11 calculators
CSS & Design Calculators
Convert RGB, HEX and HSL colours, check contrast ratios, build type and spacing scales, line heights and font sizes.
CSS & Design
HEX to RGB Converter
Convert a hex colour to RGB and HSL, accepting 3, 6 and 8-digit forms.
Each pair of hex digits is one channel va…
Also called hex rgb converter · hex color to rgb
CSS & Design
HSL to HEX Converter
Convert HSL colour values to hex and RGB — the format that makes tints and shades easy.
HSL is converted to RGB through chroma, t…
Also called hsl rgb converter · hsl color converter
CSS & Design
HEX to HSL Converter
Convert a hex colour to HSL, with a ready-made tint and shade scale.
RGB is normalised, then hue, saturation a…
Also called hex hsl converter · hex to hue saturation
CSS & Design
Contrast Ratio Calculator
WCAG contrast ratio between two colours, with AA and AAA pass or fail for each text size.
ratio = (L_lighter + 0.05) ÷ (L_darker + …
Also called wcag contrast checker · color contrast calculator
CSS & Design
Aspect Ratio Calculator
Find the aspect ratio of any width × height, or calculate a missing dimension for 16:9, 4:3, 21:9 and custom ratios.
W : H = (W ÷ GCD) : (H ÷ GCD)
Also called aspect ratio · 16:9 calculator
CSS & Design
Golden Ratio Calculator
Find golden-ratio proportions (φ ≈ 1.618): split a length into long and short sections or extend it — used in design and layout.
φ = (1 + √5)/2 ≈ 1.6180339887
Also called phi calculator · golden section
CSS & Design
Type Scale Calculator
Build a modular type scale from a base size and ratio, in px and rem.
size = base × ratio^step
Also called modular scale calculator · font size scale
CSS & Design
Line Height Calculator
Line height in unitless, px and percentage forms, with a readability recommendation.
line-height ratio = line height ÷ font si…
Also called leading calculator · line spacing css
CSS & Design
Font Size Converter
Convert font sizes between px, pt, em, rem and percent for web and print.
px = pt × 96 ÷ 72
Also called pt to px · px to pt
CSS & Design
Spacing Scale Calculator
Generate a consistent spacing scale from a base unit, linear or multiplied.
linear: base × multiplier
Also called spacing system calculator · margin padding scale
Key css & design formulas
| RGB to HEX Converter | Each channel is written as two hexadecimal digits, 00 to FF |
|---|---|
| HEX to RGB Converter | Each pair of hex digits is one channel value from 0 to 255 |
| HSL to HEX Converter | HSL is converted to RGB through chroma, then written as hex |
| HEX to HSL Converter | RGB is normalised, then hue, saturation and lightness are derived from the channel extremes |
| Contrast Ratio | ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05) |
| Aspect Ratio | W : H = (W ÷ GCD) : (H ÷ GCD) · H = W × b ÷ a |
| Golden Ratio | φ = (1 + √5)/2 ≈ 1.6180339887 · a/b = (a+b)/a = φ |
| Type Scale | size = base × ratio^step |
| Line Height | line-height ratio = line height ÷ font size |
| Font Size Converter | px = pt × 96 ÷ 72 · rem = px ÷ root font size |
CSS & Design questions
What contrast ratio do I need?
4.5:1 for body text and 3:1 for large text or UI controls to meet WCAG AA, which is the level most accessibility regulations reference.
What are the common aspect ratios?
16:9 for HD video and most monitors, 4:3 for older TVs and iPads, 21:9 for ultrawide displays, 1:1 for square social posts, 9:16 for vertical video and 3:2 for many camera sensors.