Color Picker & Converter

Pick any color and instantly convert between HEX, RGB, and HSL formats. Copy values with a single click.

Color History
Pick colors to build your history…
Color Shades
WCAG Contrast Checker
Sample Text — Aa Bb Cc
—
Contrast Ratio
AA Normal — Fail AA Large — Fail AAA Normal — Fail AAA Large — Fail
CSS Gradient Generator

About the Color Picker & Converter

The TensorLocal Color Picker is a free browser-based tool that lets you visually select any color and instantly see its value in multiple formats: HEX, RGB, and HSL. Whether you're a web developer writing CSS, a graphic designer creating assets, or a hobbyist working on a personal project, having quick access to accurate color conversions saves significant time and prevents errors.

Color representation varies by context. HEX codes (like #4f46e5) are the most common format in web development because of their compact syntax. RGB values (Red, Green, Blue from 0–255) are used in CSS functions and many design tools. HSL (Hue, Saturation, Lightness) is often preferred by designers because it maps more intuitively to how humans perceive color — adjusting lightness or saturation is straightforward compared to tweaking individual RGB channels.

How to Use This Tool

Click the color picker swatch or use the native color input to select a color visually. You can also type directly into the HEX, RGB, or HSL input fields — all other fields update automatically in real time. Use the Copy buttons next to each format to copy the value to your clipboard, ready to paste into your code or design tool. The CSS-ready rgb() and hsl() values are also generated so you can drop them straight into a stylesheet.

Common Use Cases

  • Web development: Quickly grab HEX or RGB values for CSS properties like background-color, color, and border-color.
  • Design handoff: Convert between formats when design specs use HEX but your framework expects RGB or HSL.
  • Accessibility checking: Adjust lightness in HSL to create darker or lighter variants for contrast testing.
  • Brand guidelines: Verify that a color matches across different notation systems.

Technical Background

The HEX format encodes the red, green, and blue channels as two hexadecimal digits each, producing a six-character string prefixed by #. RGB represents the same three channels as decimal numbers from 0 to 255. The conversion between HEX and RGB is a straightforward base-16 to base-10 translation. HSL uses a cylindrical geometry: Hue is the angle on the color wheel (0–360°), Saturation is the intensity (0–100%), and Lightness is the brightness (0–100%). Converting between RGB and HSL involves a well-defined algorithm that maps the cubic RGB space into the cylindrical HSL space. All conversions in this tool run entirely in your browser using JavaScript — no data is ever sent to a server.