The Color Picker lets you select any color and instantly see its HEX, RGB and HSL codes — ready to copy into CSS, design tools or any application. Use the palette presets for quick access to popular design colors, or type a HEX code directly to look it up.
How to choose colors for a real project
A color picker is most useful when you use it with a purpose. Pick one main brand color, one darker shade for headings or buttons, one lighter shade for backgrounds, and one neutral color for text. The shade row helps you build that simple palette without guessing.
Common uses
- CSS: copy the HEX or RGB value into a stylesheet.
- Design mockups: keep a consistent brand color across buttons, cards, and backgrounds.
- QR codes: choose a high-contrast foreground color so the code still scans correctly.
- Accessibility checks: use the contrast suggestion as a quick first pass before testing final text contrast.
Quick rule
If the background is dark, use light text. If the background is light, use dark text. For buttons and important labels, avoid low-contrast combinations even if the colors look attractive.
Frequently Asked Questions
What is a HEX color code?
A HEX code is a 6-character code (like #FF5733) that represents a color using hexadecimal numbers. The first two characters represent red, the next two green, and the last two blue.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) describes a color by how much of each primary light color it contains. HSL (Hue, Saturation, Lightness) is often more intuitive — hue is the color position on a wheel, saturation is how vivid it is, and lightness is how bright it is.
How do I know if I need dark or light text on a color?
The Contrast indicator shows whether black or white text will be more readable on your chosen background color, based on WCAG luminance calculations.