Color Picker
Pick colors and convert between HEX, RGB, and HSL formats.
Color Harmonies
Complementary
Analogous
Triadic
CSS Code
color: #0B7285;
background-color: #0B7285;All Formats
| HEX | #0B7285 |
| RGB | rgb(11, 114, 133) |
| HSL | hsl(189, 85%, 28%) |
This tool is for informational and educational purposes only. It is not a substitute for professional financial, medical, legal, or engineering advice. See Terms of Service.
Can't find what you need?
Request a ToolHow to Use the Color Picker
This color picker and converter lets you find the perfect color and get its value in HEX, RGB, and HSL formats, all at once. Everything runs in your browser with no data sent to any server.
- Pick a color visually. Click the color swatch at the top to open your browser's native color picker. Drag or tap to select any color you want. The HEX, RGB, and HSL fields update instantly.
- Type a HEX code. If you already have a hex value (like #FF5733), paste or type it into the HEX field. All other fields and the preview update live as you type.
- Enter RGB or HSL values. You can also type exact Red, Green, Blue values (0 to 255 each) or Hue, Saturation, Lightness values. Every input stays in sync.
- View color harmonies. Below the preview swatch you will see complementary, analogous, and triadic colors based on color theory. Click any harmony swatch to copy its hex code.
- Copy CSS code. The CSS snippet section shows ready-to-use declarations. Click "Copy CSS" to grab both the color and background-color lines.
- Share your color. Click the Share button to send someone a direct link that opens the picker with your exact color pre-loaded.
About Color Formats
Colors on the web are described in several formats. HEX is the most common, using a pound sign followed by six hexadecimal digits (two each for red, green, and blue). RGB spells out the same information as three decimal numbers from 0 to 255. HSL takes a different approach: it describes color as a point on a wheel (Hue, 0 to 360 degrees), a vividness level (Saturation, 0 to 100 percent), and a brightness level (Lightness, 0 to 100 percent). HSL is often more intuitive for adjusting colors because you can shift the hue without affecting brightness, or desaturate without changing the tone. All three formats represent the same colors. This tool converts between them instantly so you can work in whichever format your project requires.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX uses six hexadecimal digits to represent red, green, and blue channels. RGB uses three decimal numbers (0 to 255) for the same channels. HSL describes color using Hue (0 to 360 degrees on the color wheel), Saturation (0 to 100 percent vividness), and Lightness (0 to 100 percent brightness). All three formats can represent the same set of colors.
What is a complementary color?
A complementary color sits directly opposite the original color on the color wheel, meaning its hue is shifted by 180 degrees. Complementary pairs create strong visual contrast and are widely used in design to make elements stand out.
How do analogous and triadic color harmonies work?
Analogous colors are neighbors on the color wheel, shifted 30 degrees in each direction from the base color. They create a cohesive, harmonious look. Triadic colors are evenly spaced at 120-degree intervals around the wheel, giving a balanced and vibrant palette with more variety than analogous schemes.
Can I share a specific color with someone?
Yes. Click the Share button on the result card, or copy the URL from your browser. The page URL includes a color parameter (for example, ?c=ff5733) that pre-loads the exact color when opened.