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 — the 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, while HSL is usually easier for humans to reason about — which is exactly why the tints and shades here are built by walking the lightness scale.
Features
- Two-way colour picking — use the visual picker or type a HEX code; the two stay in step as you work.
- Four formats side by side — 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.
- Fully private — all conversions are arithmetic done on your device; nothing is uploaded or stored.
Benefits
- No more near misses — paste values that are provably the colour you picked, not an approximation.
- Design systems in minutes — a base colour plus its ladder covers buttons, hovers, borders and washes.
- 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.
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?' 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, then paste the copied value into your stylesheet or editor.
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 tend to 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 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. Every conversion runs locally in your browser. Nothing is sent anywhere, nothing is saved, and closing the tab discards everything.
Conclusion
Colour stops being a guessing game when every format sits side by side. Pick once, copy exactly the value you need, grow a family of tints and shades around it — and hand off numbers you can trust.