How to convert HEX to RGB for CSS

Design tools export colours as HEX codes. CSS supports both HEX and rgb(), but rgb() is required when you need to set individual channel values or combine a colour with an opacity using rgba(). This guide shows how to convert any HEX code to its RGB equivalent in one step, with the exact CSS string ready to paste.

Step-by-step guide

1. Copy the HEX code from Figma or Sketch: Right-click the element in your design tool and copy the colour as HEX. It may be in the format #ff6600 or ff6600 (without the hash).
2. Paste into the Color Converter: Paste the HEX code. The converter immediately returns the rgb() and rgba()-ready values alongside HSL and HSV.
3. Paste the css field into your stylesheet: Copy the 'css' field (e.g. rgb(255, 102, 0)) and paste it into your CSS property. For transparent variants, change rgb() to rgba() and add a fourth value: rgba(255, 102, 0, 0.5) for 50% opacity.

Frequently asked questions

Can I use HEX directly in CSS instead of converting?

Yes. CSS supports HEX natively. Convert to RGB only when you need rgba() for opacity, when a library requires numeric channel values, or when generating colour values programmatically in JavaScript.

How do I convert HEX to RGB in JavaScript without a tool?

const hex = '#ff6600'; const r = parseInt(hex.slice(1,3),16); const g = parseInt(hex.slice(3,5),16); const b = parseInt(hex.slice(5,7),16); — or use the REST API to avoid writing the parsing logic.