4,359,668
397.4
°
89
%
60.8
%
125.6
1
0.2446
3.56
5.89
0
4,359,668
397.4
°
89
%
60.8
%
125.6
1
0.2446
3.56
5.89
0
The Color Converter (RGB/HEX/HSL) calculator transforms RGB color values into their HSL (Hue, Saturation, Lightness) equivalents and computes essential accessibility metrics including perceived brightness, relative luminance, and contrast ratio against white. Color conversion is a fundamental operation in web development, graphic design, UI/UX engineering, and digital media production.
The RGB color model (Red, Green, Blue) is an additive color system where each component ranges from 0 to 255 (8 bits per channel). Combining all three channels creates a 24-bit color space capable of representing $$256^3 = 16{,}777{,}216$$ distinct colors. Every pixel on your screen is defined by an RGB triplet. In web development, RGB colors are typically expressed in hexadecimal notation: #RRGGBB, where each pair of hex digits represents one channel (e.g., #4285F4 for Google Blue).
The hex value is calculated as a single integer: $$\text{hex} = R \times 65536 + G \times 256 + B = R \times 16^4 + G \times 16^2 + B$$. This packs three 8-bit channels into a single 24-bit number. Understanding this conversion is essential for bitwise color manipulation, shader programming, and embedded systems where memory is constrained.
The HSL color model (Hue, Saturation, Lightness) provides a more intuitive way to reason about color. Hue is the angular position on the color wheel (0-360°), where 0° is red, 120° is green, and 240° is blue. Saturation (0-100%) measures color intensity — 0% is gray, 100% is fully vivid. Lightness (0-100%) controls brightness — 0% is black, 50% is the pure color, and 100% is white. HSL is preferred by designers because adjusting a color's shade, tint, or tone maps naturally to its three axes.
The conversion from RGB to HSL involves normalizing channel values to the [0,1] range, computing the chroma (difference between max and min channels), and deriving hue from the dominant channel. The formulas handle several edge cases: achromatic colors (where all channels are equal) have undefined hue and zero saturation, and the hue calculation must account for which channel is dominant and wrap around the 360° circle correctly.
Perceived brightness uses the ITU-R BT.601 luma formula: $$Y = 0.299R + 0.587G + 0.114B$$. This weighting reflects the human eye's unequal sensitivity to different wavelengths — green appears brightest, followed by red, then blue. A value below 128 indicates a dark color, above 128 indicates a light color. This is critical for determining whether text should be white or black on a colored background.
Relative luminance (WCAG 2.1 standard) applies gamma correction before weighting, using the sRGB transfer function. The resulting luminance value is used to compute contrast ratios as defined by the Web Content Accessibility Guidelines. A contrast ratio of at least 4.5:1 is required for normal text (AA), and 7:1 for enhanced accessibility (AAA). Our calculator computes the contrast ratio against white (#FFFFFF), helping developers ensure their color choices meet accessibility standards.
Whether you are building a design system, implementing a color picker, optimizing accessibility compliance, or simply exploring the mathematical relationships between color models, this converter provides all the essential metrics in one place.
The RGB to HSL conversion proceeds in several steps:
1. Normalize: Scale each channel to [0, 1]: $$R' = R/255, \quad G' = G/255, \quad B' = B/255$$
2. Chroma: Compute max, min, and delta: $$C_{\max} = \max(R', G', B'), \quad C_{\min} = \min(R', G', B'), \quad \Delta = C_{\max} - C_{\min}$$
3. Lightness: $$L = \frac{C_{\max} + C_{\min}}{2}$$
4. Saturation: $$S = \begin{cases} 0 & \text{if } \Delta = 0 \\ \frac{\Delta}{1 - |2L - 1|} & \text{otherwise} \end{cases}$$
5. Hue: $$H = \begin{cases} 0° & \text{if } \Delta = 0 \\ 60° \times \left(\frac{G'-B'}{\Delta} \mod 6\right) & \text{if } C_{\max} = R' \\ 60° \times \left(\frac{B'-R'}{\Delta} + 2\right) & \text{if } C_{\max} = G' \\ 60° \times \left(\frac{R'-G'}{\Delta} + 4\right) & \text{if } C_{\max} = B' \end{cases}$$
6. Perceived brightness: $$Y_{\text{BT.601}} = 0.299R + 0.587G + 0.114B$$
7. Relative luminance (WCAG): Apply sRGB gamma correction, then: $$L_{\text{rel}} = 0.2126 R_{\text{lin}} + 0.7152 G_{\text{lin}} + 0.0722 B_{\text{lin}}$$
8. Contrast ratio vs white: $$CR = \frac{1.05}{L_{\text{rel}} + 0.05}$$
Hue at 0° or 360° is red; 60° is yellow; 120° is green; 180° is cyan; 240° is blue; 300° is magenta. Saturation at 0% is a pure gray; at 100% is the most vivid version of that hue. Lightness at 50% gives the pure color; lower values darken toward black, higher values lighten toward white. Perceived brightness below 128 means the color is dark and should use white text overlay; above 128 should use dark text. The contrast ratio against white should be at least 4.5 for WCAG AA text compliance and at least 3.0 for large text. Values below 3.0 indicate the color is too light to use as text on a white background.
Inputs
Results
Google Blue has a hue of ~217° (blue range), high saturation (89.5%), and moderate lightness (60.8%). Perceived brightness of 120 makes it dark — white text works well on this background. Contrast ratio of 4.23:1 vs white nearly meets WCAG AA for normal text.
Inputs
Results
Pure red has hue 0°, 100% saturation, and 50% lightness — the purest expression of red. Despite being vivid, its perceived brightness is only 76.2 (dark) because the human eye is least sensitive to red wavelengths. Relative luminance is 0.2126.
Each RGB channel (0-255) is converted to a two-digit hex number (00-FF). The hex color code is the three values concatenated: #RRGGBB. For example, RGB(255, 128, 0) = #FF8000. Mathematically: hex = R*65536 + G*256 + B.
HSL uses Lightness (0%=black, 50%=pure color, 100%=white), while HSV/HSB uses Value/Brightness (0%=black, 100%=pure color). HSL is symmetric — adding white and adding black are equivalent operations. HSV is more common in color pickers; HSL is used in CSS.
The human eye has the highest density of cone cells sensitive to green wavelengths (around 555nm). The BT.601 luma weights (R=0.299, G=0.587, B=0.114) reflect this biological sensitivity. This is why night vision goggles display in green.
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) and 7:1 for enhanced readability (AAA level). Large text (18pt+ or 14pt bold) needs only 3:1 for AA. Maximum possible contrast is 21:1 (black on white).
To lighten a color, increase the L (lightness) value toward 100%. To darken, decrease L toward 0%. To desaturate (make more gray), decrease S toward 0%. To create a complementary color, add 180° to the hue.
No. The sRGB color space covers approximately 35% of all colors visible to the human eye (the CIE 1931 chromaticity diagram). Wide-gamut displays (DCI-P3, Adobe RGB) cover more, and HDR formats extend the luminance range, but no display can reproduce all visible colors.
When R=G=B (any shade of gray, including black and white), there is no dominant color channel, so the hue angle on the color wheel is meaningless. By convention, achromatic colors are assigned a hue of 0° and saturation of 0%.
sRGB uses a piecewise gamma function: linear below 0.03928, and a power curve of 2.4 above. This approximates the nonlinear response of CRT monitors and human brightness perception. The linearization formula is: L = (C+0.055)/1.055)^2.4 for C > 0.03928.
24-bit color (8 bits per channel) can represent 256 x 256 x 256 = 16,777,216 unique colors. This is often called True Color. 32-bit color adds an 8-bit alpha (transparency) channel but does not increase the color count.
Modern CSS supports hex (#RRGGBB), rgb(R, G, B), hsl(H, S%, L%), and the newer oklch() and lab() functions. HSL is most intuitive for manual color adjustment. Hex is most compact. For accessibility, always verify contrast ratios regardless of the format used.
Roboculator Team
The Roboculator Team explains calculations, planning tools, and practical formulas in clear language for real-life situations.
How helpful was this calculator?
Be the first to rate!
