Overview
Colour format whiplash is a daily tax on makers: the stylesheet wants #FF7A35, the canvas API wants rgb(255, 122, 53), your intuition wants 'a bit more saturated', and the design tool speaks HSV. Translating between these by hand is tedious arithmetic that invites typos — and typos in colour codes are invisible until they are embarrassing.
The studio ends the translation work. Drag the visual picker or type any HEX and all four formats update together, each copy-ready in syntax your tools accept. Beneath sits the family ladder — five steps toward white, five toward black — and clicking any rung re-centres the studio there, so you can wander a colour's neighbourhood freely.
Why does one colour need four names?
It starts with light. Screens mix red, green and blue, each at 256 levels — which is why RGB triples describe colours with machine precision, and why HEX codes are just those three numbers written in hexadecimal for compactness. These formats are built for hardware, not humans.
HSL and HSV rearrange the same information around human intuition: hue as a position on the colour wheel, plus saturation and lightness (or value). 'Make it a touch lighter' is one drag in HSL and a small research project in RGB. Different tools standardised on different dialects, so fluency in all four is simply the cost of doing colour work across the modern stack.
Features
- Two-way picking: drag the visual picker or type HEX — always in sync.
- Four formats at once: HEX, RGB, HSL and HSV, never one at a time.
- Copy-ready values in syntax your stylesheet will accept.
- Tints and shades ladder: five steps toward white, five toward black.
- Clickable family: tap any rung to re-centre and explore further.
- Forgiving input: three-digit shorthand, lowercase, missing # — all understood.
- Fully local — conversions are arithmetic on your device.
Benefits
- Never translate by hand between HEX, RGB, HSL and HSV again.
- Build UI states fast: hover, disabled and borders from the ladder.
- Explore fearlessly — click through a colour's whole neighbourhood.
- Paste with confidence: every value copies in valid syntax.
Who can use it
Front-end developers juggling stylesheets and canvas code, designers systematising a palette's tints and shades, students learning what HSL actually means, and anyone maintaining a design system where 'primary, but lighter for hover' needs a real number. If you touch colour in more than one tool, this is your Rosetta Stone.
How to use
- Drag the visual picker to a colour, or type/paste a HEX code.
- Read HEX, RGB, HSL and HSV together; click any to copy.
- Scan the ladder: five tints above, five shades below.
- Click any rung to re-centre the studio on it and keep exploring.
- Copy the values you need — all are in valid, paste-ready syntax.
Frequently asked questions
When should I use HSL instead of HEX?
When you think in adjustments. 'Slightly darker button on hover' is trivial in HSL — reduce lightness by a few points. In HEX it is guesswork. Use HEX for storage and handoff (compact, universal), HSL for reasoning and tweaking.
What's the difference between HSL and HSV?
Both split colour into hue plus two intuitive dimensions, but they model 'brightness' differently: HSL's lightness runs black through the pure colour to white, while HSV's value runs black to the pure colour, with saturation handling the wash-out. Design tools historically picked HSV; CSS picked HSL. The studio shows both so neither surprises you.
How are the tints and shades computed?
By mixing toward white (tints) or black (shades) in even steps — the classic, predictable method. They are starting points with honest math behind them; your eye decides which rung earns a place in the design.
Why does my brand colour look different in print?
Screens emit light (RGB); print reflects it (CMYK) on paper with its own inks. Some screen colours simply cannot be printed — they are 'out of gamut'. For print work, convert through a proper CMYK profile rather than trusting screen values.
The picker shows #fff but I typed fff — is that okay?
Completely. The studio forgives three-digit shorthand, missing # signs and mixed case, normalising everything to standard six-digit uppercase HEX. Type like a human; copy like a professional.
Conclusion
One colour, four dialects, one family. Pick it, read it every way, walk its tints and shades — and never do colour arithmetic by hand again.