Tutorials

Color Picker: a quick guide

Pick a color, copy it in any format and check it against the rest of your palette.

Designers, developers and anyone tweaking a slide deck need the same thing from a color picker: get the value, copy it in the right format, move on. The ChrysoKit Color Picker is built around that loop.

Why use it

It returns HEX, RGB, HSL and HSV at once, includes a live preview, and lets you copy any format with a single click. No account, no upsell, no theme to install.

How to use the Color Picker

  1. Pick a color from the visual picker or type a known value.
  2. Read all four formats side by side.
  3. Click the copy icon next to the format you need.
  4. Tweak the alpha slider when you need transparency.

Features worth knowing

Four formats at once

HEX, RGB, HSL and HSV update together. No switching modes.

Alpha channel

Transparency is a first-class citizen, with both rgba and hex8 output.

Live preview

A large swatch shows you the chosen color against light and dark backgrounds.

Pro tips

  • Use HSL when you want to nudge a color cleaner. Saturation and lightness sliders are easier than guessing in HEX.
  • Hex8 (with alpha at the end) is supported by every modern browser and saves a layer of complexity in CSS.
  • Pair the picker with the Contrast Checker to make sure the color is readable, not just pretty.

Privacy first. The Color Picker runs entirely in your browser. Nothing you enter is sent to a server.

Open the Color Picker the next time a design needs a precise value. It is faster than the picker buried in your design tool.

Open the tool: Color Picker →

Share this article
CK
ChrysoKit Team

The team behind ChrysoKit. We build small, useful, fast, free tools for people who would rather get on with their day than fight a website.