🎨 Color Picker & Converter

Pick any colour and instantly convert between HEX, RGB, HSL, and CMYK. Generate shades and tints. 100% browser-based — no signup, no data stored.

Design ✓ 100% Free✓ No Signup✓ Instant Conversion
Colour Details
Shades
Tints

How to Use

1
Pick a colour

Click the colour swatch to open the browser colour picker, or type directly into any field.

2
Copy the format you need

Click the Copy button next to HEX, RGB, HSL, or CMYK to copy that value to your clipboard.

3
Explore shades and tints

Scroll down to see 5 darker shades and 5 lighter tints generated automatically from your colour.

Frequently Asked Questions

How do I convert HEX to RGB?
Paste your HEX colour (e.g. #3797f0) into the HEX field and the RGB, HSL, and CMYK values update instantly. You can also use the colour picker or type directly into any field.
What is the difference between RGB and HEX?
RGB expresses a colour as three numbers (red, green, blue) each from 0-255. HEX is the same information encoded as a 6-character hexadecimal string. #3797f0 = rgb(55,151,240). Both describe the same colour.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Black) is the colour model used in print. Printers mix these four ink colours to produce the full colour spectrum. If you are preparing files for printing, you need CMYK values. Screens use RGB; printers use CMYK.
What are colour shades and tints?
A shade is the colour mixed with black (darker). A tint is the colour mixed with white (lighter). This tool generates 5 shades and 5 tints from your chosen colour, useful for building design system colour scales.
Is my colour data sent to a server?
No. All colour conversion and generation runs entirely in your browser using JavaScript. Nothing is transmitted to any server.

About This Tool

This colour picker and converter supports the four most common colour formats used in web and print design. HEX and RGB are used in CSS and web design. HSL (Hue, Saturation, Lightness) is often more intuitive for adjusting colours programmatically — increasing lightness produces tints, decreasing it produces shades. CMYK is used in print production. All conversions are performed using standard mathematical formulas running locally in your browser. No colour data is transmitted to any server.

Related Tools

{ }
JSON Formatter
🆔
UUID Generator
🔄
CSS Loader
🔵
SVG Blob