Overview
Every design tool, stylesheet and graphics program describes colour in its own dialect. A developer wants a HEX code for CSS, a designer thinks in hue and lightness, and a video editor may be handed RGB numbers with no context at all. Colour Studio is the translator between those dialects: choose a colour once, and the page shows the same colour expressed four different ways, each with its own copy button so the value you need is one click from your clipboard.
Below the values you get five tints and five shades of the same colour. Those ten neighbours are the ones you reach for constantly in real work — a hover state a touch lighter than the button, a border a step darker than the panel, a background wash that carries the brand colour without shouting. Instead of nudging sliders and hoping, you can see the whole family at once and click the one that looks right.
What is a colour model?
A colour model is a recipe for naming a colour with numbers. RGB mixes red, green and blue light, which is how screens physically make colour, so its numbers describe a colour the way a monitor builds it. HEX is simply RGB written in base sixteen and squeezed into six characters — same recipe, shorter handwriting. HSL and HSV take a different approach: they start from a position on the colour wheel (hue), then describe how vivid the colour is (saturation) and either how light it is (lightness, in HSL) or how bright it is (value, in HSV).
Neither family is "more accurate" than the other; they are useful for different jobs. RGB and HEX are what you hand to a browser. HSL is usually easier for humans to reason about, because turning one knob predictably makes a colour paler, deeper or lighter — which is exactly why the tints and shades on this page are built by walking the lightness scale.
Features
- Two-way picking: use the visual colour picker or type a HEX code — the two stay in step as you work.
- Four formats at once: HEX, RGB, HSL and HSV are always visible together, so you never convert one at a time.
- Copy buttons everywhere: every value, in CSS-ready formatting, copies with a single click.
- Five tints and five shades: an even ladder from your colour toward white and toward black.
- Clickable swatches: click any tint or shade to make it the current colour and grow a new family around it.
- Forgiving HEX input: three-digit shorthand, lowercase and a missing leading # are all understood.
- Large preview: a full-width swatch so you judge the colour itself, not a thumbnail of it.
- Fully private: all conversions are arithmetic done on your device — nothing is uploaded or stored.
Benefits
- No more guesswork in code: paste values that are provably the colour you picked, not a near miss.
- Faster design systems: a base colour plus its ladder gives you buttons, hovers, borders and washes in minutes.
- One page, every dialect: hand a developer, a designer and a marketer each the format they asked for.
- Consistent branding: derive supporting colours from the brand colour itself instead of inventing new ones.
- Works anywhere: no account, no install, and it keeps working offline once loaded.
Who can use it
Web developers translating a design file into CSS, designers building a palette before opening a heavy editor, and anyone who has ever been sent a screenshot and asked "can the button be that colour?" — this page is for all of them. Students learning how colour wheels work will also find the four live values a clearer teacher than any static diagram, because every change they make is answered instantly in all four models.
How to use
- Pick a colour with the colour well, or type its HEX code into the text box.
- Check the large preview — if it is not the colour you meant, adjust until it is.
- Read the format you need from the four value cards and click its Copy button.
- Scroll to the tints and shades to find lighter and darker companions.
- Click any swatch to explore around that colour instead.
- Paste the copied value straight into your stylesheet, editor or document.
Frequently asked questions
What is the difference between HSL and HSV?
They share hue and saturation but split on the third number. HSL lightness runs from black through the pure colour to white, so 50% lightness is the most vivid version. HSV value runs from black to the pure colour, so 100% value is the most vivid version. Design tools favour HSL; some graphics and video tools favour HSV.
Why does the same colour look different on my phone?
Screens differ in brightness, calibration and colour gamut, and many phones shift colours at night. The numbers are identical everywhere — it is the glass showing them that changes. For brand work, always judge by the values first and the screen second.
How are the tints and shades calculated?
Each step mixes your colour a fixed amount toward pure white (tints) or pure black (shades) in RGB space, in five even steps ending near — but not at — the extreme, so the last swatch is still recognisably your colour.
Can I enter RGB numbers instead of HEX?
This page takes HEX as its text input, including the three-digit shorthand. If you have RGB numbers, the visual picker will usually get you to the same colour quickly, and the RGB card then confirms the exact values.
Is the HEX code case-sensitive?
No. #FF6B35 and #ff6b35 are the same colour, and this page accepts either, with or without the leading hash.
Does this tool store the colours I pick?
No. The conversion happens in your browser's memory and is gone when you close the tab. There is no account, history or upload involved.
Conclusion
A colour is one thing said four ways, and Colour Studio keeps all four sayings on a single screen, surrounded by the lighter and darker versions you will actually build with. Pick once, copy what you need, and let the numbers — not eyeballing — carry your colour faithfully from idea to finished page.