About Color Picker
Pick colors visually or paste a color code to convert between HEX, RGB, HSL, and RGBA formats. Check contrast ratios for accessibility compliance. Copy any format with one click.
Designers and developers constantly switch between color formats. CSS uses hex and RGB, design tools use HSL, and sometimes you need transparency with RGBA. This tool converts instantly so you can grab the format you need.
How to use Color Picker
Pick a color using the visual picker, or paste a color code.
See the color displayed in all formats.
Check contrast ratio if pairing with text.
Copy the format you need (HEX, RGB, HSL, etc.).
Use in your CSS, design tool, or code.
Examples
Format conversion
The same color in different formats:
HEX: #3B82F6 RGB: rgb(59, 130, 246) HSL: hsl(217, 91%, 60%) RGBA: rgba(59, 130, 246, 1) All represent the same blue color
WCAG contrast checker
Ensure text is readable on backgrounds:
Text: #FFFFFF (white) Background: #3B82F6 (blue) Contrast: 4.7:1 ✓ Passes AA for normal text (4.5:1) ✓ Passes AAA for large text (3:1) ✗ Fails AAA for normal text (7:1)
HSL for variations
HSL makes creating shades easy—just adjust lightness:
Base blue: hsl(217, 91%, 60%) Lighter: hsl(217, 91%, 80%) ← increase L Darker: hsl(217, 91%, 40%) ← decrease L Saturated: hsl(217, 100%, 60%) ← increase S Muted: hsl(217, 50%, 60%) ← decrease S
Features
When to use this
- •Converting design mockup colors to CSS
- •Checking accessibility contrast ratios
- •Creating color variations (lighter/darker)
- •Matching brand colors across tools
- •Debugging CSS color issues
- •Learning color theory and formats