Color Picker

Pick any color, or type a HEX, RGB or HSL value, to convert it between formats and get matching tints and shades.

How to use the Color Picker

  1. Click the color swatch to choose a color, or type a value such as #1463FF, rgb(20, 99, 255) or hsl(220, 100%, 54%).
  2. Read the color in HEX, RGB, HSL, HSV and CMYK and copy the format you need.
  3. Click any tint or shade to copy its HEX code.

Color formats explained

  • HEX writes red, green and blue as three two-digit hexadecimal numbers, such as #1463FF. It is the most common format in web design.
  • RGB gives the same three channels as numbers from 0 to 255.
  • HSL describes a color by hue (0–360° around the color wheel), saturation and lightness, which makes it easy to create lighter, darker or muted versions.
  • HSV / HSB is similar to HSL and is used in many design applications.
  • CMYK describes ink percentages for printing. The conversion shown is a mathematical approximation; real print results depend on the printer profile and paper.

Tints and shades

A tint is a color mixed with white, and a shade is a color mixed with black. Using tints and shades of one brand color for backgrounds, borders and hover states keeps a design consistent.

Frequently asked questions

How do I convert HEX to RGB?

Split the six-digit code into three pairs and convert each from hexadecimal to decimal. #1463FF is 20, 99, 255.

What is the difference between RGB and CMYK?

RGB mixes light and is used for screens. CMYK mixes inks and is used for printing.

What is HSL good for?

Adjusting colors intuitively: change lightness for tints and shades, saturation for vividness and hue for a different color.

Related tools