Hex Color Picker & Converter

What is the Hex Color Picker & Converter?

Digital color representation is a practical application of hexadecimal and positional number systems. On screens and in web design, colors are specified as mixtures of red, green, and blue light—the RGB model. Each channel is typically encoded as an 8-bit integer from 0 to 255, or equivalently as two hexadecimal digits from 00 to FF. The hex triplet #RRGGBB, such as #FF5733, compactly encodes all three channels in six characters.

The RGB model is additive: combining red, green, and blue at full intensity produces white (#FFFFFF), while zero intensity on all channels produces black (#000000). Secondary colors arise from pairs: yellow is red plus green (#FFFF00), cyan is green plus blue (#00FFFF), magenta is red plus blue (#FF00FF). Web developers, graphic designers, and UI engineers specify colors in CSS, SVG, and design tools using hex, RGB, or HSL notation interchangeably.

HSL—hue, saturation, lightness—offers an alternative color space that aligns more closely with human perception. Hue is the color angle on a wheel (0–360 degrees), saturation controls vividness (0% gray to 100% pure), and lightness controls brightness (0% black to 100% white). Adjusting HSL is often more intuitive than tweaking RGB values when you want to lighten a color or shift its tone without changing its identity.

Color conversion between HEX, RGB, and HSL involves straightforward arithmetic. Hex pairs decode to decimal channel values; RGB normalizes to 0–1 fractions for HSL computation; HSL converts back through intermediate RGB calculations. Understanding these conversions prevents mismatches between design mockups and implemented CSS, and helps debug accessibility issues related to contrast ratios.

The Hex Color Picker and Converter on Online Science Tools provides an interactive color wheel, live preview, and instant conversion among HEX, RGB, and HSL formats. Use it when writing CSS styles in the Online HTML / JS Executor, verifying brand color specifications, or learning how hex digits map to channel intensities. Cross-check hex values with the Binary Calculator and Converter to see the underlying bit patterns of each channel.

• HEX format: #RRGGBB where each pair is an 8-bit channel value (00–FF)
• RGB format: rgb(R, G, B) with each channel from 0 to 255
• HSL format: hsl(H, S%, L%) with hue 0–360, saturation and lightness 0–100%
• CSS accepts hex, rgb(), rgba(), hsl(), and hsla() color notations

Mathematical / chemical formulas

Color conversion formulas translate between hexadecimal channel pairs, decimal RGB values, and HSL cylindrical coordinates.

HEX to RGB:
  R = hex_to_dec(RR)     (00–FF → 0–255)
  G = hex_to_dec(GG)
  B = hex_to_dec(BB)

RGB to HEX:
  #RRGGBB = # + to_hex(R) + to_hex(G) + to_hex(B)
  (each channel padded to 2 hex digits)

RGB to HSL:
  R′ = R/255,  G′ = G/255,  B′ = B/255
  C_max = max(R′, G′, B′),  C_min = min(R′, G′, B′)
  L = (C_max + C_min) / 2
  S = (C_max − C_min) / (1 − |2L − 1|)   if C_max ≠ C_min, else 0
  H = 60° × [(G′−B′)/(C_max−C_min) mod 6]  (depends on which channel is max)

Example:
  #3498DB → R=52, G=152, B=219
  → hsl(204, 70%, 53%)

• Short hex notation #RGB expands to #RRGGBB by doubling each digit (e.g., #F0A → #FF00AA).
• Alpha transparency uses an additional byte: #RRGGBBAA or rgba(R, G, B, A) with A from 0.0 to 1.0.
• WCAG contrast guidelines require sufficient luminance difference between text and background colors for accessibility.

Step-by-step example: Converting #FF5733 from HEX to RGB and HSL

A designer specifies the accent color #FF5733. Convert it to RGB and HSL, and verify by converting back to hex.

1. Split the hex triplet: RR = FF, GG = 57, BB = 33.
2. Convert each pair to decimal: R = 255, G = 87, B = 51.
3. RGB result: rgb(255, 87, 51).
4. Normalize for HSL: R′ = 1.0, G′ = 87/255 ≈ 0.341, B′ = 51/255 = 0.200.
5. C_max = 1.0, C_min = 0.200. Lightness L = (1.0 + 0.200)/2 = 0.600 (60%).
6. Saturation S = (1.0 − 0.200)/(1 − |2×0.600 − 1|) = 0.800/0.800 = 1.0 (100%).
7. Hue: red is max, H = 60° × ((0.341 − 0.200)/(1.0 − 0.200)) = 60° × 0.176 = 10.6° ≈ 11°.
8. HSL result: hsl(11, 100%, 60%). Verify by converting back: should yield #FF5733.

Open the Hex Color Picker and Converter on Online Science Tools and enter #FF5733 in the hex field. The tool should instantly display rgb(255, 87, 51) and hsl(11, 100%, 60%), matching your hand calculation. Drag the color wheel to a new hue and observe how all three formats update simultaneously. Copy the hex value into a CSS rule in the Online HTML / JS Executor to preview the color on a live webpage.

Frequently asked questions

Keep learning with more calculators and study guides on Online Science Tools.

Practice problems & worked examples

Practice alongside the color picker above. Each problem includes a full worked solution so you can check your reasoning step by step.