カラーコード変換

What is Color Code Converter?

Color Code Converter instantly converts and synchronizes color values between HEX, RGB, and HSL formats. Change one format and the others update automatically, making it easy to work across design tools, CSS, and code.

Color format overview

• HEX (#RRGGBB): 6 hex digits representing red, green, and blue channels. Standard in HTML/CSS.
• RGB (rgb(R, G, B)): Each channel is a number from 0 to 255. Used in CSS and image editors.
• HSL (hsl(H, S%, L%)): Hue (0 E60°), Saturation (0 E00%), Lightness (0 E00%). More intuitive for color design.

Notes

• HEX values are case-insensitive. #ff5733 and #FF5733 are identical.
• Shorthand HEX like #f0f is automatically expanded to #ff00ff.
• Alpha (transparency) is not supported by this tool. Use rgba() or hsla() for transparency.

FAQ

Which format should I use in CSS?

All three are valid in CSS. HEX is most common for static colors. HSL is popular in design systems because it is easier to create consistent palettes by adjusting lightness or saturation.

How do I convert a Figma color to CSS?

Figma typically shows colors as HEX or RGB. Copy the HEX value from Figma's color picker and paste it here to get the RGB or HSL equivalent for use in CSS.

What is the hue value in HSL?

Hue is the color's position on a 360-degree color wheel. 0° and 360° are red, 120° is green, 240° is blue. Values between these create intermediate colors.