Color Converter
Paste a color in hex, rgb() or hsl() and get all three formats plus a ready-made row of tints and shades for your design system.
#0071e3rgb(0, 113, 227)hsl(210, 100%, 45%)Not a color we can read. Try #0071e3, rgb(0, 113, 227) or hsl(211, 100%, 45%).
The swatch row mixes the color with white (left) and black (right) at 20/40/60/80% — handy for hover states and dark-mode variants.
This tool runs entirely in your browser. Your data never leaves your device — it is not uploaded to any server.
How to use
- 1Paste a color in any of the three formats — hex, rgb() or hsl().
- 2Read the converted values and copy the one you need.
- 3Grab tints and shades from the swatch row below.
Color Converter
Feed it #0071e3, rgb(0, 113, 227) or hsl(211, 100%, 45%) — the parser detects the format automatically and outputs hex, RGB and HSL at once, each with a one-click copy.
Below the values, a tint-and-shade row mixes your color with white and black at 20/40/60/80% steps: instant hover states, borders and dark-mode variants without opening a design tool.
Frequently asked questions
How is HSL converted to RGB?
Through the standard Cylindrical–RGB mapping: chromaticity c = (1 − |2L − 1|) × S, an intermediate value x determined by the hue sector, then each channel is offset by m = L − c/2. The math is the textbook formulas, so results match design tools.
Why does my color code show as invalid?
Accepted forms are #RGB / #RRGGBB, rgb(r, g, b) and hsl(h, s%, l%). Channels must be in range (0–255 for RGB, 0–360 for hue, 0–100% for the rest) and each part separated by a comma or space.
What are tints and shades good for?
Tints (mixed with white) make hover backgrounds, badges and cards; shades (mixed with black) make pressed states, borders and dark-mode surfaces. Deriving both from one brand color keeps every UI state visually consistent.
Related tools
Color Picker
Pick a color from the swatch or grab one straight from your screen with the EyeDropper API — hex, RGB and HSL copied in one click.
All tools →
QR Code Generator
Turn any text or URL into a crisp QR code with adjustable size, colors and error-correction level — download as PNG or SVG.
All tools →
Aspect Ratio Calculator
Given a ratio like 16:9 and one dimension, get the missing width or height instantly — plus presets from 1:1 to 21:9 for video and design.
All tools →
UUID Generator
Generate random UUID v4 identifiers in bulk with one click — 1 to 500 at a time, using your browser's cryptographic randomness. Free, instant, offline-capable.
All tools →
Embed this tool
Put this tool on your own site with one line — it runs entirely in the visitor's browser.
<iframe src="https://zoyku.com/en/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>