Calculate hue angle and chroma from CIELAB a* and b* or from RGB and HEX color values, plus the hue difference and delta H*ab between two colors.
Hue Angle Formula
The following is an RGB opponent-axis hue formula, a different model from the widget’s piecewise HSV/HSL hue. The widget also calculates CIELAB hue as atan2(b*, a*) normalized to 0–360°, chroma as hypot(a*, b*), inverse CIELCh coordinates, and shortest hue differences. Choose the intended model explicitly.
Variables:
- H is the hue angle in degrees (0 to 360)
- R is the red value (use the same scale for R, G, and B, e.g., 0 to 255 or 0 to 1)
- G is the green value (same scale as R and B)
- B is the blue value (same scale as R and G)
This formula derives from the opponent-color model, where the two chrominance axes are a = 2R – G – B (red vs. cyan) and b = sqrt(3)(G – B) (yellow vs. blue). The atan2 function resolves the correct quadrant automatically, producing an angle that spans the full 360-degree circle without requiring manual quadrant adjustments.
What is a Hue Angle?
A hue angle is a numerical representation of color identity expressed as a position on a 360-degree color wheel. It isolates the color family (red, orange, yellow, green, cyan, blue, violet, magenta) from brightness and saturation, making it possible to describe any chromatic color with a single angular value. The concept originates from the CIE (Commission Internationale de l’Eclairage) color appearance models and is now used across HSV, HSL, HSI, CIELAB (L*a*b*), and CIELUV (L*u*v*) color spaces.
In the sRGB/HSV color wheel, the primary and secondary colors are evenly spaced at 60-degree intervals: red sits at 0 degrees, yellow at 60, green at 120, cyan at 180, blue at 240, and magenta at 300. Any color between two anchor points carries a hue angle proportional to its position. For fully saturated colors, each 1-degree shift corresponds to approximately a 4.25-unit change in one RGB channel (on the 0 to 255 scale). Hue is undefined for equal RGB channels (white, black or gray) because the chromatic channel difference is zero; hue is not a measurement of a single dominant wavelength.
Color Wheel Hue Angle Reference Table
The table below lists the hue angle, RGB values (0 to 255 scale), hex code, and approximate color name for every 30-degree increment around the sRGB color wheel. All entries are at full saturation and maximum value (HSV S = 100%, V = 100%).
| Hue Angle | R | G | B | Hex | Color Name |
|---|---|---|---|---|---|
| 0 | 255 | 0 | 0 | #FF0000 | Red |
| 30 | 255 | 128 | 0 | #FF8000 | Orange |
| 60 | 255 | 255 | 0 | #FFFF00 | Yellow |
| 90 | 128 | 255 | 0 | #80FF00 | Chartreuse |
| 120 | 0 | 255 | 0 | #00FF00 | Green |
| 150 | 0 | 255 | 128 | #00FF80 | Spring Green |
| 180 | 0 | 255 | 255 | #00FFFF | Cyan |
| 210 | 0 | 128 | 255 | #0080FF | Azure |
| 240 | 0 | 0 | 255 | #0000FF | Blue |
| 270 | 128 | 0 | 255 | #8000FF | Violet |
| 300 | 255 | 0 | 255 | #FF00FF | Magenta |
| 330 | 255 | 0 | 128 | #FF0080 | Rose |
| 360 | 255 | 0 | 0 | #FF0000 | Red (wraps) |
Hue Angle Across Color Spaces
The calculator offers CIELAB hue and sRGB HSV/HSL hue as separate tasks. The RGB opponent-axis formula above is background information and is not the widget’s HSV/HSL result. Angles from different models should not be compared as though they share a single color wheel.
HSV and HSL (Hexagonal Models)
HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness) both compute hue by first identifying which RGB component is the maximum and minimum, then applying a piecewise formula based on the ordering of R, G, and B. The resulting hue is identical in both models because only the saturation and brightness/lightness definitions differ. These models were introduced in the mid-1970s for interactive color selection in computer graphics and remain the basis for nearly every color picker in modern design software.
CIELAB (L*a*b*) and CIELCh
In the CIELAB color space, hue angle is calculated from the a* and b* opponent-color coordinates as h_ab = atan2(b*, a*). The a* axis runs from green (negative) to red (positive), and the b* axis runs from blue (negative) to yellow (positive). Red corresponds to approximately 0 degrees, yellow to approximately 90, green to approximately 180, and blue to approximately 270. The cylindrical form of CIELAB is called CIELCh, where L* is lightness, C* is chroma, and h is the hue angle. For the widget’s approximate sRGB preview, D65/2° is assumed; blank L* uses 50 for the preview only. Out-of-gamut preview colors are clipped and identified. This differs from the D50-adapted Lab used by CSS lab(). CIELAB aims at approximate perceptual uniformity, but equal hue-angle differences do not guarantee equal perceived color differences. Chroma, lightness, reference white, viewing conditions and known model nonuniformities matter. The optional C*/L* ratio is not interchangeable with HSV or HSL saturation.
CIELUV (L*u*v*)
CIELUV defines hue angle similarly to CIELAB but uses the u* and v* coordinates: h_uv = atan2(v*, u*). The CIE adopted CIELAB and CIELUV simultaneously in 1976 because neither could achieve consensus as the sole perceptual color space. In practice, CIELUV is favored for applications involving additive color mixing (such as television and LED lighting) because its chromaticity diagram produces straight-line additive mixtures, while CIELAB is more common in subtractive color industries like printing and paint.
Hue Angle Comparison Across Color Spaces
The table below compares the approximate hue angle values for common colors across RGB/HSV, CIELAB, and CIELUV. These values illustrate how the same perceived color maps to different angular positions depending on the color model. CIELAB and CIELUV values are approximate because they depend on the illuminant (D65 assumed here).
| Color | RGB/HSV Hue | CIELAB h_ab (approx.) | CIELUV h_uv (approx.) |
|---|---|---|---|
| Red (255, 0, 0) | 0 | 40 | 12 |
| Yellow (255, 255, 0) | 60 | 102 | 85 |
| Green (0, 255, 0) | 120 | 136 | 128 |
| Cyan (0, 255, 255) | 180 | 197 | 192 |
| Blue (0, 0, 255) | 240 | 306 | 266 |
| Magenta (255, 0, 255) | 300 | 328 | 316 |
RGB/HSV hue is perfectly linear (60-degree spacing between primaries and secondaries), while CIELAB and CIELUV hue angles are nonlinearly distributed. This nonlinearity reflects human color perception: our eyes are more sensitive to differences in certain spectral regions than others. For example, sRGB red at 0 degrees maps to roughly 40 degrees in CIELAB because the Lab space compresses the red-to-yellow perceptual range relative to RGB.
Complementary Colors and Hue Angle Arithmetic
The 360-degree circular structure of hue enables straightforward color harmony calculations. A complementary color sits exactly 180 degrees opposite on the wheel: if a color has a hue of 30 degrees (orange), its complement is at 210 degrees (azure). Split-complementary schemes use the two colors at +150 and -150 degrees from the base. Triadic schemes space three colors at 120-degree intervals, and tetradic (square) schemes use four colors at 90-degree intervals. These relationships hold in any hue-based color model, though the visual results depend on whether you are working in perceptually uniform spaces (CIELAB) or device-dependent spaces (sRGB/HSV).
Hue Angle in Food Science and Quality Control
Outside of digital color theory, hue angle is one of the most widely used metrics in food science for quantifying color changes during ripening, cooking, and storage. Researchers measure hue angle using colorimeters or spectrophotometers in the CIELAB space, where it directly tracks the transition from one color family to another as a biological or chemical process unfolds.
In tomato ripening studies, the hue angle drops from roughly 110 degrees (yellow-green, immature) to approximately 35 degrees (red, fully ripe) as lycopene accumulates and chlorophyll degrades. This predictable trajectory allows packing houses to sort tomatoes by hue angle rather than relying solely on subjective visual grading. Similarly, in table grape research, hue angle values have been recorded declining from about 83 (yellow-green skin) down to approximately 14 (deep purplish-red) during veraison and full maturity, a shift that correlates tightly with anthocyanin concentration and total soluble solids.
Banana ripeness is another well-documented case: the fruit’s hue angle transitions from roughly 100 degrees (green peel, high starch) through 85 to 90 degrees (yellow, commercial sale stage) and eventually below 70 degrees (brown-spotted, overripe). Olive oil quality assessment relies on hue angle to distinguish between green-gold oils (high chlorophyll, hue near 100 to 105 degrees) and yellow oils (carotenoid-dominant, hue closer to 85 to 90 degrees). In meat science, fresh beef typically registers a hue angle near 35 to 40 degrees (bright cherry red), and deviations above 50 degrees indicate metmyoglobin formation and surface browning.
Typical Hue Angle Ranges for Common Foods (CIELAB)
The table below summarizes published hue angle ranges measured in the CIELAB color space for various food products at different quality stages. All values assume a D65 illuminant and 10-degree standard observer.
| Food Product | Stage / Condition | Hue Angle Range (h_ab) |
|---|---|---|
| Tomato | Mature green | 105 to 115 |
| Tomato | Turning / breaker | 60 to 80 |
| Tomato | Fully ripe | 30 to 40 |
| Banana | Green (stage 1 to 2) | 95 to 105 |
| Banana | Ripe yellow (stage 5 to 6) | 80 to 90 |
| Banana | Overripe / spotted | 60 to 75 |
| Table grape (red variety) | Veraison onset | 70 to 85 |
| Table grape (red variety) | Fully ripe | 10 to 25 |
| Fresh beef | Bright cherry-red (oxymyoglobin) | 30 to 42 |
| Fresh beef | Brown surface (metmyoglobin) | 48 to 65 |
| Extra-virgin olive oil | Green-gold (chlorophyll-rich) | 98 to 108 |
| Extra-virgin olive oil | Yellow (carotenoid-dominant) | 83 to 92 |
| Orange juice | Fresh-squeezed | 70 to 80 |
| Wheat flour | Standard white | 88 to 95 |
Hue Angle in Computer Vision and Image Processing
Hue-based color models became central to computer vision beginning in the late 1970s because separating hue from brightness makes object segmentation far more robust under varying lighting conditions. When a camera views an apple on a conveyor belt, the brightness of the apple’s surface changes depending on the overhead lamp angle, but the hue remains relatively stable. Segmenting by hue angle rather than raw RGB dramatically reduces false boundaries caused by shadows and specular highlights.
In autonomous vehicle research, hue thresholding is used to detect traffic signals: red signals cluster near 0 degrees and 350 to 360 degrees, green signals near 120 to 140 degrees, and amber signals near 30 to 50 degrees. Medical imaging applies hue segmentation to distinguish tissue types in histology slides, where stained cell nuclei occupy a hue band (roughly 220 to 260 degrees in hematoxylin staining) distinct from cytoplasm (300 to 340 degrees in eosin). Agricultural drone imagery uses hue angle to classify crop health, with healthy chlorophyll-rich vegetation mapping to the green hue band (90 to 150 degrees) and stressed or senescent foliage shifting toward yellow (60 to 90 degrees).
Hue Angle in Printing and Color Grading
In offset and digital printing, hue angle measurements from spectrophotometers serve as the primary quality metric for press calibration. A pressman might target a Pantone spot color with a specific CIELAB hue angle and chroma, then adjust ink film thickness and dot gain until the printed sheet falls within a tolerance of plus or minus 2 degrees. The ISO 12647 standard for process printing defines acceptable hue variation for each process ink (CMYK), and all major press certification programs (G7, PSO, Fogra) reference hue angle tolerances when evaluating print fidelity.
In video post-production, color grading tools (such as the vectorscope in DaVinci Resolve, Adobe Premiere, and Avid Media Composer) display hue angle as a radial position on a circular scope. Colorists shift hue angles to create mood: a teal and orange grade pushes shadow hues toward 180 to 200 degrees (teal) and highlight hues toward 25 to 40 degrees (warm orange). Hue-versus-hue curves allow selective rotation of one hue range while leaving others untouched, an operation that is only coherent because hue is an angular, circular quantity.
Quadrant Handling and Edge Cases
A common source of error in hue angle computation is incorrect quadrant resolution. The basic arctan(b/a) function only returns values in the range of -90 to +90 degrees, which covers only two of the four quadrants. To recover the full 0 to 360 degree range, you must either use the atan2(b, a) function (which most programming languages and calculators provide) or manually add offsets: add 180 degrees when a is negative, and add 360 degrees when the result is negative. McLellan et al. (1995) formalized this for CIELAB data in their influential paper on multi-quadrant Hunter L,a,b hue calculations.
Several edge cases produce undefined or degenerate hue values. When R = G = B (any shade of gray, including black and white), both chrominance axes equal zero and the atan2 function returns 0 by convention, but the result carries no meaningful color information. When solving the inverse problem (computing one RGB channel from a known hue and two other channels), certain hue angles create singularities: at 0 and 180 degrees, red cannot be uniquely determined from green and blue alone; at 60 and 240 degrees, blue becomes indeterminate; and at 120 and 300 degrees, green becomes indeterminate. The widget does not solve a missing RGB channel. Its inverse task converts C* and h to a* and b*. It reports hue as undefined at zero chroma or equal RGB channels, without discarding the defined chroma or other color quantities. The Lab hue component ΔH*ab is a nonnegative magnitude in CIELAB units, distinct from the signed angular difference.
