Color Picker

From ToolzPedia, the free tools encyclopedia
This is one of several design tools. For the full list of utilities, see All tools.

Colour is one of the most powerful tools in a designer's or developer's arsenal, but working with colour values across different formats is surprisingly tedious. A designer picks a shade in Figma and notes the HSL value. A developer needs that same colour in HEX for a CSS variable and RGBA for a transparent overlay. The back-and-forth between format converters, browser DevTools colour pickers, and design tools wastes minutes that add up across every project.

The ToolzPedia Color Picker eliminates that friction. It is a real-time, browser-native colour picker that shows HEX, RGB, RGBA, HSL, and HSLa values simultaneously, all updating live as you drag the picker cursor across the saturation/brightness canvas, move the hue slider, or adjust the alpha channel. Every format has a one-click copy button. You can save frequently used colours to a persistent in-page palette for the duration of your session.

The tool is built entirely on the Canvas API and standard JavaScript with no external dependencies. Every computation stays in your browser. It works offline after the initial page load and requires no account, no signup, and no clipboard permissions beyond what your browser already provides.

Use the tool edit

HEX
RGB
HSL
RGBA
HSLa
Saved Colors

How to use Color Picker edit

Follow these steps to use the tool:

  1. Pick a color

    Click or drag on the color canvas to select a hue and saturation.

  2. Adjust hue & alpha

    Use the hue slider to change color, and the alpha slider for transparency.

  3. Copy any format

    Click Copy next to HEX, RGB, HSL, RGBA or HSLa to grab the value for your CSS.

  4. Save to palette

    Hit + Save to collect your favourite colors for the current session.

Frequently asked questions edit

RGB, HEX, and HSL are all representations of the same colour in different formats. RGB uses three 0-255 integer values for red, green, and blue channels. HEX encodes those same three values as a six-character hexadecimal string (e.g., #3b82f6). HSL uses three values: hue (0-360 degrees, the colour wheel position), saturation (0-100%, how vivid or grey the colour is), and lightness (0-100%, how light or dark it is). HSL is often more intuitive for designers because you can change brightness or saturation independently without affecting the hue.
Screens vary in colour gamut (the range of colours they can display), colour profile (sRGB vs P3 vs AdobeRGB), brightness calibration, and hardware characteristics. Most web monitors are calibrated to sRGB. Wide-gamut displays (like Apple ProMotion panels) can show more saturated colours than sRGB allows, which means a vivid blue in HEX may appear more intense on those screens. For web design, assume sRGB as the baseline and test on multiple screens.
The alpha channel controls the opacity of a colour. An alpha value of 1.0 (or 255 in 0-255 notation) is fully opaque. An alpha value of 0 is fully transparent. Values in between create semi-transparent colours. In CSS, you use rgba(59, 130, 246, 0.5) for 50% opacity, or the equivalent hsla() notation. HEX also supports alpha as an 8-digit code: #3b82f680 is the same colour at approximately 50% opacity.
Not directly in this picker. CSS named colours are resolved by the browser at render time. To find the HEX equivalent, type a CSS named colour into a style attribute in your browser's DevTools and read the computed HEX value from the styles panel, then paste that HEX into the picker.
This picker operates in the sRGB colour space, which covers the vast majority of web design use cases. Wide-gamut CSS colour functions like oklch(), lab(), and display-p3 are outside its scope. For those, you would need a specialised colour tool or the CSS editor directly.
Start with your base colour, note its HSL values. To create tints (lighter shades), increase the L value. To create shades (darker versions), decrease L. To create tones (greyed-out variants), decrease S. Keeping H constant while varying S and L gives you a monochromatic palette that feels cohesive.

Use cases edit

CSS development

Translate design mockup colours into CSS variables instantly. Pick the hue visually, grab the HEX for the variable definition, and copy the RGBA version for semi-transparent overlays, without switching tools.

Brand colour verification

Paste a known HEX value directly into the hex input field to load that exact colour, then copy it in any format your project requires: HSL for CSS custom properties, RGB for image editing software import fields, or RGBA for alpha-channel overlays.

Colour contrast checking

Pick your background colour and foreground colour in sequence to note their HEX values, then paste them into a contrast checker. The picker makes capturing exact values from any colour you have in mind fast and accurate.

Design handoff

When passing colours to a developer, copy the HEX for web, the RGB tuple for After Effects, and the HSL for designers who prefer that representation, all from a single colour selection.

Learning colour theory

Drag the cursor around the saturation/brightness canvas to understand how saturation and value (brightness) interact. Move the hue slider to see the colour family change while saturation and brightness stay constant. The live HSL output makes colour space relationships intuitive.

How it works edit

The colour picker renders two canvas elements: the main saturation/brightness canvas and the hue strip. The main canvas is filled with a linear gradient from white to the current hue colour horizontally, and from fully opaque to black vertically, creating the classic HSV picker gradient. The hue strip is filled with a full-spectrum hue gradient from 0 to 360 degrees.

When you click or drag on either canvas, the tool reads the pixel coordinates, converts them to HSV (hue, saturation, value) parameters, and then converts HSV to RGB using the standard mathematical transformation. From RGB, the tool derives HEX (by converting each channel to a two-digit hexadecimal string), HSL (via the RGB-to-HSL formula), and RGBA/HSLa by incorporating the alpha channel value from the alpha slider.

All conversions happen in real-time on every mouse move event, so the output fields update instantly as you drag. The Canvas API's getImageData() method could be used for colour sampling, but the coordinate-to-HSV approach is more precise and avoids sub-pixel sampling artefacts.

Tips and best practices edit

  • Type a HEX value directly into the HEX input field to jump to that exact colour. This is the fastest way to load a specific brand colour or a value you already have documented.
  • The alpha slider controls the A channel in RGBA and HSLa. Dragging it to the left adds transparency. At full left (alpha = 0), the colour is completely transparent. At full right (alpha = 1), it is fully opaque.
  • The saved palette at the bottom of the picker is session-persistent. If you need colours to survive page reloads, copy them to a note or your project's CSS file before closing the tab.
  • For accessibility checks, you need the HEX values of both your background and foreground colours. Pick each one, copy the HEX, and paste into WCAG contrast tools like WebAIM Contrast Checker to verify your colour combinations meet AA or AAA standards.
  • Pressing the + Save button adds the current colour to the palette row. Clicking any palette swatch loads that colour back into the picker, making it easy to cycle between the colours in your palette without re-entering values.

Common mistakes edit

Confusing HSL with HSV

The picker internally uses HSV (Hue, Saturation, Value) for the canvas representation, but outputs HSL (Hue, Saturation, Lightness) because HSL is what CSS uses. These are different colour models. The same HEX colour has different S and L/V numbers in HSL versus HSV. Always use the HSL output for CSS, not a manual conversion from the canvas coordinates.

Copying RGBA when the target does not support alpha

Some contexts, such as HTML background-color in older email clients or certain SVG fill attributes, do not render alpha correctly. Use HEX or RGB (without alpha) for maximum compatibility.

Expecting exact PANTONE matches

PANTONE and other proprietary colour systems define colours for physical printing processes. The HEX equivalent of a PANTONE colour is only an approximation for screen display. For print work, always work from official PANTONE-to-CMYK conversion tables.

Other free design tools available on ToolzPedia:

🌈

Gradient Generator

Create beautiful CSS linear, radial and conic gradients visually. Copy the CSS code instantly.

New Use tool →

See also edit