How to use the Color Converter & Shades
- Enter a HEX, RGB or HSL value — or use the picker.
- Click any tint or shade to copy its HEX.
About this tool
Designers think in HSL (hue, saturation, lightness), browsers accept everything, and brand guides list HEX codes. Converting between them by hand is tedious. Type into any field and the others update; the swatch row generates lighter tints and darker shades of the same hue — a quick start for a design-system colour scale.
Why HSL? Adjusting lightness while keeping hue and saturation fixed produces visually coherent variations, which is how most modern UI palettes (like 50–900 scales) are built.
Frequently asked questions
Does it support transparency?
Alpha support (RGBA/HSLA) is on the roadmap.
Why do my colours look different in print?
Screens use RGB light; printers use CMYK ink. Ask your printer for a proof.