Color Picker

Pick a color and read off HEX, RGB and HSL instantly.

Overview

Picks, samples, and converts web colors interactively between HEX, RGB, HSL, and HSV formats with instant alpha transparency controls.

Formula & Calculation Method

HEX = '#' + R_hex + G_hex + B_hex | HSL = Transform_RGB_To_Polar_Cylindrical(R, G, B)

Converts color coordinates across additive RGB color spaces and human-intuitive Hue, Saturation, and Lightness models.

Worked Example: Converting Calciverse Saffron Color

Inputs: HEX Value = #f59e0b

  • RGB decomposition: R = 245, G = 158, B = 11
  • HSL conversion: Hue = 38°, Saturation = 92%, Lightness = 50%
  • CSS declaration: rgb(245, 158, 11) | hsl(38, 92%, 50%)

Summary: HEX = #f59e0b | RGB = (245, 158, 11) | HSL = (38°, 92%, 50%)

Common Use Cases

  • UI Design System Tokens: Generate consistent color palettes and interactive hover states for web apps.
  • Tailwind CSS Configuration: Convert brand hex colors into RGB coordinate triples for Tailwind CSS variable opacity.
  • Digital Illustration: Sample and inspect exact color values for canvas and vector graphics.

Frequently Asked Questions

What is the difference between HSL and RGB?

RGB defines colors by red, green, and blue light intensities; HSL defines colors by hue angle (0-360°), saturation percentage, and lightness percentage.

What do the extra two digits in an 8-digit HEX code mean?

They represent the alpha transparency channel (e.g. #f59e0bff is 100% opaque, #f59e0b80 is 50% transparent).

How does the EyeDropper API work?

Modern browsers provide a native screen magnifying eyedropper that samples pixel colors directly from your desktop display.

Related Calculators & Tools