Color Picker

Color Picker lets you choose an sRGB color and copy equivalent HEX, RGB, or HSL notation. These are different textual representations of the same displayed color, useful in CSS, design handoff, and prototypes.

Browser-first workflowProcessing details below

What it does

Use the visual picker for exploration or type a six-digit HEX code for an exact value. The output cards update together and can be copied individually.

HEX and RGB encode red, green, and blue channel amounts. HSL describes hue, saturation, and lightness, which can be more intuitive for creating related variants.

How to use this tool

  1. Choose or enter a color: Use the color field or type a complete #RRGGBB value.
  2. Compare formats: Read the equivalent HEX, RGB, and HSL cards.
  3. Copy the required notation: Select the output format expected by your stylesheet or design system.
  4. Verify in context: Test the color against its real background and text size, including hover and dark-mode states.

Input and output

Input

  • Visual browser color control
  • Six-digit HEX value such as #2563EB

Output

  • HEX
  • rgb(r, g, b)
  • hsl(h, s%, l%)
  • Copy buttons for each notation

How it works

HEX and RGB

#2563EB corresponds to decimal red 37, green 99, and blue 235.

HSL conversion

HSL reorganizes the same sRGB channels into hue angle, saturation, and lightness; rounding can make a round-trip differ slightly.

Practical example

Scenario
Convert a brand blue for CSS documentation.
Action
Enter the HEX value and read the output cards.
Input
#2563EB
Expected result
RGB is rgb(37, 99, 235); HSL is approximately hsl(221, 83%, 53%).

Limitations

  • The picker uses the browser’s sRGB-oriented color input and does not manage CMYK, Pantone, LAB, or ICC profiles.
  • Screen calibration, brightness, and ambient light change perceived color.
  • Rounded HSL values may not convert back to the identical channel values.
  • A color value alone does not guarantee accessible contrast.

Frequently Asked Questions

Do HEX, RGB, and HSL produce different colors?

Not when they represent the same sRGB channels; they are alternate notations.

Does HEX support transparency here?

The current input accepts six-digit #RRGGBB values, not alpha transparency.

Why does a color look different on another screen?

Displays, profiles, brightness, and viewing conditions differ.

How do I know whether text is readable?

Check the foreground/background pair with a contrast checker at the actual text size and weight.