Color Conversion

🎨

Color Converter: Hex to RGB, CMYK, HSL

Convert hex to RGB, CMYK, HSL and back. One color in four formats — hex, RGB, HSL, CMYK. For web, design, and print.

Color Conversion Tool

Enter a color in any format; all others update instantly. Use the copy icon next to each value to copy to clipboard.

R
G
B
H
S
L
C
M
Y
K
Hex: #ff6900
RGB: 255, 105, 0
HSL: 25°, 100%, 50%
CMYK: 0%, 59%, 100%, 0%

Accessibility / Contrast

WCAG 2.1 contrast ratio of current color vs white and black. Normal text: AA 4.5:1, AAA 7:1. Large text: AA 3:1, AAA 4.5:1.

On White (#FFFFFF)

2.89:1

Sample text:

The quick brown fox jumps over the lazy dog

AA Normal FailAA Large FailAAA Normal FailAAA Large Fail

On Black (#000000)

7.27:1

Sample text:

The quick brown fox jumps over the lazy dog

AA Normal PassAA Large PassAAA Normal PassAAA Large Pass

Color Harmony

Click a swatch to set it as the primary color.

Complementary, Analogous (×2), Triadic

Recent Colors

Select or enter colors to see them here. History is saved in your browser.

How to Use the Hex to RGB & CMYK Converter

  1. Enter your color in any format: type a hex code (e.g. #4285F4) in the Hex field, use the color picker, or enter RGB, HSL, or CMYK values. All four formats update instantly.
  2. Use the copy icon next to each value (Hex, RGB, HSL, or CMYK) to copy that value to your clipboard. A brief “Copied!” message confirms the copy. Paste directly into CSS, design tools, or print specs.
  3. Check contrast and harmony below the preview: the Accessibility/Contrast section shows WCAG 2.1 AA and AAA pass/fail against white and black. The Color Harmony swatches (Complementary, Analogous, Triadic) are clickable — click any swatch to set it as the primary color.

Understanding Color Spaces

  • HEX (Web/Digital): A hex color code (e.g. #FF6900) represents red, green, and blue as two hexadecimal digits each. It’s the standard in HTML, CSS, and most design tools for screens.
  • RGB (Screen Light): Red, Green, Blue as three numbers from 0 to 255. Additive color: light combines to form colors. Used in CSS rgb(), JavaScript, and APIs.
  • HSL (Human-centric design): Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Easier for designers to adjust “same color, lighter/darker” or “same family, different hue.” Supported in CSS as hsl().
  • CMYK (Print/Ink): Cyan, Magenta, Yellow, and Key (black) as percentages. Subtractive color used in printing. Screen colors are converted to CMYK for print; the conversion is approximate.

Common Design Colors

ColorHexRGB
White#FFFFFF255, 255, 255
Black#0000000, 0, 0
Google Blue#4285F466, 133, 244
Success Green#34A85352, 168, 83

When to Use Each Format

Hex (#RRGGBB)

Standard in HTML, CSS, and design tools. Short form #RGB expands to #RRGGBB. Use for web and most digital color pickers.

RGB (R, G, B)

Same as hex but as three 0–255 numbers. Used in CSS rgb(), JavaScript, and APIs. Good when you need separate channel values.

HSL (H, S, L)

Hue is the “color angle”; saturation and lightness make it easier to brighten or darken. Use in CSS hsl() and in UI sliders.

CMYK (C, M, Y, K)

Print standard. Screen (RGB) colors don’t map perfectly to CMYK; this converter uses a standard conversion so you can get approximate print values.

Color Conversion FAQ

? How do I convert hex to RGB?

Split the hex code into three pairs (RR, GG, BB) and convert each from hexadecimal to decimal. #FF6900 is FF=255, 69=105, 00=0, so RGB(255, 105, 0). Use the tool above to paste any hex and get RGB (and HSL, CMYK) instantly.

? What is the difference between RGB and CMYK?

RGB is additive (light): red, green, blue combine to make colors on screens. CMYK is subtractive (ink): cyan, magenta, yellow, and black used in printing. The same visual color has different numeric values in each; converting between them is approximate because RGB can show colors that CMYK cannot reproduce exactly.

? When should I use HSL?

HSL is useful when you want to adjust a color: change Hue to shift the color, Saturation for vivid vs gray, Lightness for lighter or darker. CSS supports hsl() and hsla(). Many design tools use HSL sliders because they’re easier to reason about than RGB for tweaking.

? Does hex support transparency?

Standard hex is #RRGGBB (opaque). Eight-digit hex adds alpha: #RRGGBBAA (e.g. #FF690080 for 50% opacity). This converter shows RGB, HSL, and CMYK for the color; for alpha you’d add it separately in CSS (e.g. rgba() or #RRGGBBAA).