Online color format converter: HEX to RGB, RGB to HEX, HSL conversion. Supports alpha channel (transparency). Essential tool for designers and frontend developers.
TL;DR: Free online color converter for HEX, RGB, and HSL with alpha channel support. Essential tool for designers and frontend developers. Runs locally in your browser.
For local tools, open DevTools → Network and search your input — it should not appear in requests.
Usage Guide
One color, many notations: CSS wants HEX/RGB/HSL (with alpha), print wants CMYK, design tools speak HSV. Paste short HEX, 4/6/8-digit HEX, rgb()/rgba()/hsl()/hsla() — this tool keeps alpha, expands classic and modern CSS forms, shows an R/G/B/A breakdown, quick contrast on white/black, Tailwind nearest matches, shades, and WCAG checks.
1. Convert and take
- Enter #fff / #ff000080 / rgba(255,0,0,0.5) / hsl(217 91% 53% / 0.8) or use the picker; HEX, HEX8, RGB, RGBA, modern rgb()/hsl(), HSL, HSLA, HSV, and CMYK expand instantly.
- Copy what you need — opaque CSS uses HEX/RGB; translucent work uses HEX8/RGBA/HSLA or modern space syntax; the R·G·B·A breakdown sits under the preview.
- Use shade generation for a full 50–900 scale; verify AA/AAA in the contrast block; a quick on-white / on-black ratio sits next to the preview.
2. Input and output boundaries
RGB describes light channels; HSL is closer to how humans reason about hue and lightness. The converter maps your paste into coordinates you can reason about — and carries transparency along.
- Input: #RGB/#RGBA/#RRGGBB/#RRGGBBAA, rgb()/rgba(), hsl()/hsla() (comma or space); alpha is preserved in HEX8/RGBA/HSLA and modern-syntax outputs.
- Common CSS colors (including named colors and some modern color spaces) parse in; shade and Tailwind helpers still use opaque sRGB channels.
- Bad HEX length (not 3/4/6/8) or an unclosed color function gets a specific hint instead of a generic failure. CMYK is profile-free approximation; Tailwind match uses Euclidean RGB distance.
3. Two frequent traps
- Screen color ≠ print color: HEX is screen sRGB and CMYK conversion is approximate — always match print against a physical swatch, treat the tool's CMYK as a reference only.
- Check text contrast against WCAG: body text needs 4.5:1 against its background (AA), large text 3:1. Use the built-in contrast check instead of eyeballing — especially gray text on white. Translucent colors also need the real backdrop for effective contrast.
4. Design-to-code path
Design tools often hand you HEX or RGBA with alpha. For CSS, opaque colors are simplest as HEX/RGB; translucent interaction states (hover overlays, chip backgrounds) fit RGBA/HSLA or modern space syntax better. When aligning to Tailwind, use nearest-match distance — a large distance means the color is outside the default palette and belongs in a custom theme, not forced into the closest utility class.
5. Shades vs a single brand color
- Shade generation derives a 50–900 lightness ramp for buttons, hovers, tints, and borders — it is not a harmony-rule palette (that is the palette generator's job).
- When rebranding, swap the whole scale via CSS variables or theme config instead of hunting hard-coded HEX values.
- Re-check contrast when using light shades as text backgrounds — a pretty 100-step gray on tint often fails AA.
6. How related tools chain
Single-color formats, contrast, nearest Tailwind, and shades live here. Pull dominant colors from an image with the color extractor; build harmony sets with the palette generator; run dedicated accessibility matrices in the contrast checker. The path is extract → convert/shade → contrast QA — not one page owning an entire design system.
FAQ
HEX (3/4/6/8 digits), RGB, RGBA, HSL, HSLA, HSV, CMYK, and modern space-separated syntax (e.g. rgb(r g b / a)). Enter any common form and the rest expand instantly with an R/G/B/A breakdown; translucent colors keep copyable alpha forms.
No. The CMYK values are a profile-free approximation for on-screen reference — HEX lives in screen sRGB, a different world from ink rendering. For print, match against physical swatches or your print workflow.
The contrast block checks WCAG thresholds — at least 4.5:1 for body text (AA) and 3:1 for large text — replacing eyeball judgments of "looks clear enough". Nearest match suggests the closest Tailwind color by RGB Euclidean distance; a large distance means the color sits outside the default palette, so put it in a custom theme instead of forcing the nearest utility class.
It derives a full 50–900 scale from a brand color along a lightness gradient — one coherent set for buttons, hover states, light backgrounds, and borders. It is not a color-harmony rule set (that is the palette generator's job). Light shades under gray body text often fail AA, so re-run the contrast check before shipping.
When copying HEX from design annotations, check whether it is 8-digit (alpha included) — dropping those two digits yields a fully opaque color that only looks like the same hue. Some older email clients and export pipelines also accept 6-digit HEX only, in which case use an opaque approximation or composite the color over its background first.
Neither. Conversion happens instantly in the browser — free, no registration, no usage caps — and none of the color values you enter are stored or uploaded.
Related Tools
Related Articles
Online Color Converter: HEX, RGB, HSL Color Format Conversion
Learn how to use an online color converter to switch between HEX, RGB, HSL, RGBA, and HSLA. Cover alpha channels, modern CSS syntax, and contrast checks for frontend work.
Online Base64 to Image Converter: Decode Base64 Strings to Image Files
Learn how to convert Base64 encoded strings back to image files. Understand Base64 decoding principles, common image MIME types, and real-world Web development use cases.
Color Contrast Fails WCAG — How to Fix It
Design flagged as low contrast, what are WCAG AA/AAA, how to compute contrast and tune it to pass? With our color contrast checker and converter.