Color Converter
Convert between HEX, RGB, HSL and OKLCH.
Formatos
WCAG Contraste
Paletas Generadas
How do you convert a color between HEX, RGB and HSL?
Docuboxer's color converter translates any color between the formats designers and developers actually use: enter a HEX code like #FF5733, an RGB triple, an HSL value, or pick the color visually with the picker, and every equivalent format appears instantly, exact and ready to copy. Each notation has its job — HEX is the compact standard for CSS, RGB maps to how screens emit light and what canvas APIs expect, and HSL expresses hue, saturation and lightness in terms humans can reason about, which makes it the natural format for building lighter and darker variants. Beyond straight conversion, the tool generates a palette of complementary tones and variants around your base color, useful groundwork for a design system. Everything runs in your browser — no signup, no upload, and it keeps working offline once the page has loaded.
How to use Color Converter
- Enter a color in any format — HEX (#FF5733), RGB (255, 87, 51), HSL (11, 100%, 60%) — or pick it visually with the picker.
- The tool converts it to every available format automatically, showing exact equivalences in real time.
- Copy the value in the format you need, or use the generated palette of complementary tones and variants in your design.
Common use cases
Translate colors between design and code
Convert quickly between HEX for CSS, RGB for canvas and HSL for lightness adjustments, smoothing the handoff between designers and frontend developers.
Build accessible, consistent palettes
Generate light and dark variants of a base color and check foreground/background pairs against WCAG contrast guidance to build coherent color systems for your app or brand.
Match brand colors across platforms
Take the one format you have — a HEX from a style guide, an RGB from a screenshot picker — and get the equivalents every other tool asks for.
Tweak a color's lightness or saturation
Convert to HSL, adjust the lightness or saturation component intuitively, and convert back — far saner than guessing HEX digits.
Explore variations for a design system
Use the generated tones and variants around a base color as the starting point for hover states, borders and background tints.
Frequently asked questions
How do I convert a HEX color to RGB?
Paste the HEX code (like #FF5733) and the RGB equivalent — along with HSL and the other formats — appears instantly, ready to copy. Free, no signup, and computed entirely in your browser.
What's the difference between HEX, RGB and HSL?
They describe the same color differently. HEX and RGB encode red, green and blue channel values — HEX in hexadecimal, RGB in decimal. HSL describes hue, saturation and lightness, which is far more intuitive when you want a lighter, darker or less saturated version of a color.
What is OKLCH and why is it better than HSL?
OKLCH is a perceptually uniform color space: equal numeric changes look like equal visual changes. Unlike HSL, it produces smoother gradients and more natural color mixes, which is why modern CSS supports it.
Can I use this tool to check accessibility contrast?
The tool shows the color in every format and generates variants. For WCAG contrast verification, take your foreground and background colors from here and check their ratio against the accessibility guidelines.
Which format should I use in CSS?
All of them work in CSS. HEX is the most compact and widely used; HSL shines when you want to derive variants by tweaking lightness; RGB is handy when values come from JavaScript or a canvas. Pick per task — the conversion here is exact either way.
Are the colors I work with sent to a server?
No. All conversions and palette generation run in your browser — no server calls, no logging — and the tool works offline once the page has loaded.