Color Picker & Converter Online — Free Tool
Select custom colors visually and convert seamlessly between HEX, RGB, and HSL color formats.
Selected
#005EC7
HEX
RGB
rgb(0, 94, 199)
HSL
hsl(212, 100%, 39%)
Preview
#005EC7
Tip: You can paste a HEX code (like #005EC7) or adjust RGB values.
Privacy note: All processing happens entirely in your browser. No data is sent to our servers.
About this tool
Pick colors visually and copy HEX, RGB, or HSL values for CSS, design tokens, or brand guidelines. Eyedropper support may sample from screen depending on browser.
Instant preview swatch helps match UI states and accessibility contrast checks.
Common use cases
- Choosing brand and accent colors
- Copying values into CSS variables
- Sampling colors from mockups
- Exploring HSL adjustments for hover states
How to use
- Open the color picker and choose a hue on the wheel or sliders.
- Fine-tune saturation and lightness.
- Copy HEX, RGB, or HSL in your preferred format.
- Paste into stylesheets or design token files.
This page is available at /tools/color-picker/.
Understanding the result
- HEX is six digits (#RRGGBB) with optional alpha in eight-digit #RRGGBBAA.
- RGB and HSL strings map directly to CSS color properties.
- Perceived brightness differs by hue—check contrast ratio for text on backgrounds.
- sRGB is default web space; wide-gamut displays may render differently.
Related tools
Base64 Encoder & Decoder
Securely encode plain text into Base64 format, or decode Base64 strings back to their original readable state.
Border Radius Generator
Configure border radius attributes intuitively and generate the accompanying CSS or Tailwind classes.
Box Shadow Generator
Visually construct box shadows and automatically generate standard CSS or arbitrary Tailwind shadow classes.
Code Diff Viewer
Perform side-by-side textual comparisons to easily spot differences between two versions of code or text.
Cron Expression Explainer
Translate complex 5-field cron scheduling expressions into clear, plain English sentences.
CSS & JS Minifier
Compress your CSS and JavaScript code by stripping unnecessary whitespace and comments to optimize load times.
FAQ
HEX vs RGB?
Same color, different notation. HEX is compact; RGB is readable for alpha and calc.
How do I pick from an image?
Use eyedropper if supported, or sample pixel in an image editor then enter values.
Accessibility contrast?
Pair with a contrast checker—WCAG AA needs 4.5:1 for normal text.
CMYK for print?
Screen pickers are RGB. Convert separately for print workflows.