How to Use the Color Picker
- Pick a color visually. Click the large color area at the top to open your browser's native color picker. Drag the cursor to select any color from the full spectrum.
- Enter a color code. If you already have a HEX, RGB, or HSL value, type it directly into the corresponding input field. All other formats update automatically.
- Copy the value you need. Click the "Copy" button next to any format to copy it to your clipboard. The button turns green to confirm the copy.
- Check contrast. The Contrast Checker panel shows your chosen color as text on white and black backgrounds. It calculates the WCAG contrast ratio and tells you whether the combination passes AA or AAA standards.
- Explore harmonies. The Complementary & Harmonies section shows colors that pair well with your selection. Click any harmony swatch to switch to that color.
- Use CSS output. Scroll to the CSS Output card to find ready-to-paste CSS declarations using your color in HEX, RGB, and HSL formats.
- Review your history. The last 12 colors you picked are saved as swatches. Click any swatch to return to that color.
HEX vs RGB vs HSL — Color Formats Explained
HEX Colors
HEX is the most widely used color format on the web. It represents colors using a six-character code preceded by a hash sign, such as #ff5733. Each pair of characters encodes the red, green, and blue channels as hexadecimal values from 00 (0) to FF (255). HEX is compact and easy to copy-paste into CSS, but it is not intuitive for humans to read or adjust by hand.
RGB Colors
RGB stands for Red, Green, Blue. It defines a color by specifying the intensity of each channel as a decimal number between 0 and 255, for example rgb(255, 87, 51). RGB is the native color model of screens and monitors. It is more readable than HEX when you need to tweak individual channels, and CSS supports it directly with the rgb() function.
HSL Colors
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0 to 360), saturation is a percentage indicating the intensity of the color, and lightness controls how bright or dark it is. For example, hsl(14, 100%, 60%). HSL is the most human-friendly format because adjusting saturation or lightness is straightforward without affecting the base hue. It is ideal for creating consistent color palettes.
Color Contrast and Accessibility
Color contrast is a critical part of web accessibility. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with visual impairments, including color blindness and low vision.
WCAG Contrast Levels
- AA (Normal text): Requires a contrast ratio of at least 4.5:1 between text and its background.
- AA (Large text): Requires at least 3:1. Large text is 18pt (24px) or 14pt bold (18.66px bold).
- AAA (Normal text): Requires at least 7:1 for the highest level of readability.
- AAA (Large text): Requires at least 4.5:1.
Use the contrast checker in this tool to verify that your foreground and background color combinations meet these standards before using them in production.
Popular CSS Color Codes
| Color |
Name |
HEX |
RGB |
| Black | #000000 | rgb(0, 0, 0) |
| White | #ffffff | rgb(255, 255, 255) |
| Red | #ff0000 | rgb(255, 0, 0) |
| Lime | #00ff00 | rgb(0, 255, 0) |
| Blue | #0000ff | rgb(0, 0, 255) |
| Yellow | #ffff00 | rgb(255, 255, 0) |
| Cyan | #00ffff | rgb(0, 255, 255) |
| Magenta | #ff00ff | rgb(255, 0, 255) |
| Gray | #808080 | rgb(128, 128, 128) |
| Silver | #c0c0c0 | rgb(192, 192, 192) |
| Maroon | #800000 | rgb(128, 0, 0) |
| Olive | #808000 | rgb(128, 128, 0) |
| Green | #008000 | rgb(0, 128, 0) |
| Purple | #800080 | rgb(128, 0, 128) |
| Teal | #008080 | rgb(0, 128, 128) |
| Navy | #000080 | rgb(0, 0, 128) |
| Orange | #ffa500 | rgb(255, 165, 0) |
| HotPink | #ff69b4 | rgb(255, 105, 180) |
| RoyalBlue | #4169e1 | rgb(65, 105, 225) |
| SeaGreen | #2e8b57 | rgb(46, 139, 87) |
Frequently Asked Questions
What is the difference between HEX and RGB color codes?
HEX and RGB represent the same color model (red, green, blue channels) but use different notations. HEX uses a six-character hexadecimal string like #ff5733, while RGB uses decimal values like rgb(255, 87, 51). They are interchangeable and both supported in all modern browsers. HEX is more compact; RGB is more readable when you need to adjust individual channels.
When should I use HSL instead of HEX or RGB?
HSL is ideal when you want to create variations of a color, such as lighter or darker shades, or adjust saturation. Since hue, saturation, and lightness are independent properties, you can tweak one without affecting the others. This makes HSL the preferred format for building consistent design systems and color palettes.
What WCAG contrast ratio do I need for accessible text?
For normal-sized body text, WCAG Level AA requires a minimum contrast ratio of 4.5:1 between the text color and background. For large text (18px bold or 24px regular), the minimum is 3:1. Level AAA, the highest standard, requires 7:1 for normal text and 4.5:1 for large text.
Is the color data sent to a server?
No. This color picker runs entirely in your browser using JavaScript. No color data, history, or any other information is sent to any server. Your color history is stored in your browser's local storage and remains private to your device.
Can I use this tool on mobile devices?
Yes. The tool is fully responsive and works on smartphones and tablets. The native color picker dialog varies by operating system, but all conversion, contrast checking, and copy features work on all modern mobile browsers.