Color Picker & Converter

HEX, RGB, HSL color conversion tool.

Developer Tools
Tool Area
Visual Color Swatch
HEX Code
RGB Representation
HSL Representation
Color Coordinates Adjuster
RGB Color Channels
R (26)
G (107)
B (60)
HSL Color Dimensions
Hue (145°)
Sat (61%)
Light (26%)

About this tool

Formatting color coordinate conversions cleanly across multiple design parameters (HEX, RGB, HSL) is a baseline requirement when designing stylesheets, templates, and UI systems. Our Color Picker features real-time canvas coordinate updates.

Color Coordinate Conversion Formulations

Transforming RGB values into the standard HSL (Hue, Saturation, Lightness) space model involves scaling variables proportionally, locating boundaries based on chromatic maximum and minimum limits:

max = max(R, G, B),   min = min(R, G, B),   d = max - min
L = (max + min) / 2

If the maximum and minimum parameters are equal (max = min), the color is a grayscale value, meaning the hue and saturation remain at 0. For chromatic configurations, the Saturation (S) is calculated:

S = L > 0.5 ? d / (2 - max - min) : d / (max + min)

This mathematical translation allows developers to coordinate color systems mathematically without manual adjustments.

Related tools