Color Code Converter
Convert between RGB, HEX, HSL, HSV, and CMYK with visual color picker and contrast checker
Color Picker
Preview
Color Formats
Color Palette
Contrast Checker
Sample Text
This is smaller sample text for readability testing.
About this tool
The color code converter is a free tool for designers and developers that converts between RGB, HEX, HSL, HSV, and CMYK. You can pick a color intuitively, auto-generate palettes of complementary and analogous colors, and check the WCAG contrast ratio between text and background. It is useful for designing websites and apps, managing brand colors, and verifying accessibility.
How to use
- 1 Pick a color with the color picker or type a HEX value directly.
- 2 The values for RGB, HSL, HSV, and CMYK appear simultaneously.
- 3 Review the auto-generated palette of complementary and analogous colors.
- 4 Use the contrast checker to confirm that text is readable on the background.
How it works
RGB mixes red, green, and blue light, each from 0 to 255, and is the basis of on-screen color. HEX is the same RGB written as two hexadecimal digits per channel, so #FF8800 means red 255, green 136, blue 0. HSL describes color by hue (0-360 degrees), saturation, and lightness, which is closer to human perception and easy to fine-tune. HSV replaces lightness with value (brightness). CMYK uses cyan, magenta, yellow, and black ink amounts and is meant for print. The contrast ratio is the ratio of the relative luminance of two colors; WCAG recommends at least 4.5:1 for normal text at the AA level and 7:1 at AAA.
Frequently asked questions
What is the difference between HEX and RGB?
They carry the same color information. RGB lists red, green, and blue as decimals 0-255, while HEX packs them as two hex digits each. #FF0000 and rgb(255,0,0) are the same red.
What does the WCAG AA contrast level mean?
It is a readability standard: normal-size text needs a contrast ratio of at least 4.5:1 against its background, while large text is allowed at 3:1.
Why use HSL?
Because you can change saturation or lightness while keeping the hue, making it intuitive to build same-hue variations and hover shades.
Why do colors shift between CMYK and RGB?
RGB is additive light mixing and CMYK is subtractive ink mixing, with different gamuts. Vivid on-screen colors can look duller in print.
What are complementary and analogous colors?
Complementary colors sit opposite on the color wheel for strong contrast, while analogous colors are neighbors for a harmonious look. The tool computes both automatically.
Related tools and uses
To understand how HEX works, the number base converter helps. For design dimensions, see the length unit converter, and for web layout the px, rem, and em conversions are useful too.