Hex Color Picker

A hex color picker is a tool that helps you work with hexadecimal color codes — the most widely used color format in web development. Whether you need to enter a specific hex code and see what it looks like, convert between color formats, or find the right shade for your project, this tool handles it instantly in your browser.

Type a hex code into the input field above and the preview updates in real time. You also get the equivalent RGB and HSL values, and if the color matches a CSS named color, that name is shown too. Use the color wheel to browse visually, or click any swatch in the reference table to select a popular color.

What Is a Hex Color Code?

A hex color code is a way to represent colors using the hexadecimal (base-16) number system. The format is #RRGGBB, where each pair of characters represents the intensity of one color channel:

• RR — Red channel (00 to FF)
• GG — Green channel (00 to FF)
• BB — Blue channel (00 to FF)

The hexadecimal system uses 16 digits: 0-9 and A-F. The value 00 means zero intensity (none of that color) and FF means full intensity (maximum of that color). Combining different levels of red, green, and blue produces over 16.7 million unique colors.

For example, #FF5733 breaks down as: Red = FF (255), Green = 57 (87), Blue = 33 (51). This produces a warm orange-red color. The hex code #000000 is black (all channels off) and #FFFFFF is white (all channels at maximum).

Shorthand Hex Notation

CSS supports a shorthand version of hex codes where each channel is represented by a single character instead of two. This works when both digits in each pair are identical. The browser doubles each character automatically:

• #F00 expands to #FF0000 (red)
• #0F0 expands to #00FF00 (green)
• #FFF expands to #FFFFFF (white)
• #ABC expands to #AABBCC

Shorthand notation saves a few characters in your CSS and is commonly used for simple colors. However, most specific colors like #2563EB cannot be expressed in shorthand because their digit pairs are not identical. Use shorthand when you can, but do not worry about it for precise color values.

How to Read and Write Hex Codes

Reading hex codes becomes intuitive with practice. Here are the key patterns to recognize:

• Equal values across channels produce grays. #333333 is dark gray, #999999 is medium gray, #CCCCCC is light gray.
• One channel dominant produces that primary color. #FF0000 is pure red, #00FF00 is pure green.
• Two channels high, one low produces secondary colors. #FFFF00 is yellow (red + green), #00FFFF is cyan (green + blue).
• Higher values = lighter. Increasing all channels makes a color lighter. #FF9999 is a light pink-red, while #990000 is a dark red.

Hex Colors in Web Design and CSS

Hex codes are the default color format in CSS because they are compact and universally supported. Every web browser since the earliest days of the internet has understood hex colors. Here is how you use them in CSS:

• Text color: color: #333333;
• Backgrounds: background-color: #F0F4F8;
• Borders: border: 2px solid #2563EB;
• Shadows: box-shadow: 0 2px 4px #00000020; (hex with alpha)

Modern CSS also supports eight-digit hex codes where the last two characters represent alpha (opacity). For example, #2563EB80 is the same blue at 50% opacity. The alpha range is 00 (transparent) to FF (opaque).

Popular Hex Color Codes Reference

Here are some of the most commonly used color picker hex code values in web design, organized by color family:

Converting Hex to RGB and HSL

The hex color picker above automatically converts your hex code to both RGB and HSL. But understanding the conversion is useful:

Hex to RGB Conversion

Split the six-character hex code into three pairs. Convert each pair from base-16 to base-10. For #FF5733: FF = 255, 57 = 87, 33 = 51. The result is rgb(255, 87, 51).

Hex to HSL Conversion

First convert hex to RGB, then RGB to HSL. The HSL conversion involves finding the hue angle on the color wheel, the saturation as a percentage of the color's purity, and the lightness as the average of the maximum and minimum channel values. The math is handled automatically by this tool.

For more complex color work including visual selection and color harmonies, our HTML color picker provides additional features. To extract colors from existing images, use our color picker from image tool. And if you need a calculator for any math alongside your design work, our scientific calculator online is free and browser-based.