Color Calculator
Convert colors between Hex, RGB, HSL, HSV, and CMYK, and view complementary and inverted colors.
Instructions
Change any valid color value and the other formats update automatically. The Darker and Lighter buttons adjust the selected color’s HSL lightness. The complementary color rotates the color-wheel hue by 180 degrees. The inverted color subtracts each RGB channel from 255.
Similar Calculators
- Angle Converter
Convert between degrees, radians, turns, arcminutes, arcseconds, gradians, angular mils, and other angle units.
- Area Converter
Convert between metric, imperial, land, and scientific area units.
- Currency calculator
Currency calculator allows you to convert between currencies. Exchange between dollars, pounds, euro, yen, yuan, and many more.
- Data Size Calculator
This calculator allows you to calculate data size in bits, nibbles, bytes, kilobytes, megabytes, gigabytes, and terabytes.
- Density Converter
Convert between kilograms per cubic meter, grams per cubic centimeter, grams per milliliter, pounds per cubic foot, and other density units.
Color Calculator
Use the Color Calculator to compare Hex, RGB, HSL, HSV, and approximate CMYK values for the same color. Enter any supported screen-color value to update the selected, complementary, and inverted colors.
Hex
What it is: Hex is a compact way to write an RGB color with hexadecimal digits. A six-digit value contains two digits each for red, green, and blue; three-digit Hex is shorthand that doubles each digit.
How it works: Each channel ranges from 00 to FF, equal to 0 through 255 in decimal. For example, #336699 means red 51, green 102, and blue 153.
Common uses: Websites, CSS, design systems, and digital brand guides.
Advantages: Short, widely recognized, and easy to copy. Limitations: The numbers do not directly describe hue, saturation, or lightness, and Hex alone does not guarantee identical appearance on every display.
RGB
What it is: RGB describes the red, green, and blue light used by screens.
How it works: Each channel usually ranges from 0 to 255. Higher values add more of that light; rgb(0, 0, 0) is black and rgb(255, 255, 255) is white.
Common uses: Displays, cameras, scanners, web graphics, and application interfaces.
Advantages: Directly matches how screens produce color and converts exactly to six-digit Hex. Limitations: It is less intuitive for making perceptual changes and is not the native model used by most printing processes.
HSL
What it is: HSL organizes a color by hue, saturation, and lightness.
How it works: Hue is an angle from 0° to 359° around a color wheel. Saturation controls color intensity, and lightness runs from black at 0% through the color at 50% to white at 100%.
Common uses: CSS, interface themes, and creating lighter, darker, or related color variations.
Advantages: Usually easier for people to adjust than RGB. Limitations: Equal numerical changes do not always look equally large, and HSL is still a screen-oriented model rather than a print specification.
HSV
What it is: HSV describes hue, saturation, and value (brightness).
How it works: Hue is an angle, saturation measures the distance from gray, and value ranges from black at 0% to the brightest version available at 100%.
Common uses: Color pickers, image-editing software, computer vision, and selecting shades visually.
Advantages: Its brightness control often feels natural in a color picker. Limitations: Like HSL, it is not perceptually uniform and does not predict printed output.
CMYK
What it is: CMYK represents cyan, magenta, yellow, and black inks used in many printing processes.
How it works: Percentages estimate how much of each ink is needed. Unlike RGB light, inks subtract reflected light from white paper.
Common uses: Commercial printing, packaging, posters, brochures, and print-ready artwork.
Advantages: It relates to physical ink production. Limitations: A simple RGB conversion cannot account for a particular printer or press. The CMYK values shown here are approximations; actual printed color depends on printer, inks, paper, calibration, and color profiles.
Formulas
These formulas describe the calculator's standard mathematical conversions. RGB channels use 0–255 unless stated otherwise; rounded display values can produce small differences when converted back.
Hex ↔ RGB
Formula: For #RRGGBB, convert each two-digit base-16 pair to decimal: R = hex(RR), G = hex(GG), B = hex(BB). In the other direction, convert each RGB channel to a two-digit hexadecimal number and join the pairs.
Variables: R, G, and B are red, green, and blue channel values from 0 to 255.
Explanation: This is an exact change of notation, not a change of color. Three-digit Hex expands by doubling each digit: #f00 becomes #ff0000.
RGB → HSL
Formula: Normalize r = R/255, g = G/255, and b = B/255. Let max = max(r,g,b), min = min(r,g,b), and d = max − min. Then L = (max + min)/2. If d = 0, H = 0 and S = 0. Otherwise S = d/(2 − max − min) when L > 0.5, or S = d/(max + min) otherwise. Hue is selected by the largest channel and scaled to 0°–360°.
Variables: Lowercase RGB values and max, min, d, L, and S use 0–1; H is an angle.
Explanation: Lightness is the midpoint of the brightest and darkest channels; hue and saturation come from their difference. Hue is conventionally set to 0 when saturation is zero because gray has no unique hue.
HSL → RGB
Formula: Normalize h = H/360, s = S/100, and l = L/100. If s = 0, set r = g = b = l. Otherwise set q = l(1+s) when l < 0.5, or q = l + s − ls; set p = 2l − q, then evaluate the hue-offset function at h+1/3, h, and h−1/3 for red, green, and blue. Multiply each result by 255.
Variables: H is degrees; S and L are percentages; p and q define the channel range.
Explanation: The hue-offset function wraps around the color wheel and interpolates each RGB channel. Final channels are rounded to whole numbers.
RGB → HSV
Formula: Normalize RGB and calculate max, min, and d as above. Then V = max; S = 0 when max = 0, otherwise S = d/max. Hue uses the same largest-channel cases as HSL and is scaled to degrees.
Variables: V is value, S is saturation, and H is hue.
Explanation: Value follows the brightest RGB channel. Gray colors have zero saturation and no unique hue.
HSV → RGB
Formula: Normalize s = S/100 and v = V/100. Set c = vs, x = c(1 − |((H/60) mod 2) − 1|), and m = v − c. Choose the appropriate ordering of (c,x,0) for the hue's 60° sector, add m to every channel, and multiply by 255.
Variables: c is chroma, x is the sector's second channel, and m raises all channels to the requested value.
Explanation: Hue selects a sector of the RGB color cube. Final channels are rounded, so a round trip can differ slightly.
RGB → CMYK
Formula: Normalize RGB to r, g, and b. Set K = 1 − max(r,g,b). For colors other than pure black, C = (1 − r − K)/(1 − K), M = (1 − g − K)/(1 − K), and Y = (1 − b − K)/(1 − K). For black, use C = M = Y = 0 and K = 1.
Variables: C, M, Y, and K are cyan, magenta, yellow, and black proportions from 0 to 1.
Explanation: Multiply by 100 for percentages. This device-independent arithmetic is only an estimate; professional conversion uses printer and paper color profiles.
CMYK → RGB (approximate)
Formula: With CMYK normalized to 0–1, R = 255(1−C)(1−K), G = 255(1−M)(1−K), and B = 255(1−Y)(1−K).
Variables: CMYK values are ink proportions; RGB values are screen-light channels.
Explanation: The formula reverses the simple conversion mathematically. It cannot reproduce press behavior, ink limits, dot gain, or color-profile adjustments.
Complementary color
Formula: Convert RGB to HSL, set H' = (H + 180°) mod 360°, keep saturation and lightness unchanged, then convert back to RGB.
Variables: H is the selected hue and H' is the opposite hue.
Explanation: Rotating halfway around the hue wheel produces a useful digital complement. Other artistic color systems can define complements differently.
Inverted color
Formula: R' = 255 − R, G' = 255 − G, and B' = 255 − B.
Variables: Unprimed channels are the selected RGB color; primed channels are the inverted result.
Explanation: Every channel is reflected across the midpoint of its range. An inverse is a channel operation and is not always the same as an HSL complementary color.
Frequently Asked Questions
What is Hex?
Hex is a compact RGB notation commonly used on the web. Six digits store red, green, and blue as hexadecimal values from 00 to FF; three digits are a shorthand form.
What is RGB?
RGB describes colors by the amounts of red, green, and blue light a screen combines. Each channel normally ranges from 0 to 255.
What is HSL?
HSL describes hue, saturation, and lightness. It is useful when you want to rotate a hue or create lighter and darker variations.
What is HSV?
HSV describes hue, saturation, and value. Its value control follows the brightest RGB channel and is common in visual color pickers.
What is CMYK?
CMYK represents cyan, magenta, yellow, and black inks. It is a common working model for commercial print production.
Why is CMYK only approximate?
A mathematical conversion does not know which press, printer, ink set, paper, calibration, or color profile will be used. Professional print preparation converts colors with the correct ICC profile and production settings.
Why doesn't printed color match the screen?
Screens emit RGB light while paper reflects light through inks. Display calibration, brightness, ambient lighting, paper color, ink, and printer profiles can all change the result.
What is a complementary color?
This calculator finds the complementary color by moving the hue 180° around the HSL color wheel while keeping saturation and lightness the same.
What is an inverted color?
An inverted color subtracts each RGB channel from 255. It is a mathematical channel inverse and can differ from a hue-wheel complement.
Which color format should I use for web design?
Hex and RGB are reliable choices for exact screen colors. HSL is often more convenient for readable theme variables and controlled lighter or darker variants.
Which color format should I use for printing?
Use the CMYK values and color profile required by your printer or print provider. Treat calculator conversions as planning estimates, not final press-ready specifications.
Credits
Color Calculator
Version: 1.1