What is this tool?

Use this color code converter to translate between common web color formats. Enter a HEX, RGB, HSL, or supported CSS color name, or choose a color with the picker. For valid input, the tool shows matching HEX, RGB, HSL, and HSB values with a live color preview.

This is useful when a design handoff gives you one color format but your CSS, design token file, or documentation needs another. The converter normalizes short HEX values, rounds channel values consistently, and shows a CSS color name only when the exact color is in its supported name list.

Common use cases

Translating design values

Convert a HEX value from a design mockup into rgb(...) or hsl(...) for CSS work, or copy a normalized HEX value from an RGB color.

Checking a color quickly

Use the color picker and live preview to inspect a color before copying a code value.

Normalizing short HEX

Paste short HEX such as #f00 and copy the normalized six-digit HEX output.

Documenting design tokens

When writing color tokens for a style guide or configuration file, copy the same color in multiple formats so developers and designers can compare values easily.

How to Use

Enter a HEX, RGB, HSL, or supported CSS color name.
Or choose a color with the color picker.
Review the HEX, RGB, HSL, and HSB outputs.
Use Copy next to the value you need.

Notes / Limitations

This is a color format converter. It does not check accessibility contrast or generate palettes.

HEX input supports #RGB, #RRGGBB, RGB, and RRGGBB.
RGB input uses rgb(r, g, b) with integer values from 0 to 255.
HSL input uses hsl(h, s%, l%) with hue 0-360 and percentages 0-100.
HSB is shown as an output value only; this tool does not accept HSB input.
Alpha channels, lab(), lch(), and oklch() are not supported by this tool.
CSS color names are a supported subset, not the full CSS named color list.

Privacy / local processing

Color parsing and conversion run in the browser with JavaScript. The color converter code does not send your color input to a server.

Use the JSON Formatter & Validator when color values are stored in JSON design tokens or API responses.
Use the Base64 Encoder / Decoder when you are working with small inline assets or data URI examples that include color values.

Color Code Converter