Hue to Rgb Converter
Free Hue rgb tool for art & design fundamentals. Enter values to see solutions, formulas, and educational explanations.
Formula
C = (1-|2L-1|)*S, X = C*(1-|H/60 mod 2 - 1|), m = L - C/2
HSL to RGB conversion uses chroma C (color intensity based on saturation and lightness), intermediate value X (based on hue position within its 60-degree sector), and offset m (to adjust for lightness). These values map to preliminary RGB channels based on the hue sector, then m is added to produce final 0-255 RGB values.
Worked Examples
Example 1: Converting Sky Blue Hue to RGB
Problem: Convert a sky blue color (hue 210, saturation 70%, lightness 50%) to RGB and HEX values for web design.
Solution: HSL input: (210, 70%, 50%)\nC = (1 - |2(0.5) - 1|) x 0.7 = 0.7\nX = 0.7 x (1 - |(210/60 mod 2) - 1|) = 0.7 x (1 - |1.5 - 1|) = 0.7 x 0.5 = 0.35\nm = 0.5 - 0.7/2 = 0.15\nHue 210 is in sector 180-240: R1=0, G1=X=0.35, B1=C=0.7\nR = (0 + 0.15) x 255 = 38\nG = (0.35 + 0.15) x 255 = 128\nB = (0.7 + 0.15) x 255 = 217
Result: HSL(210, 70%, 50%) = RGB(38, 128, 217) = #2680D9 | Sky Blue
Example 2: Creating a Warm Sunset Palette via Hue Rotation
Problem: Starting from warm orange (hue 25, saturation 85%, lightness 55%), generate an analogous palette spanning sunset colors.
Solution: Base: HSL(25, 85%, 55%) = #EB7A2D (warm orange)\nAnalogous -30: HSL(355, 85%, 55%) = #EB2D3E (warm red)\nAnalogous -15: HSL(10, 85%, 55%) = #EB432D (red-orange)\nAnalogous +15: HSL(40, 85%, 55%) = #EBA12D (golden)\nAnalogous +30: HSL(55, 85%, 55%) = #EBC82D (yellow)\nAll colors share the same saturation and lightness for cohesion.
Result: 5-color sunset palette from red to yellow | HSL(355-55, 85%, 55%)
Frequently Asked Questions
What is hue and how does it relate to RGB?
Hue is the attribute of a color that distinguishes it from other colors, measured as an angle from 0 to 360 degrees on the color wheel. Red is at 0 degrees, green at 120 degrees, and blue at 240 degrees, with all other colors falling between. Hue is one dimension of the HSL and HSV color models, which are cylindrical transformations of the three-dimensional RGB cube. Converting hue to RGB requires a mathematical transformation that maps the angular position on the color wheel to specific red, green, and blue channel intensities. The conversion also requires saturation and lightness (or value) to fully specify the RGB values, since hue alone only defines the color family, not its brightness or purity.
How does the HSL to RGB conversion formula work?
The HSL to RGB conversion works in three steps. First, calculate the chroma (color intensity) as C = (1 - |2L - 1|) times S, where L is lightness and S is saturation in the 0-1 range. Second, determine which 60-degree sector of the color wheel the hue falls in and calculate intermediate values X = C times (1 - |H/60 mod 2 - 1|) and m = L - C/2. Third, assign R, G, B based on the hue sector: for hue 0-60, R gets C, G gets X, B gets 0. The offset m is added to all three channels. This produces the final RGB values in the 0-1 range, which are then multiplied by 255 for 8-bit representation. The formula ensures smooth transitions between all colors around the wheel.
What happens to hue at zero saturation or extreme lightness?
At zero saturation, hue becomes meaningless because the resulting color is a shade of gray regardless of the hue value. HSL(0, 0%, 50%) and HSL(180, 0%, 50%) both produce the same medium gray RGB(128, 128, 128). Similarly, at lightness 0 percent (black) or 100 percent (white), the hue and saturation have no visible effect. These are known as degenerate cases in the HSL model. When converting from RGB to HSL, purely gray colors (where R equals G equals B) produce an undefined or arbitrary hue value, typically reported as 0 degrees. This is important to understand when programmatically manipulating colors because animating hue through gray can produce unexpected color flashes if not handled carefully.
What are the primary and secondary colors in the RGB color wheel?
In the RGB (additive) color wheel used by screens and digital design, the primary colors are red (0 degrees), green (120 degrees), and blue (240 degrees). The secondary colors, formed by mixing adjacent primaries at full intensity, are cyan (180 degrees, green plus blue), magenta (300 degrees, red plus blue), and yellow (60 degrees, red plus green). This differs from the traditional RYB (subtractive) color wheel used in painting, where the primaries are red, yellow, and blue, and the secondaries are orange, green, and purple. Tertiary colors fall at 30-degree intervals between primaries and secondaries, giving us 12 named positions on the wheel: red, orange, yellow, chartreuse, green, spring green, cyan, azure, blue, violet, magenta, and rose.
Can I animate or transition hue values smoothly in CSS?
Yes, CSS can animate hue values using transitions and animations. When using the hsl() color function with CSS transitions, the browser will interpolate between hue values, creating a smooth color shift. However, the default interpolation takes the shortest path around the color wheel, which may not always be the desired behavior. For example, animating from hsl(10, 70%, 50%) to hsl(350, 70%, 50%) will transition through 20 degrees rather than 340 degrees. CSS Color Level 4 introduces the color-mix() function and interpolation hints that give more control over the path through color space. For JavaScript animations, manually interpolating the hue value and updating hsl() produces the most predictable results, especially when you need to control the rotation direction.
How do I get the most accurate result?
Enter values as precisely as possible using the correct units for each field. Check that you have selected the right unit (e.g. kilograms vs pounds, meters vs feet) before calculating. Rounding inputs early can reduce output precision.