conversion
Color Converter
Convert colors between HEX, RGB, HSL, and HSV — instantly and in any direction.
Color Converter
Convert colors between HEX, RGB, HSL, and HSV — instantly and in any direction.
What is this?
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
- 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.
FAQ
- 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 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.