Color Picker
Pick any colour and convert it between HEX, RGB, and HSL formats.
Color picker tool
Choose a color or paste a color code. Copy the format you need for CSS, design tools, or documentation.
#3B82F6
Use the visual picker or paste a color code below.
Supports 3-digit HEX, 6-digit HEX, RGB, RGBA, HSL, and HSLA.
Alpha controls transparency and depends on the background behind the color.
#3B82F6
#3B82F6
Quick copy
Recent colors
Selected color output
#3B82F6
Alpha 100% · HSL 217°, 91%, 60% · Contrast hint 3.52:1
HEX
#3B82F6
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
CSS variable
:root { --color-picked: #3B82F6; --color-picked-rgb: 59 130 246; }
Local color parsing
HEX, RGB, RGBA, HSL, and HSLA are parsed locally in the browser.
Copy-ready CSS
Copy clean color values and CSS variable snippets with one tap.
Preview-focused
Preview the selected color on light, dark, or custom backgrounds.
Dynamic Color Insights
How Color Picking Works
Pick
Select a color visually or paste a color code.
Parse
The value is validated and normalized.
Convert
RGB values are converted into HEX and HSL.
Preview
The color is shown against different backgrounds.
Copy
Copy the preferred CSS-ready value.
HEX, RGB, HSL, Alpha, and CSS Values Explained
HEX
Compact and common in CSS, design tools, and documentation.
RGB
Uses red, green, and blue channel values from 0 to 255.
RGBA
Adds alpha transparency to RGB values.
HSL
Uses hue, saturation, and lightness for easier color adjustment.
HSLA
Adds alpha transparency to HSL values.
CSS variables
Reusable custom properties for themes and design systems.
Contrast, Accessibility, and Design-System Notes
Readability
Text colors should be checked against their real background.
UI states
Plan hover, focus, disabled, active, and error colors.
HSL scales
HSL can help create consistent tints, shades, and color ramps.
Brand colors
Brand colors may need accessible alternatives for text and UI states.
Transparency
Transparent colors should be tested against the final background.
Real layouts
Review generated values in the actual website or app layout.
Common Color Picker Examples
Web Design, Branding, and Developer Use Cases
Privacy and Local Processing Notes
Local processing
Color picking and conversion run locally in your browser.
No account
No sign-up or account is required.
No backend storage
Selected colors are not sent to a server.
Copy control
Copied values stay under your control.
Recent colors
Recent colors are saved locally in the browser when available.
Fast preview
Live preview uses lightweight local state only.
Method Explanation
Frequently Asked Questions
Related tools