Color Picker

What is a color picker and converter?

A color picker lets you choose a color visually and express it in the numeric formats developers and designers trade daily: HEX for CSS, RGB for canvas and graphics APIs, and HSL for intuitive adjustments to hue and lightness. Manually converting between formats invites rounding errors and typos — synced fields eliminate that friction.

This tool combines a native browser color input with editable HEX, RGB, and HSL fields. Change any representation and the others update instantly. A large preview swatch shows the color with readable contrast text, and dedicated copy buttons grab each format for your stylesheet, Figma handoff, or brand guidelines document.

How to use the color picker

1. Click the color input to open your system color dialog and choose visually.
2. Or type a HEX code such as #3b82f6 from a design spec — RGB and HSL fields follow automatically.
3. Fine-tune with RGB sliders by editing individual 0–255 channels for precise brand matches.
4. Adjust HSL when you want to lighten a brand blue without shifting its hue — increase L, maybe lower S slightly.
5. Copy the format you need and paste into CSS, Tailwind config, Android XML, or presentation themes.

Examples

Brand blue

#3b82f6
rgb(59, 130, 246)
hsl(217, 91%, 60%)

All three describe the same sRGB color. CSS accepts any of them in color or background-color properties.

Neutral surface gray

#f1f5f9
rgb(241, 245, 249)
hsl(210, 40%, 96%)

HSL makes it obvious the hue is a cool 210° with very low saturation — handy when building design tokens for light/dark themes alongside the CSS Formatter.

QR code foreground

Dark modules on light backgrounds scan best. Pick a near-black HEX for QR foreground color in the QR Code with Logo tool after verifying contrast here.

How HEX, RGB, and HSL relate

Computers store color as red, green, and blue intensity. HEX is shorthand: two hex digits per channel. RGB states those integers directly. HSL is a cylindrical transform: hue selects the base color on the wheel, saturation pulls toward gray or vivid, lightness moves toward white or black. Converting HSL → RGB involves intermediate HSV math; this tool handles rounding so round-trips stay consistent.

sRGB is the default color space on the web. Print and wide-gamut displays may render differently. For critical brand work, calibrate monitors and reference physical Pantone swatches — digital converters assume standard sRGB gamma.

Contrast and accessibility

The preview picks dark or light label text using relative luminance, a quick sanity check before placing text on colored buttons. WCAG 2.x defines stricter contrast ratios (4.5:1 for normal text, 3:1 for large text). Use dedicated audit tools for compliance sign-off; this picker helps you iterate faster during early design.

Practical workflows

• Design handoff — designers send HEX; developers copy RGB into React Native or SwiftUI where HEX is less common.
• Theme tuning — bump HSL lightness in 5% steps to generate hover and active states from one base hue.
• Debugging CSS — paste mystery colors from computed styles in devtools and convert to HSL to understand saturation issues.
• Branded assets — match logo colors when preparing images in the QR code tools or HTML email templates.
• Documentation — embed consistent HEX values in Markdown previews from the Markdown Previewer.

Format cheat sheet

CSS supports #rgb shorthand when pairs repeat (#f00 = #ff0000), rgb(), hsl(), and modern rgb() / hsl() with space-separated syntax and alpha. This tool outputs the widely compatible comma forms. Append / 0.5 manually if you need semi-transparent variants in newer browsers.

Frequently asked questions