Hex Color Picker
Use the color picker or enter a HEX code to see the color preview and get RGB and HSL values. Click any value to copy it.
Hex Color Picker — Find and Convert Color Codes Instantly
A HEX color code is a six-character string used in web design, graphic design, and digital art to specify exact colors. Each pair of characters represents the Red, Green, and Blue (RGB) channels in hexadecimal notation, giving you access to over 16.7 million unique colors.
This free color picker tool lets you visually select a color or type a HEX value and instantly see the corresponding RGB and HSL values — ready to copy and paste into CSS, design software, or any project.
How HEX Color Codes Work
A HEX color code follows the format #RRGGBB, where each pair is a hexadecimal value from 00 to FF (0–255 in decimal):
#RRGGBB → Red (00–FF), Green (00–FF), Blue (00–FF)
Example: #3B82F6 breaks down as:
- R = 3B = 59
- G = 82 = 130
- B = F6 = 246
This produces a vivid blue — the same blue used in many modern UI frameworks.
Common Color Codes Reference
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
HEX vs RGB vs HSL — When to Use Each
- HEX is the most compact format, widely used in CSS and HTML. It's easy to copy-paste and is the standard in most design tools.
- RGB is intuitive for mixing colors by channel intensity. It maps directly to how screens produce color.
- HSL (Hue, Saturation, Lightness) is the most human-readable format — great for adjusting color brightness or creating color palettes.
Tailwind CSS Color Reference
| Tailwind Name | Shade 500 HEX | Usage |
|---|---|---|
| red | #EF4444 | Errors, destructive actions |
| blue | #3B82F6 | Primary buttons, links |
| green | #22C55E | Success states, confirmations |
| yellow | #EAB308 | Warnings, highlights |
| purple | #A855F7 | Accents, creative elements |
| gray | #6B7280 | Neutral text, borders |
| indigo | #6366F1 | Headers, dark UI themes |
| pink | #EC4899 | Playful UIs, marketing |
Tips for Choosing Colors
- Contrast matters: Ensure text has at least a 4.5:1 contrast ratio against its background for accessibility (WCAG 2.1 AA standard).
- Use a palette: Pick 2–3 main colors and derive shades from them rather than using random colors.
- Test on multiple screens: Colors look different on various monitors and in dark/light mode.
- Consider color blindness: About 8% of men and 0.5% of women have some form of color vision deficiency. Avoid relying on red-green distinctions alone.
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a 6-digit hexadecimal string (e.g. #FF5733) that represents a specific color by defining its Red, Green, and Blue channel values. It's the most common format for specifying colors in web design and CSS.
How do I convert HEX to RGB?
Split the 6-digit HEX code into three pairs (RR, GG, BB) and convert each pair from hexadecimal to decimal. For example, #3B82F6 → R=59, G=130, B=246.
What is the difference between HEX and RGB?
They represent the same color information in different formats. HEX uses base-16 notation (#RRGGBB), while RGB uses base-10 values from 0–255 for each channel. HEX is more compact; RGB is more readable.
What is HSL color format?
HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It's a more intuitive way to describe colors because you can easily adjust brightness or saturation without changing the base hue.
How many colors can HEX codes represent?
HEX codes can represent 16,777,216 (256³) unique colors — 256 values for each of the three RGB channels.
Related Tools
- Random Color Generator — Generate random colors with HEX and RGB values
- QR Code Generator — Create QR codes with custom colors
- Text Case Converter — Convert text formats for code
- Base Converter — Convert between number bases
- Character Counter — Count characters in color code strings