Color Picker
Pick, convert, and copy colors in HEX, RGB, and HSL.
#5B5BD6
HEX
RGB
HSL
Common Colors
How to Use This Tool
- Open the Color Picker and browse the entries listed in the main panel above.
- Use the search box or filters to jump directly to the value, symbol, or shortcut you need.
- Click any entry to copy it to your clipboard or to see a more detailed description.
Common Use Cases
- Web design palettes: Frontend developers grab HEX or HSL values to drop into Tailwind config, CSS variables, or design tokens.
- Brand color matching: Marketers sample a color from a logo screenshot and convert to RGB for use in PowerPoint or social media graphics.
- Accessibility checks: UI designers verify a foreground/background pair meets WCAG AA contrast ratio (4.5:1) before shipping a component.
Frequently Asked Questions
How do I convert HEX #5b5bd6 to RGB?
Split the hex into pairs: 5b=91, 5b=91, d6=214, giving rgb(91, 91, 214). The picker shows HEX, RGB, HSL, and HSV side by side so you can copy any format without manual math. CSS accepts all formats interchangeably.
What's the difference between HSL and HSV?
Both use Hue (0-360) but HSL's Lightness peaks at white (50% is pure color, 100% is white), while HSV's Value peaks at the color itself (100% is brightest pure color). Designers often prefer HSL because tints and shades feel symmetric around 50%.
Why does my HEX color look different on print vs screen?
HEX/RGB is additive (light), while print uses subtractive CMYK (ink). Many vivid screen colors (especially bright blues and greens) sit outside CMYK gamut and shift toward muddier hues when converted. Always proof critical brand colors in CMYK before printing.