Color Converter (HEX ↔ RGB ↔ HSL)

Color Converter (HEX ↔ RGB ↔ HSL) is evaluated from Red, Green and Blue. The calculation reports HEX, RGB and Hue.

Results

Thanks — we’ve logged this for review.

About the Color Converter (HEX ↔ RGB ↔ HSL)

Color Converter (HEX ↔ RGB ↔ HSL) is treated here as a quantitative relation between Red, Green and Blue and HEX, RGB, Hue and Saturation.

The calculator uses a multi formula configuration. Each reported value is read as a direct evaluation of the stored rules with the declared field formats and units.

Formula basis:
HEX: convert each R/G/B value to 2-char hex string
HSL: derive hue (0-360 deg), saturation (0-100%), lightness (0-100%) from normalized RGB

Interpret the outputs in the order shown by the result fields. Optional inputs affect only the outputs that depend on those variables.

Formula & How It Works

The calculation applies the following relations exactly as recorded in the metadata:

HEX: convert each R/G/B value to 2-char hex string
HSL: derive hue (0-360 deg), saturation (0-100%), lightness (0-100%) from normalized RGB

Each output field is produced by substituting the supplied inputs into the relevant relation and then applying the declared rounding or text format.

Worked Examples

Example 1: Pure red: RGB(255, 0, 0)

Inputs

r: 255 g: 0 b: 0
HEX: #FF0000. RGB: rgb(255, 0, 0). Hue: 0 deg. Saturation: 100%. Lightness: 50%. HSL: hsl(0, 100%, 50%)

With Red = 255, Green = 0 and Blue = 0 as the stated inputs, the result is HEX = #FF0000, RGB = rgb(255, 0, 0) and Hue = 0 deg. Each value corresponds to the declared output fields.

Example 2: Tailwind CSS blue-500: RGB(59, 130, 246)

Inputs

r: 59 g: 130 b: 246
HEX: #3B82F6. RGB: rgb(59, 130, 246). Hue: 217.2 deg. Saturation: 91.2%. Lightness: 59.8%. HSL: hsl(217, 91%, 60%)

With Red = 59, Green = 130 and Blue = 246 as the stated inputs, the result is HEX = #3B82F6, RGB = rgb(59, 130, 246) and Hue = 217.2 deg. Each value corresponds to the declared output fields.

Example 3: Forest green: RGB(34, 139, 34)

Inputs

r: 34 g: 139 b: 34
HEX: #228B22. RGB: rgb(34, 139, 34). Hue: 120 deg. Saturation: 60.7%. Lightness: 33.9%. HSL: hsl(120, 61%, 34%)

With Red = 34, Green = 139 and Blue = 34 as the stated inputs, the result is HEX = #228B22, RGB = rgb(34, 139, 34) and Hue = 120 deg. Each value corresponds to the declared output fields.

Example 4: Pure white: RGB(255, 255, 255)

Inputs

r: 255 g: 255 b: 255
HEX: #FFFFFF. RGB: rgb(255, 255, 255). Hue: 0 deg. Saturation: 0%. Lightness: 100%. HSL: hsl(0, 0%, 100%)

With Red = 255, Green = 255 and Blue = 255 as the stated inputs, the result is HEX = #FFFFFF, RGB = rgb(255, 255, 255) and Hue = 0 deg. Each value corresponds to the declared output fields.

Common Use Cases

  • Convert HEX color to RGB for CSS
  • Find HSL values for web design
  • Convert colors between design software formats