Rgb Hsl Hsv Converter
Convert units with the Rgb Hsl Hsv Converter — enter a value and get accurate converted results instantly using verified formulas.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
H = atan2(sqrt(3)(G-B), 2R-G-B) | S(HSL) = delta/(1-|2L-1|) | L = (max+min)/2
Where R, G, B are normalized to 0-1 range, max and min are the largest and smallest RGB components, delta is max minus min. Hue is computed from the dominant channel and mapped to 0-360 degrees. HSL Saturation depends on lightness, while HSV Saturation equals delta divided by max. HSV Value equals max directly.
Worked Examples
Example 1: Converting Google Blue to HSL and HSV
Problem:Google uses the brand color #4285F4 (RGB 66, 133, 244). Convert this to HSL and HSV color spaces.
Solution:Normalize RGB: R=0.259, G=0.522, B=0.957\nMax=0.957 (B), Min=0.259 (R), Delta=0.698\nHue = ((0.259 - 0.522) / 0.698 + 4) x 60 = 217 degrees\nHSL: S = 0.698 / (1 - |2x0.608 - 1|) = 0.698 / 0.784 = 89%\n L = (0.957 + 0.259) / 2 = 61%\nHSV: S = 0.698 / 0.957 = 73%, V = 96%\nCMYK: C=73%, M=45%, Y=0%, K=4%
Result:HSL(217, 89%, 61%) | HSV(217, 73%, 96%) | CMYK(73%, 45%, 0%, 4%) | Complementary: #F4C342
Example 2: Checking Accessibility of Text Color
Problem:A designer wants to use #6B7280 (gray-500) text on a white background. Does it meet WCAG AA standards?
Solution:RGB: R=107, G=114, B=128\nRelative luminance: 0.2126 x 0.137 + 0.7152 x 0.155 + 0.0722 x 0.199 = 0.154\nContrast with white: (1 + 0.05) / (0.154 + 0.05) = 1.05 / 0.204 = 5.14:1\nWCAG AA normal text (4.5:1): PASS\nWCAG AA large text (3:1): PASS\nWCAG AAA normal text (7:1): FAIL
Result:Contrast ratio 5.14:1 passes WCAG AA for both normal and large text, but fails AAA. For AAA compliance, darken to #4B5563 (gray-600).
Frequently Asked Questions
What is the difference between RGB, HSL, and HSV color models?
RGB (Red, Green, Blue) is an additive color model used in screens and digital displays where colors are created by combining red, green, and blue light at different intensities from 0 to 255. HSL (Hue, Saturation, Lightness) describes colors using a color wheel angle (0-360 degrees), saturation percentage (how vivid the color is), and lightness percentage (how bright or dark). HSV (Hue, Saturation, Value) is similar to HSL but uses Value instead of Lightness, where Value represents the brightness of the color. HSL and HSV are more intuitive for humans because they separate the color identity (hue) from its intensity and brightness, making it easier to create color variations by adjusting individual components independently.
How is the hex color code derived from RGB values?
A hex color code is a six-character representation of an RGB color where each pair of characters represents the red, green, and blue channels in hexadecimal (base-16) notation. Each channel ranges from 00 (decimal 0) to FF (decimal 255). For example, pure red is #FF0000 because red is at maximum (FF = 255), while green and blue are at zero (00 = 0). The hex code #4285F4 breaks down to R=66 (42 hex), G=133 (85 hex), B=244 (F4 hex). Hex codes are the most common color format in web development because they are compact and widely supported in CSS, HTML, and design tools. The pound sign prefix is conventional but not always required depending on the context.
What is CMYK and how does it relate to RGB?
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in printing where colors are created by absorbing light rather than emitting it. While RGB adds light to create colors on screens, CMYK removes light by applying ink on paper. Converting between RGB and CMYK involves mathematical transformations, but the conversion is not perfect because the two models have different color gamuts. RGB can display some vivid colors that CMYK cannot reproduce in print, particularly bright blues and greens. When designing for print, always work in CMYK or verify your colors convert acceptably. The Key component (K) represents black ink, which is used instead of combining maximum cyan, magenta, and yellow because pure black from CMY mixing is imperfect and wastes expensive colored ink.
How do I create color variations using HSL?
HSL makes creating color variations intuitive because each component controls a different aspect of the color. To create lighter or darker shades of the same color, keep the hue and saturation constant and adjust the lightness value. Lightness of 50% gives the pure color, lower values create darker shades approaching black, and higher values create lighter tints approaching white. To create muted or pastel versions, reduce the saturation while keeping hue and lightness the same. A saturation of 100% gives the most vivid color, while 0% produces a pure gray. To create analogous color schemes, keep saturation and lightness constant and shift the hue by 15-30 degrees in either direction. This approach is far more intuitive than trying to manipulate RGB values directly.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy