Color Picker – HEX, RGB, HSL & CMYK Converter
The CalcBoom Color Picker is a free online tool that lets you instantly convert any color between HEX, RGB, HSL, and CMYK formats. Whether you're a web developer needing a CSS-ready color string or a graphic designer preparing files for print, this color picker provides all the values you need in one place. It also calculates WCAG contrast ratios so you can ensure your color choices meet accessibility standards.
Choose the format you want to enter your color in.
Enter a valid 6-digit HEX color code, e.g. #3498db
Red channel value from 0 to 255.
Green channel value from 0 to 255.
Blue channel value from 0 to 255.
Hue angle in degrees (0–360).
Saturation percentage from 0% (gray) to 100% (full color).
Lightness percentage from 0% (black) to 100% (white).
Your results will appear here
How to Use This Calculator
1. Select your preferred input format using the Input Format selector — choose HEX, RGB, or HSL. 2. If using HEX, type your six-digit hex color code into the HEX Color Code field (e.g. #3498db). 3. If using RGB, drag the Red, Green, and Blue sliders to your desired channel values (0–255 each). 4. If using HSL, adjust the Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) sliders. 5. Click Calculate (or the results update automatically) to see the converted HEX, RGB, HSL, and CMYK values, the relative luminance, contrast ratios against white and black, and the closest named color.
How Color Formats Work
Colors on screens and in print are described using different mathematical models. Understanding each model helps you choose the right format for your project.
HEX (Hexadecimal)
HEX colors are written as a # followed by six hexadecimal digits, e.g. #3498DB. The first two digits represent Red, the middle two Green, and the last two Blue, each ranging from 00 (0) to FF (255). HEX is the most common format in web CSS and HTML.
RGB (Red, Green, Blue)
RGB is an additive color model used by screens. Each channel (R, G, B) has a value from 0 to 255. Mixing all three at 255 produces white; all at 0 produces black. CSS syntax: rgb(52, 152, 219).
HSL (Hue, Saturation, Lightness)
HSL is more intuitive for designers. Hue is the pure color as an angle on the color wheel (0–360°). Saturation controls color intensity (0% = gray, 100% = vivid). Lightness controls brightness (0% = black, 100% = white). CSS syntax: hsl(204, 70%, 53%).
CMYK (Cyan, Magenta, Yellow, Key/Black)
CMYK is a subtractive model used in color printing. It represents the percentage of each ink required to reproduce the color. While screens use RGB, printers use CMYK — converting between them is essential for print design work.
Conversion Formulas
HEX ↔ RGB
Split the six hex digits into three pairs and convert each from base-16 to base-10. To go back, convert each decimal 0–255 to two-digit hex and concatenate with a # prefix.
RGB → HSL
Normalize R, G, B to 0–1. Lightness L = (max + min) / 2. If max ≠ min, Saturation S = (max − min) / (1 − |2L − 1|). Hue is derived from which channel is the maximum and the ratio of differences.
RGB → CMYK
Normalize R, G, B to 0–1. K (black) = 1 − max(R, G, B). Then C = (1 − R − K) / (1 − K), and similarly for M and Y.
WCAG Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure readable text for users with visual impairments:
- AA Normal Text: contrast ratio ≥ 4.5:1
- AA Large Text / UI Components: contrast ratio ≥ 3:1
- AAA Normal Text: contrast ratio ≥ 7:1
Relative luminance is calculated by linearizing each RGB channel using the sRGB gamma curve, then weighting: L = 0.2126R + 0.7152G + 0.0722B. Contrast ratio between two luminances L1 and L2 is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.