Color Picker

Color Picker

Use the color picker by clicking and dragging your cursor inside the picker area to highlight a color on the right. Input Hex, RGB, HSL values to search for a particular color in the fields below the color swatch.

This free HTML color selector is the ultimate web design tool. You can easily type HEX color values directly into the tool, and you can manually adjust HSB and RGB values in order to fine-tune your color selection.

What is the HEX color system?

The HEX color system is a 24-bit color system also known as web colors. There are 16,777,216 (2^24) different HEX colors in total.

A HEX color has 6 digits consisting of three-byte hexadecimal numbers representing red, green, and blue respectively. Each color has a range between 00 and FF in the hexadecimal number system, and all the three in RGB are combined to form a HEX color based on the intensity.

For example, #ff0000 represents red, #00ff00 represents green, and #0000ff represents blue. Below is the HEX color code format starting with # and followed by the RGB values in hexadecimal. Hex color codes are case-insensitive. Lowercase and uppercase don't matter as it will result in the same color.

#RRGGBB

What is a 3-digit HEX color code?

A 3-digit color code is a shorthand version of the normal 6-digit HEX color code. Only 4096 HEX colors out of over 16 millions can be written in shorthand.

The two HEX digits of each color in RGB must be the same character so that a HEX color can be shorten to 3 digits.

For example, #0000ff can be shorten to #00f and #cc9900 can be shorten to #c90 whereas #f279b9 cannot.

What is the RGB color system?

RGB stands for red, green, and blue. The RGB color system is an additive color system between the three colors: red, green, and blue. It's mainly used on computer screen to form different light colors from the three colors. If all the three colors are combined together to the fullest, it will result in white.

The following is the RGB color format.

rgb(red, green, blue)

What is the HSL color system?

The HSL color system is a human-friendly color system as it doesn't define a color from either HEX or RGB. Instead, it forms a color from hue, saturation, and lightness. However, the con of the HSL color system is there are only 3.6 million colors in total which are a lot less than the HEX and RGB ones. The following is the HSL color code format.

hls(hue, saturation, lightness)

Hue - Hue has a range between 0 and 359 which represents the degree on the color wheel. Therefore, 0, 360, and 720 degree will result in the same spot on the color wheel where red is at 0 degree, green is at 120 degree, and blue is at 240 degree. We humans can guess which degree a color is at easily rather than the HEX and RGB color systems.

Saturation - Saturation has a range between 0% to 100% which represents the intensity of a color. The more the saturation is, the intense of a color will be. If set to 0%, it will result in a grayscale color.

Lightness - Lightness has a range between 0% to 100% (defaults to 50%). Increasing the lightness means adding white to a color whereas decreasing the lightness means adding black.

The example below is an HSL color that represents a yellow color.

hsl(55, 83%, 49%)