Overview
Every colour you use on the web is secretly four colours: the HEX your stylesheet wants, the RGB your canvas expects, the HSL your brain understands, and the HSV your design tool speaks. Translating between them by hand is tedious arithmetic; this studio does it instantly and shows all four side by side, so you always have the right dialect ready.
Below the formats sits a ladder: five tints stepping toward white, five shades stepping toward black. It answers the most common colour question in design — “can I see that, but lighter?” — without opening a graphics editor. Click any rung and it becomes the new base, so you can wander the neighbourhood of a colour freely.
Why does one colour need four names?
Digital colour starts with light. Screens mix red, green and blue light, each at 256 levels, which is why RGB triples like (255, 122, 53) describe colours precisely — and why HEX codes like #FF7A35 are just those three numbers written in hexadecimal. HSL rearranges the same information around human intuition: pick a hue on the wheel, then set saturation (how vivid) and lightness (how bright).
HSV is HSL's close cousin, swapping lightness for “value” (brightness), and it is the model most colour pickers are drawn with — the familiar square with hue on top. None of these is more “real” than the others; they are different maps of the same territory, and fluency in all four is what separates guessing from designing.
Features
- Two-way picking — drag the visual picker or type a HEX code; both stay in sync.
- Four formats at once — HEX, RGB, HSL and HSV displayed together, never one at a time.
- Copy-ready values — every format copies in syntax your stylesheet will accept.
- Tints and shades ladder — five steps toward white, five toward black, computed for you.
- Clickable family — tap any tint or shade to re-centre the studio on it and explore further.
- Forgiving input — three-digit shorthand, lowercase letters and a missing # are all understood.
- Fully local — conversions are arithmetic on your device; nothing is uploaded.
Benefits
- One colour, every language. HEX for stylesheets, RGB for canvas, HSL for humans — side by side.
- Design by nudging. The tint/shade ladder turns “a bit lighter” into something precise.
- Forgiving input. Type it however you remember it; the studio sorts it out.
- Private picking. Brand colours and experiments stay on your device.
Who can use it
Web developers grabbing values for stylesheets, designers building palettes and design systems, marketers checking brand colours, students learning how digital colour works, and anyone who has ever thought “that blue, but a touch darker.” Illustrators and slide-makers use the ladder to build harmonious variations without guesswork.
How to use
- Pick a colour with the visual picker, or type/paste a HEX code.
- Read all four formats side by side and copy whichever your project needs.
- Browse the tints and shades ladder for lighter and darker variants.
- Click any tint or shade to make it the new base colour and keep exploring.
- Copy the final values straight into your stylesheet or design tool.
Frequently asked questions
Why do we need so many colour formats?
They describe the same colour in different coordinate systems. HEX is RGB written compactly for stylesheets. RGB matches how screens mix light. HSL describes colour the way humans think — hue, then how vivid, then how bright — which makes “make it lighter” a single-number tweak. HSV is similar with “value” instead of lightness, popular in design tools. Translating between them is pure arithmetic.
Which format is best for adjusting a colour?
HSL is usually the friendliest for tweaking: keep the hue, nudge saturation and lightness. But the tint/shade ladder on this page is even easier — it pre-computes five steps toward white and five toward black, so you can pick the variation instead of calculating it.
Does it accept shorthand like #f80?
Yes — #f80, lowercase letters, and a missing # are all understood. The studio normalises shorthand to the full six-digit form before converting, so casual input never errors out.
What about transparency / alpha?
Alpha (transparency) is deliberately out of scope here; this studio works with solid colours. For translucent variants, take the HEX and append an alpha byte (e.g. 80 for 50%), or use the rgba() form in your stylesheet.
Are the tints perceptually uniform?
The ladder is computed in a perceptually even way toward white and black, which keeps steps looking uniform. But screens and human vision are quirky — always eyeball the result in context, especially for text, where the contrast checker on this site gives you the final verdict.
Is my colour history stored anywhere?
No. Picking and converting are pure arithmetic in your browser. Nothing is uploaded, stored or tracked — experiment with client brand colours freely.
Conclusion
A colour is one thing; its names are many. Keep this studio open beside your work, translate freely between HEX, RGB, HSL and HSV, and let the tint ladder do the fine-tuning your eye keeps asking for.