Hex Color Picker
Pick any color and instantly see its HEX, RGB, and HSL values. Explore complementary, triadic, and analogous color harmonies.
Quick Answer
Click the color swatch to open your system color picker, or type a HEX/RGB value directly. The tool instantly converts between HEX, RGB, and HSL formats and generates complementary, triadic, and analogous color palettes.
Pick a Color
CSS Values
color: #EC4899;
color: rgb(236, 72, 153);
color: hsl(330, 81%, 60%);
Color Harmonies
Complementary
Triadic
Analogous
About This Tool
The Hex Color Picker is a comprehensive color exploration tool designed for designers, developers, and anyone who works with digital color. It provides instant conversion between the three most common color formats used in web design and software development: HEX (hexadecimal), RGB (Red, Green, Blue), and HSL (Hue, Saturation, Lightness).
At the heart of the tool is an interactive color selector that connects to your operating system's native color picker. Click the large color swatch to open a full-featured color chooser with gradient maps, color spectrum displays, and precise value inputs. As you select colors, all three format displays update simultaneously, giving you instant access to the values you need for your project.
The HEX format is the most widely used color notation in web development. It represents colors as a six-character hexadecimal string preceded by a hash symbol. Each pair of characters encodes one of the three color channels (red, green, blue) with values from 00 to FF. HEX codes are compact, universally supported in CSS, and easy to copy-paste between design tools and code editors.
Understanding Color Models
The RGB model defines colors by specifying the intensity of three additive light channels. Each channel ranges from 0 (no light) to 255 (full intensity). When all three channels are at 255, the result is white; when all are at 0, the result is black. RGB is the native color model for digital screens and is used directly in CSS via the rgb() function.
The HSL model represents colors in a way that aligns more closely with human perception. Hue is the pure color on the color wheel (measured in degrees from 0 to 360), Saturation is the intensity or purity of the color (0% is gray, 100% is fully saturated), and Lightness controls the brightness (0% is black, 100% is white, 50% is the pure color). HSL is particularly useful for creating systematic color palettes because you can generate variations by adjusting a single parameter.
Color Harmonies
Beyond simple format conversion, this tool generates three types of color harmonies based on established color theory. Complementary colors sit directly opposite each other on the color wheel, creating maximum contrast and visual energy. They are ideal for call-to-action buttons, highlights, and attention-grabbing accents.
Triadic colors form an equilateral triangle on the color wheel, spaced 120 degrees apart. This harmony provides a vibrant, balanced palette with strong visual contrast while maintaining color richness. Many brand identities and illustration palettes are built on triadic schemes.
Analogous colors are neighbors on the color wheel, spaced 30 degrees apart. They create harmonious, cohesive palettes that feel natural and pleasing. Analogous schemes are commonly used for backgrounds, gradients, and designs where a unified mood is desired. Nature frequently exhibits analogous color relationships — think of autumn leaves transitioning from yellow to orange to red.
Click any swatch in the harmony palettes to make it your active color, allowing you to quickly explore color relationships and build multi-color palettes. Each swatch displays its HEX value for easy reference and copying.