Color & Design Tools & Calculators
Free, practical tools for every color decision — check contrast, convert between hex and RGB, tint and shade a palette, and flatten transparent colors before you ship.
Contrast Ratio Calculator
Check the WCAG contrast ratio between a text color and a background color and see instantly whether it passes AA and AAA for normal and large text
HEX to RGB Converter
Convert any CSS hex color — 3-digit or 6-digit, with or without the #, any case — into its red, green, and blue channel values instantly
RGB to HEX Converter
Enter red, green, and blue channel values and get a clean, lowercase 6-digit hex color code — values outside range are clamped automatically
Tint Calculator
Mix any color toward white by a percentage to see its tint — get the lighter tint as hex and RGB, with a live preview
Shade Calculator
Mix any color toward black by a percentage to see its shade — get the darker shade as hex and RGB, with a live preview
Alpha Blend Calculator
See the flat, opaque color you get when a semi-transparent foreground sits over a solid background — the same maths behind CSS rgba() and opacity