FixThatAppAll Tools
Design

Color Code Converter

Convert HEX, RGB, and HSL color values.

How This Tool Works

The Color Code Converter translates between the four main color formats used in web design and graphics: HEX (#667eea), RGB (102, 126, 234), HSL (228°, 75%, 66%), and CMYK (56%, 46%, 0%, 8%). Each format is used in different contexts — HEX in CSS and HTML, RGB in digital graphics and CSS, HSL for intuitive color adjustments (hue rotation, lightness changes), and CMYK in print production. Converting between them is a common need when matching colors across design tools.

How to Use

  1. Enter the color value in field A in any supported format (HEX with #, RGB as r,g,b, HSL as h,s%,l%).
  2. Click Run. The result shows the equivalent values in all other formats.
  3. For CSS: use the HEX or RGB output directly in your stylesheet.
  4. For print: use the CMYK output and give it to your print supplier.

Common Questions

Why does converting HEX→CMYK→HEX not always give the same result?

RGB and CMYK have different color gamuts. Some screen colors (especially bright blues and greens) cannot be accurately reproduced in print CMYK. The conversion goes through a standard formula but colors at the edges of the gamut may shift slightly.

When should I use HSL instead of HEX?

HSL is easier to reason about: hue (0–360° color wheel position), saturation (intensity), lightness (brightness). To make a color 20% lighter, simply increase the L value by 20. This is much harder with HEX. Use HSL in CSS variables for theming.

What does the # mean in a HEX color code?

The # is a CSS syntax prefix indicating what follows is a hex color value. The six hex digits are pairs for red (rr), green (gg), and blue (bb): #rrggbb. #667eea = R:102, G:126, B:234 in decimal.

Read the full guide →