Color Picker
Pick a color and instantly convert between HEX, RGB, and HSL formats. Generate color harmonies, shades, and tints.
Color Harmonies
Shades & Tints
How to Use the Color Picker
- Pick a color using the native color picker or click the large swatch.
- Enter values in HEX, RGB, or HSL fields. All formats sync automatically when you change any input.
- Click Copy next to any format to copy the color value to your clipboard.
- View complementary, analogous, and triadic color harmonies below the picker.
- Browse the shades and tints strip to find lighter or darker variations of your chosen color.
About Color Formats
Colors on the web are represented in several formats. HEX is the most common, using a # followed by six hexadecimal digits (e.g., #3498DB). RGB specifies Red, Green, and Blue channel values from 0 to 255. HSL uses Hue (0-360 degrees on the color wheel), Saturation (0-100%), and Lightness (0-100%), which many designers find more intuitive because it separates color from brightness.
Color harmonies are combinations of colors that work well together based on their positions on the color wheel. Complementary colors sit opposite each other and create high contrast. Analogous colors are adjacent and create smooth, cohesive palettes. Triadic colors are evenly spaced 120 degrees apart and provide vibrant, balanced combinations. Understanding these relationships is essential for effective web design and visual communication.
Frequently Asked Questions
A HEX color like #FF5733 is split into three pairs: FF (red), 57 (green), 33 (blue). Convert each pair from hexadecimal to decimal: FF=255, 57=87, 33=51. So #FF5733 = RGB(255, 87, 51). This tool does the conversion automatically.
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0-360), Saturation is a percentage (0% gray, 100% full color), and Lightness is a percentage (0% black, 50% normal, 100% white). It is often more intuitive for designers than RGB.
Complementary colors are pairs that sit opposite each other on the color wheel (180 degrees apart). They create strong visual contrast when placed together. For example, red and cyan, or blue and orange are complementary pairs.
A shade is created by adding black to a color (decreasing lightness), making it darker. A tint is created by adding white (increasing lightness), making it lighter. Together they create a monochromatic palette from a single base color.