What is the difference between HEX and RGB?

HEX and RGB represent the same color information in different notations. RGB uses decimal values from 0 to 255 for red, green, and blue channels (e.g. rgb(255, 87, 51)). HEX encodes the same three values as two-digit hexadecimal numbers prefixed with # (e.g. #FF5733). They are interchangeable and produce identical colors.

What is HSL and when should I use it?

HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the color wheel (0 to 360 degrees), saturation controls how vivid the color is (0% to 100%), and lightness sets how bright it is (0% is black, 100% is white). HSL is more intuitive than RGB for tasks like making a color lighter, more muted, or shifting its hue, because each component maps to a human-understandable property.

What is CMYK used for?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print production. Unlike RGB which adds light (screens), CMYK subtracts light by layering ink on paper. When preparing designs for print, colors must be converted from RGB or HEX to CMYK. Note that not all screen colors can be reproduced in print, so some colors may shift during conversion. The CMYK values in this tool come from the simple formula without a print profile; a print shop converts with the profile for its paper and inks, so its values differ.

Color Converter - Troubleshooting Tools

Convert colors between HEX, RGB, HSL, HSV, and CMYK.

How Color Converter Works

Docs

What is Color Conversion?

Colors can be described in many formats. HEX codes (#FF5733) are standard in web design. RGB defines colors by red, green, and blue light. HSL uses hue, saturation, and lightness, which is more intuitive for adjusting colors. CMYK is the standard for print production.

This tool converts between all major color formats instantly as you type or pick a color.

How to Use

Enter a color the way CSS writes it: #FF5733, rgb(255 87 51 / 50%), hsl(11deg 100% 60%) or a name like tomato. Alpha is kept in HEX, RGB and HSL.
Use the color picker to select a color visually.
Click any quick color button for common presets.
All output formats update live. Click any output field to copy its value.
The Color Palette below shows harmonies based on your current color. The dice in the input loads a random example.

Supported Formats

HEX	`#FF5733` 3, 4, 6 or 8 digits; the fourth or the last two are alpha, as in `#FF573380`.
RGB	`rgb(255, 87, 51)` or `rgb(255 87 51 / 50%)`. Channels 0 to 255 or percentages; `rgba()` works too.
HSL	`hsl(11, 100%, 60%)` or `hsl(11deg 100% 60% / 0.5)`. Hue in deg, turn, rad or grad, taken around the circle: 400 is 40.
HSV	`hsv(11, 80%, 100%)` Output only. Hue, Saturation, Value, as many graphics programs show it.
CMYK	`cmyk(0%, 66%, 80%, 0%)` Output only, from the simple formula. A print shop converts with a profile for its paper and inks, so its values differ.
CSS	All 148 named colors, such as `tomato`, `coral` or `dodgerblue`, and `transparent`.

Color Harmonies

Complementary	Two colors opposite on the color wheel. High contrast, vibrant.
Analogous	Three adjacent colors on the wheel. Harmonious, low contrast.
Triadic	Three colors evenly spaced (120 degrees). Balanced and colorful.
Tetradic	Four colors at 90 degree intervals. Rich palettes, many options.
Monochromatic	One hue at different lightness levels. Cohesive and elegant.

Privacy & Security: All color conversions run entirely in your browser. No data is sent to any server.

Color Input

Output

HEX

RGB

HSL

HSV

CMYK

CSS Name

Color Palette

Color Converter

Leaving troubleshooting.tools