Color Converter

Convert colors for CSS and design tokens

Design work often moves between HEX values in mockups, RGB values in screenshots, and HSL values in CSS systems. Convert one format into the others and check the live swatch before copying a value into code.

Use short or long HEX values, rgb(...) values, or hsl(...) values. The readable foreground hint helps you decide whether dark or light text is likely to be clearer on the selected color.

Common color tasks

• Convert a HEX color from a design file into RGB for CSS.
• Find the HSL version of a brand color for easier lightness changes.
• Check a pasted color against a visible swatch before using it.

Best for

• Moving colors between design tools, CSS variables, and docs.
• Turning HEX into RGB or HSL for code snippets.
• Checking a color against a visible swatch before it becomes a token.

Color conversion examples

• #1e63ff converts to RGB and HSL values that can be copied into CSS.
• rgb(30, 99, 255) can be checked against a swatch before it becomes a design token.
• HSL output is useful when you want to adjust hue, saturation, or lightness by hand.

Related design tools

Use the Image Compressor when preparing visual assets, the Markdown Preview for design notes, and the Lorem Ipsum Generator for checking color and text density in mockups.

FAQ

Which color formats are supported?

The converter supports HEX, RGB, and HSL input formats.

Does this calculate full accessibility contrast?

It gives a basic readable foreground hint. Use a dedicated contrast checker for WCAG decisions.

Can I paste CSS color names?

Not yet. Use HEX, RGB, or HSL values.

Can I copy values into CSS variables?

Yes. The converted values are plain CSS-compatible color formats.

Does the swatch prove a color is accessible?

No. The swatch is a visual check. Use a full contrast checker for accessibility decisions.