HEX, RGB & HSL Color Converter

Supports HEX, RGB, RGBA, HSL, HSLA, and CSS color names.

How This Tool Works

This free online Color Converter lets you translate color coordinates between HEX, RGB, RGBA, HSL, HSLA, and standard CSS names in real time. Simply input any format in the box, and the tool will instantly output equivalents for other color spaces. Additionally, it calculates WCAG-compliant contrast ratios against white, black, and gray backgrounds to help you ensure visual accessibility, and displays auto-generated harmonies—complementary, triadic, and analogous palettes—alongside tints and shades of your color.

Using This Tool in Figma

When working in Figma, color management is crucial for maintaining design system consistency. Use this tool to check contrast ratios before defining your primary and secondary color tokens. You can copy HEX arrays directly into Figma's color picker or register them as Color Variables or Styles in your UI library. Applying the calculated complementary or analogous harmonies directly to your components ensures balanced layouts and accessible interfaces.

Frequently Asked Questions

What is a HEX color code?

A HEX color code is a 6-digit hexadecimal value representing Red, Green, and Blue light intensities, widely used in web development and design tools like Figma.

How do I check contrast ratios?

Input your text color in the converter to view its real-time contrast ratio against black, white, and gray backgrounds. Ensure a ratio of at least 4.5:1 for normal text to satisfy WCAG AA standards.

What is the difference between RGB and HSL?

RGB defines colors using Red, Green, and Blue light mixtures. HSL represents color through Hue (degrees on a color wheel), Saturation (percentage of intensity), and Lightness (percentage of white or black), which is much more intuitive for designers.

Which color format does Figma use?

Figma supports HEX, RGB, HSL, and HSB formats in its properties panel. You can easily copy any values generated by this converter and paste them straight into Figma's color input.