Color Converter
Enter a HEX color and instantly get the RGB, HSL, and component values side by side.
How to use this tool
- 1Click the colour swatch on the left to open the native browser colour picker, or type a 6-digit HEX code (e.g. #3b82f6) directly into the HEX input.
- 2The RGB, HSL, RGB object, and HSL object values update instantly below.
- 3Click any value to select it, then copy it to your clipboard.
- 4A colour preview swatch at the bottom confirms the selected colour visually.
About Color Converter
This color converter takes a HEX value and shows RGB, HSL, and structured object forms so you do not have to retype channels by hand. Design handoffs often mix formats — Figma shows HEX, engineering asks for RGB, motion specs want HSL, and someone pastes a token as an object literal.
Wrong conversions create subtle brand drift. A designer says #3b82f6, a developer approximates rgb(59, 130, 247), and the off-by-one difference may not show up until a screenshot comparison. HSL is useful for adjusting lightness in themes, while HEX remains dominant in CSS and design tools.
Pick a color with the native swatch or type a six-digit HEX code. The tool derives RGB channels, HSL components, and object-style representations you can paste into JS themes. A preview swatch confirms what you converted. Updates are immediate as HEX changes. Everything runs locally in the page.
HEX parsing expects the common six-digit form with optional #. Shorthand three-digit HEX may need expansion depending on acceptance rules — prefer six digits for clarity. sRGB assumptions apply; Display P3 or CMYK print conversions are out of scope. HSL hue is degrees, saturation and lightness are percentages — keep units straight when pasting into CSS hsl(). Rounding channels to integers is normal for 8-bit CSS colors.
Convert a brand HEX into RGB for an email client that prefers channels. Derive HSL to build a lighter hover state by adjusting L only. Paste RGB object forms into a React theme file. Check that a copied HEX matches the preview before shipping icons. Align design tokens across documentation that mixes notations.
People search hex to rgb converter, hex to hsl online, css color converter hex rgb hsl, and color picker hex to rgb object. This tool is not a contrast checker, not a full palette generator, and not a color-blindness simulator.
This flow centers opaque HEX — transparency needs rgba/hsla elsewhere. Mixing CSS color spaces like lab() without conversion support will not parse as HEX. Uppercase vs lowercase HEX is semantically identical but can fail naive string compares in tests — normalize. Display calibration means the swatch is indicative, not a hardware proof.
Establish a single canonical HEX list for brand colors and generate RGB or HSL derivatives through one shared function in code. Hand conversion in tickets invites drift when two people round differently. Use this page for quick checks and prototyping, then commit the canonical HEX to the token package.
Dark mode tokens often keep the same hue while changing lightness. Starting from HEX, reading HSL, nudging L, and converting back is a practical workflow for first-pass dark surfaces. Always re-check contrast after those nudges — a converter does not enforce accessibility. Pair with a contrast tool before you call a theme ready.
Code examples
JavaScript
function hexToRgb(hex) {
const n = parseInt(hex.replace("#", ""), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}CSS
/* Use in CSS custom properties */
:root {
--brand: #3b82f6;
--brand-rgb: 59, 130, 246;
}
.box { background: rgba(var(--brand-rgb), 0.2); }Frequently asked questions
Implementations round hue, saturation, and lightness slightly differently at 8-bit boundaries. Small drifts of a degree or percent are common and usually invisible. Compare the HEX or RGB sources of truth when two tools disagree. If brand compliance is strict, lock tokens to HEX and derive other forms from the same function.
Malformed input should not produce a trustworthy color; the UI may refuse to update or show a partial parse depending on validation. Correct to six hex digits 0-9 and a-f. Retry after fixing length and characters. Invalid HEX is a scenario you want caught before CSS ships.
Eight-digit HEX with alpha is not the same as classic six-digit opaque HEX. If the tool focuses on six-digit input, strip alpha and handle transparency in rgba separately. Forcing alpha into a six-digit field is a misuse scenario. Keep opacity as a separate token when needed.
HEX is compact and ubiquitous in web design tools. RGB matches some graphics APIs and email quirks. HSL is convenient for programmatic lighten/darken. Many systems store HEX as canonical and compute the rest. Pick one source of truth to avoid drift across notations. In practice, re-run Color Converter on a smaller sample after each change so you can see which input detail caused the mismatch. Keep the original nearby until you trust the export.
Conversion gives you equivalent notations for the same sRGB color. Contrast checking evaluates readability between two colors against WCAG ratios. Convert first if your inputs arrive in mixed formats, then run contrast on the pair you will actually ship. Neither replaces the other. In practice, re-run Color Converter on a smaller sample after each change so you can see which input detail caused the mismatch. Keep the original nearby until you trust the export.
Displays vary in calibration, brightness, and color management. The mathematical conversion can be correct while perception shifts. Use relative comparisons and brand references rather than absolute memory. Critical print work needs a managed color pipeline beyond this CSS-oriented converter. In practice, re-run Color Converter on a smaller sample after each change so you can see which input detail caused the mismatch. Keep the original nearby until you trust the export.
Object forms are meant for code structures with numeric channels; CSS strings need rgb() or hsl() wrappers and units. Check whether you are pasting into JS or CSS before shipping. Mismatching formats is a common integration scenario in theme files. Adjust wrappers to match the consumer.
Prefer six-digit HEX for unambiguous conversion. Some parsers expand shorthand, others may not. If shorthand fails, expand it manually to six digits. Consistency in tokens prevents half the codebase using short form and half using long form. In practice, re-run Color Converter on a smaller sample after each change so you can see which input detail caused the mismatch. Keep the original nearby until you trust the export.
Extra characters outside the hex digits can invalidate parsing and leave the preview stale. Remove semicolons, spaces, and rgb wrappers before pasting. Retry with a clean six-digit token. Dirty paste from stylesheets is a frequent failure scenario during handoffs. In practice, re-run Color Converter on a smaller sample after each change so you can see which input detail caused the mismatch. Keep the original nearby until you trust the export.
Many converters accept both 3b82f6 and #3b82f6, but inconsistent acceptance across tools creates false error reports. If the preview does not update, add the hash and retry. Normalize tokens in your design system to always include #. Missing-hash paste is a frequent handoff scenario from spreadsheets.
Related Tools
PX to REM Converter
Convert pixel values to REM units (and back) with a configurable root font size.
Length Converter
Convert between mm, cm, m, km, inches, feet, yards, and miles — all values shown at once.
Weight Converter
Convert between mg, g, kg, metric tons, oz, lb, and stone — all values shown at once.