Overview
Every colour on screen is one colour wearing four different outfits. HEX is what stylesheets eat, RGB is how the display builds it from light, HSL is how humans think about it — hue, then vividness, then brightness — and HSV is the variant design tools prefer. Translating between them by hand is tedious and error-prone; this studio keeps all four on screen at once, always in agreement.
Pick visually or type a HEX code — the two stay synchronised — and every value copies in CSS-ready form with a single click. Below, five tints and five shades give you a ready-made family: lighter and darker companions for hover states, borders and depth, each clickable to become the new base.
Why do four formats exist for one colour?
Because different jobs need different views. HEX is compact text a stylesheet can swallow. RGB mirrors the hardware: red, green and blue light mixed per pixel. HSL matches human intuition — pick a hue, then decide saturation and lightness — which makes it easiest for adjusting. HSV is a close cousin tuned for picker interfaces. None is truer; they are projections of the same point.
The conversions are pure arithmetic — no lookup tables, no approximation. That matters because rounding errors compound: convert sloppily through three formats and you land on a visibly different colour. The studio converts exactly, so the HEX you copy is the colour you picked, down to the last digit.
Features
- Two-way picking — a visual picker or typed HEX, always in sync.
- Four formats together — HEX, RGB, HSL and HSV side by side, never one at a time.
- Copy-ready values — every format copies in syntax your stylesheet accepts.
- Tints and shades ladder — five steps toward white, five toward black.
- Clickable family — tap any tint or shade to re-base the studio around it.
- Forgiving input — three-digit shorthand, lowercase and a missing # are all understood.
- Fully local — conversions are arithmetic on your device; nothing is uploaded.
Benefits
- Stop converting by hand. Four formats, zero mental maths.
- Build families fast. The tint and shade ladder is a hover-state kit.
- Paste-ready output. Values copy in the exact syntax code expects.
- Explore fearlessly. Click around the ladder; nothing breaks.
Who can use it
Developers translating a designer's HEX into the HSL their code prefers, designers building systematic colour scales, bloggers matching a screenshot's colour in their theme, and students learning how hue, saturation and lightness relate by dragging one and watching the others move. Anyone maintaining a design system will live in the tint and shade ladder.
How to use
- Pick a colour with the visual picker, or type or paste a HEX code.
- Read the four formats; click any value to copy it.
- Scan the tints and shades for lighter and darker companions.
- Click a tint or shade to make it the new base and grow its family.
- Paste the copied values straight into your CSS.
Frequently asked questions
Which format should I use in my CSS?
HEX for simple solid colours — compact and universal. HSL when you will adjust programmatically, because tweaking lightness is one number instead of three. RGB when you need transparency via rgba(). They render identically; the choice is about which is easiest to read and modify six months later.
What is the difference between a tint and a shade?
A tint mixes the colour toward white; a shade mixes it toward black. Tints feel lighter and airier, shades deeper and weightier. The ladder gives five of each in even steps — exactly what you need for hover states (one step darker), borders (two steps) and subtle backgrounds (three to four steps lighter).
Why does 3-digit HEX work?
It is official shorthand: each digit doubles, so #f80 means #ff8800. The studio expands it automatically, and likewise tolerates lowercase and a missing hash. Forgiving input exists because colours arrive in messy forms — copied from screenshots, chat messages and old code.
Are the conversions exact?
Yes, within each format's own limits. HEX and RGB are exact integers; HSL and HSV involve decimals, which the studio rounds sensibly for display while keeping full precision internally. The colour you copy is the colour you picked.
Is my picked colour uploaded anywhere?
No. Picking and converting are local arithmetic; the page keeps no record of your colours.
Conclusion
One colour, four honest translations, and a family to grow around it. Pick your colour, copy exactly what you need in the format your code expects, and let the tint-and-shade ladder handle the lighter-and-darker decisions — hover states, borders and subtle backgrounds sorted in seconds, with no manual conversion arithmetic.