Free HEX, RGB & HSL Color Converter
Runs locallyUpdated October 25, 2026
Pick a color visually or enter a #HEX code to convert instantly between HEX, rgb(), and hsl() CSS color tokens.
How to use Color Picker & Converter
Select a color using the visual color picker or type a 6-digit #HEX value (such as #1E3A8A).
Inspect the synchronized HEX, RGB, and HSL CSS values.
Click Copy on your preferred color format to paste directly into your CSS variables or Tailwind config.
Convert CSS colors between HEX, RGB, and HSL
Translating brand palette values between Figma hex codes (#D4AF37), rgb() scripts, and hsl() CSS custom properties is a daily frontend task. Use this free color picker and converter to switch formats in real time.
CSS color format comparison
| Format | Syntax Example | Best Used For |
|---|---|---|
HEX (#RRGGBB) | #2563EB | Figma/Canva design specs, SVG attributes, and static brand guides |
RGB (rgb(R, G, B)) | rgb(37, 99, 235) | Canvas/WebGL scripts and Tailwind opacity utilities (rgb(37 99 235 / 0.5)) |
HSL (hsl(H, S%, L%)) | hsl(221, 83%, 53%) | CSS variables (--primary), systematic hover states, and dark-mode palettes |
Formatting your stylesheet after updating color variables? Use the CSS minifier / beautifier or check canvas dimensions in the social media image size guide.
Color Picker & Converter FAQs
#HEX encodes Red, Green, and Blue channels as 6 hexadecimal digits (#000000 to #FFFFFF); rgb(r, g, b) uses decimal integers (0–255); and hsl(h, s%, l%) expresses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%).Related Code & Developer Tools
More code & developer tools and nearby utilities.
HTML Minifier / Beautifier
Collapse whitespace to minify HTML snippets or pretty-print nested markup locally in your browser with no server uploads.
Open tool →Lorem Ipsum Generator
Generate dummy Lorem Ipsum paragraphs with a chosen word count locally in your browser for UI wireframes, typography tests, and layout mockups.
Open tool →CSS Minifier / Beautifier
Format compressed CSS rules into readable multi-line blocks or minify stylesheet snippets to reduce byte size in your browser.
Open tool →JavaScript Minifier / Beautifier
Pretty-print compressed JavaScript snippets for readable debugging or collapse whitespace for small inline scripts locally in your browser.
Open tool →