All guides

How to convert colors (HEX, RGB, HSL)

Convert color values between HEX, RGB, and HSL with Toolora’s Color Converter.

Supported formats

Paste a HEX value like #FF5733, an RGB value like rgb(255, 87, 51), or an HSL value like hsl(14, 100%, 60%). Compact RGB triples such as 255, 87, 51 also work.

Steps

1) Open Color Converter. 2) Paste any supported color — HEX, RGB, and HSL appear together as you type. There is no Run button. 3) Copy the HEX, RGB, or HSL line you need. Color Picker is the visual sibling.

Design tip

Use HEX in CSS variables, RGB when you need channel math, and HSL when adjusting hue or lightness feels clearer. Color Picker at /tools/color-picker is the visual sibling if you do not have a value yet. Image Color Picker at /tools/image-color-picker samples a photo you choose in this tab. Gradient, shadow, and border generators consume those tokens — see the CSS how-to.

Worked example

#10b981 is a green used on Toolora accents; RGB and HSL appear beside it as you paste. 8-digit hex with alpha may not round-trip on every CSS property — check your target. Number Base Converter is for integers, not #RRGGBB. Image Color Picker samples a photo into a hex; Image Base64 only embeds the file.

Privacy

Values stay in the tab. Related: /tools/color-picker, /tools/image-color-picker, /tools/gradient-generator, /tools/css-formatter. Common mistakes: treating compact “255,87,51” as HSL, mixing #RGB shorthand without checking the converter accepts it, and guessing a photo hex by eye instead of Image Color Picker. 8-digit hex with alpha may not apply on every CSS property. Number Base Converter is for integers, not channels. Close the tab if the swatch is an unreleased brand.