Color Picker
Pick any color and convert between HEX, RGB, and HSL. Copy codes with one click.
#6366F1rgb(99, 102, 241)hsl(239, 84%, 67%)#6366f1Shades
Tints
What is a color picker?
A color picker is a tool that lets you select a color and get its code in different formats like HEX, RGB, and HSL. Designers, developers, and marketers use color pickers to find the exact color values they need for websites, apps, graphics, and brand guidelines.
Color formats compared: HEX vs RGB vs HSL
| Format | Example | Best For |
|---|---|---|
| HEX | #6366F1 | CSS, web design, brand guides |
| RGB | rgb(99, 102, 241) | CSS, digital screens, LED |
| HSL | hsl(239, 84%, 67%) | Adjusting hue, saturation, lightness |
How to use the color picker
- Use the native color picker or enter a HEX code directly
- View the color in HEX, RGB, HSL, and CSS formats
- Click the copy button next to any format to copy it
- Explore shades (darker) and tints (lighter) of your selected color
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a 6-digit hexadecimal number prefixed with # that represents a color. The six digits are three pairs: red, green, and blue (RR GG BB). Each pair ranges from 00 (none) to FF (maximum). For example, #FF0000 is pure red.
How do I convert HEX to RGB?
Convert each pair of HEX digits to decimal. For #6366F1: 63 hex = 99 decimal (red), 66 hex = 102 decimal (green), F1 hex = 241 decimal (blue). So #6366F1 = rgb(99, 102, 241). This tool converts automatically.
What are shades and tints?
A shade is a color mixed with black (darker). A tint is a color mixed with white (lighter). Shades and tints help you create consistent color palettes with varying intensity from a single base color.