RGB · HSL · CMYK · HEX
RGB/HSL/CMYK Converter
Change one value and the preview plus every color notation updates right away.
Color preview
Start with the HEX field or color picker; samples and reset stay on the same row.
Valid color.
Use a copy button to grab the notation you need.
Adjust color values
RGB, HSL, and CMYK values are arranged in matched-height rows.
RGBScreen color
HSLDesign adjustment
CMYKPrint estimate
HEXWeb code
HEX also expands #RGB shorthand to six digits automatically.
Color conversion guide
A color code is one color written in several notations
This converter keeps one color aligned across HEX, RGB, HSL, and CMYK. Read HEX as the web code, RGB as the red-green-blue screen channels, HSL as a way to tune hue, saturation, and lightness, and CMYK as a print-oriented ink estimate. That split makes it easier to choose the right value for CSS, design notes, or a print handoff.
Change HEX or a slider, and the other values follow immediately
There is no calculate button. Editing the HEX field, color picker, RGB/HSL/CMYK number fields, or sliders updates the preview and every copyable result for the same color.
- Choose a color first. Enter a value such as #3498DB in the HEX field or pick a color visually. Three-digit HEX is expanded before the result is shown.
- Adjust the model you need. RGB uses 0–255 channels, HSL uses hue 0–360° plus saturation and lightness percentages, and CMYK uses 0–100% ink-style percentages.
- Check preview and contrast together. The preview shows the current color while the contrast cards compare white and black text on that background.
- Copy only the notation your task needs. Use HEX, RGB, or HSL for CSS and screen work. Treat CMYK as an approximate print note, not a final press profile.
RGB, HSL, and CMYK describe the same color for different jobs
The same blue can be useful as a CSS value, a tone adjustment, or a print note. The fields on the tool separate the color-changing controls from the ways you might read that color.
HEX code and color picker
HEX writes red, green, and blue as two hexadecimal digits each, as in #RRGGBB. The color picker uses the browser’s native picker when you want to choose the same value by eye.
RGB values
Red, Green, and Blue channels run from 0 to 255. For screen color, canvas work, and CSS checks, RGB is usually the most direct representation.
HSL values
Hue is the color-wheel angle, Saturation is intensity, and Lightness is brightness. HSL is handy when you want the same color family but a lighter, darker, or calmer tone.
CMYK and contrast
CMYK is an ink-style estimate derived from the screen color. The contrast cards are separate helpers for deciding whether white or black text reads better on the current background.
Two HEX digits become one RGB channel from 0 to 255
The conversion starts from RGB. Each pair of HEX digits becomes a 0–255 decimal channel; HSL recalculates that RGB color into hue, saturation, and lightness; CMYK estimates ink percentages from the same screen color. It is not a substitute for a printer ICC profile.
Enter #FF8800 and you get the same orange in RGB, HSL, and CMYK
With #FF8800 in the HEX field, RGB reads red 255, green 136, blue 0. The same color becomes hsl(32, 100%, 50%), and the CMYK estimate centers on magenta 46.7% and yellow 100%.
This orange works better with black text
On a #FF8800 background, black text has a contrast ratio of about 8.77 while white text is about 2.39. A color can be correct and still need a separate text-color check.
Screen color and print color can share numbers but still look different
RGB and HSL are closer to screen sRGB work, while CMYK is an approximate way to talk about ink. Paper, ink, printer settings, and profiles can all change final print color, so important print jobs still need a proof.
- Copy the six-digit HEX result. Even if you enter three-digit HEX, the tool normalizes the output to a six-digit uppercase code.
- Use HSL as an adjustment view. Hue, Saturation, and Lightness are readable for tuning a color, but choose the final CSS notation according to your project rules.
- Do not treat CMYK as press-ready output. The CMYK value here is calculated from screen RGB. Brand print work should follow the printer profile and proof.
- Read contrast with context. Contrast ratio helps, but text size, weight, and nearby backgrounds still affect real readability.
Frequently asked questions
Do I need to type the # before a HEX code?
No. The tool accepts both 3498DB and #3498DB. It also accepts three-digit shorthand and displays the result as a six-digit HEX code.
Do RGB and HSL describe the same color?
Yes. RGB writes the red, green, and blue channels; HSL rewrites the same color as hue, saturation, and lightness.
Can the CMYK value differ from a print shop’s result?
Yes. This CMYK value is an estimate calculated from a screen RGB color. Real print color can change with paper, ink, device, and ICC profile.
How should I read the contrast number?
A higher number means the text color stands apart more from the background. For the default #3498DB, black text is 6.66 and white text is 3.15, so the tool recommends black text.