Color Converter
Convert between HEX, RGB, HSL and HSB instantly. Pick a color or type a value in any format.
Convert a colorNo signup. No server calls. Works offline once the page loads.
How It Works
Pick or type a color
Use the color picker, or type a HEX, RGB or HSL value directly.
See every format at once
HEX, RGB, HSL and HSB update together, live, with a preview swatch.
Copy what you need
One click copies any format, ready to paste into CSS, design tools, or code.
Privacy note: all color parsing and math runs locally in plain JavaScript. Nothing you type ever leaves your browser.
Common Uses
CSS development
Convert a design tool's HSL value into the HEX your CSS already uses, or vice versa.
Design handoff
Translate a designer's color spec into whatever format a codebase expects.
Picking a matching shade
Use HSB to nudge brightness or saturation while keeping the same hue.
Quick experimentation
Hit Random color to explore values and see every format for a color at once.
Frequently Asked Questions
What color formats does this tool support?
HEX (#rrggbb or #rgb shorthand), RGB, HSL and HSB/HSV. Type a value in any of these formats, or use the color picker, and every other format updates instantly.
What's the difference between HSL and HSB/HSV?
Both describe a color as hue plus two other components, but HSL uses lightness (0% is always black, 100% is always white) while HSB/HSV uses brightness/value (0% is always black, but 100% brightness with full saturation gives the purest, most vivid version of the hue). Designers often find HSB more intuitive for picking a vivid color; HSL is more common in CSS.
Does this tool store or upload the colors I enter?
No. All parsing and conversion happens locally in your browser using plain JavaScript math. Nothing is sent to a server, logged, or stored.
Can I paste a CSS color value directly?
Yes. Paste values like #2563EB, rgb(37, 99, 235), or hsl(220, 83%, 53%) into the input field and the tool will parse them automatically.
Embed This Tool
Add a compact version of this tool to your own site. Free, ad-free, and privacy-preserving — it links back to Sadevz.
<iframe src="https://sadevz.com/embed/color-converter/" width="100%" height="420" loading="lazy" title="Color Converter — Sadevz"> </iframe>
More Tools
HEX vs RGB vs HSL, and the WCAG contrast thresholds for readable text — read the Color Formats & Accessibility Guide →