Color Studio
Convert formats, build a tint/shade scale and check accessible contrast.
Best on this color: white text at 5.13:1.
About the color studio
A color tool for designers and developers. Pick any colour to instantly get its HEX, RGB and HSL values, generate a tint-and-shade scale, and check the WCAG contrast ratio against white and black text so your interfaces stay accessible.
- Convert between HEX, RGB and HSL with one-tap copy
- Automatic tint and shade scale from any base colour
- WCAG AA and AAA contrast checking for text
- Recommends the most readable text colour
- Live colour picker with instant preview
How do I convert a HEX color to RGB or HSL?+
Pick a colour or type a HEX code and the tool instantly shows the matching RGB and HSL values, each of which you can copy with a single click.
What is a good contrast ratio for text?+
WCAG recommends a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for enhanced accessibility (AAA). The contrast checker shows the ratio and whether it passes.
How do I build a color palette?+
Choose a base colour and the tool generates a scale of lighter tints and darker shades that you can copy — a quick way to build consistent UI palettes.