Color Picker & Converter

Pick any color and instantly convert between HEX, RGB, and HSL formats. See complementary colors and copy values with one click.

Advertisement
#7c83fd
Click to open color picker
Complementary & Shades
Complementary
Dark
Preset Colors
HEX
RGB
R (0–255)
G (0–255)
B (0–255)
R 124
G 131
B 253
HSL
H (0–360)
S (0–100%)
L (0–100%)
Color loaded: #7c83fd
Advertisement

About the Color Picker & Converter

This tool lets you pick any color visually or enter values in HEX, RGB, or HSL format, and instantly converts between all three formats. It also shows you the complementary color and lighter/darker shades of your selected color.

HEX color format

HEX colors are represented as a # followed by 6 hexadecimal digits (e.g., #7c83fd). The first two digits represent red, the next two green, and the last two blue. HEX is widely used in web development (HTML, CSS).

RGB color format

RGB stands for Red, Green, Blue. Each channel ranges from 0 to 255. For example, rgb(124, 131, 253). RGB is additive — combining all channels at maximum (255,255,255) produces white.

HSL color format

HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360°). Saturation is a percentage (0% = grayscale, 100% = full color). Lightness is also a percentage (0% = black, 100% = white). HSL is often easier for humans to reason about than RGB.

What is a complementary color?

A complementary color is the color directly opposite on the color wheel — it has a hue value shifted by 180°. Complementary colors create strong contrast and are widely used in design to make elements stand out.