conversion
Color Converter
Convert colors between HEX, RGB, HSL, and HSV — instantly and in any direction.
What is Color Converter?
Colors in digital design and web development are represented in multiple formats, each suited to a different context. HEX (#ff6600) is the format used in CSS, HTML, and design tools like Figma and Photoshop. RGB (red, green, blue) is the native format of screens — each channel has a value from 0 to 255. HSL (hue, saturation, lightness) is the most human-readable format: you adjust hue to pick a colour family, saturation to move from grey to vivid, and lightness to go from black to white. HSV/HSB (hue, saturation, value/brightness) is used in colour pickers in design software and is similar to HSL but with different semantics for the third channel. Converting between formats is necessary when moving colours from a design tool (HEX or HSL) to CSS code (rgb()), from a colour picker (HSV) to a data attribute (HEX), or when programmatically generating palettes by rotating the hue in HSL.
How to use Color Converter
- Paste any colour value: Enter the colour in any supported format: a HEX code with or without the # prefix (including shorthand #abc), an rgb() or hsl() CSS function string, or bare r,g,b values separated by commas.
- Read all four formats: The converter returns HEX, RGB, HSL, and HSV simultaneously — no need to convert multiple times. The css field for RGB and HSL gives you the exact CSS function string ready to paste into a stylesheet.
- Copy the format you need: Copy the HEX value for Figma or design tools, the rgb() or hsl() CSS string for stylesheets, or the individual HSL values when building a colour palette programmatically.
Frequently asked questions
- What is the difference between HSL and HSV?
- Both use hue and saturation, but the third channel differs. In HSL, lightness 0 is black and lightness 100 is white — fully saturated colours sit at lightness 50. In HSV, value 0 is black and value 100 is the full colour — to get white you reduce saturation, not value. Design software colour pickers typically use HSV; CSS uses HSL.
- Does the tool support alpha / transparency?
- Not currently. This converter handles opaque colours only. For RGBA or HSLA, append the alpha channel manually to the CSS output: rgb(255, 102, 0) → rgba(255, 102, 0, 0.5).
- Why does the HEX output look different from what Figma shows?
- Figma may show colour values in a colour profile other than sRGB (e.g. Display P3). If your design file uses a wide-gamut colour space, the HEX values are in P3 and will look different when converted to sRGB. Check your Figma document colour profile under File → Document Colours.
- What is the hue value in HSL and how is it measured?
- Hue is measured in degrees around a colour wheel from 0 to 360. Red is at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300°. Pure red appears at both 0° and 360°. In CSS, hsl(120, 100%, 50%) is fully saturated green at 50% lightness.
- How do I find the HEX code for a colour on a website?
- Open DevTools (F12 or right-click → Inspect), select the element, and look for the color or background-color property in the Styles panel. Click the colour swatch to open the browser's colour picker, which shows the HEX, RGB, and HSL values. Alternatively, use the browser's eyedropper tool (available in Chrome and Firefox DevTools) to sample any colour on screen.
- Why does the same colour look different on different screens?
- Colour rendering depends on the display's colour profile, brightness calibration, and gamut. A #FF0000 red on an sRGB monitor looks the same as on another sRGB monitor when both are properly calibrated. On a wide-gamut Display P3 screen, the same HEX value may appear more vivid because the display can show more saturated reds. Professional design work uses colour-managed workflows to ensure consistency across devices.