Color Converter: Convert Between HEX, RGB, HSL & CMYK

Why Convert Colors?

Different tools and contexts use different color formats:

CSS uses HEX (#3B82F6) and RGB/HSL

Design tools like Figma prefer HEX

Print requires CMYK values

Programming often uses RGB tuples

Accessibility calculations use HSL lightness

Supported Formats

HEX

6-digit hexadecimal: `#3B82F6`

RGB

Red, Green, Blue values 0-255: `rgb(59, 130, 246)`

HSL

Hue, Saturation, Lightness: `hsl(217, 91%, 60%)`

CMYK

Cyan, Magenta, Yellow, Key (Black): `cmyk(76%, 47%, 0%, 4%)`

How to Use

Visit the [Color Converter](/tools/color-converter)

Enter a color in any supported format

Or use the visual color picker

See all format conversions instantly

Browse generated shades and tints

Color Shades

The tool automatically generates a palette of shades from light to dark, helping you create consistent color scales for your design system.

Use Cases

CSS Development

Copy colors in the exact CSS format you need.

Design Systems

Build consistent color palettes with generated shades.

Cross-Platform Design

Convert between web (HEX/RGB) and print (CMYK) formats.

Accessibility

Use HSL lightness values to check contrast ratios.

Frequently Asked Questions

What's the best color format for CSS?

HEX is most common, but HSL is increasingly popular because it's more human-readable and easier to manipulate.

Does it support alpha/transparency?

The converter handles solid colors. Append alpha values manually (e.g., rgba or hsla) to the copied output.

How are shades generated?

Shades are created by progressively darkening the base color in the HSL color space.