Color Picker & Converter
Pick a color and convert between HEX, RGB, and HSL formats instantly.
#3b82f6rgb(59, 130, 246)hsl(217, 91%, 60%)hsv(217, 76%, 96%)--color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 91%, 60%;
// tailwind.config.js
colors: {
primary: '#3b82f6',
}About Color Picker & Converter
Use the visual color picker or paste any HEX (#ff5733), RGB (rgb(255, 87, 51)), or HSL (hsl(11, 100%, 60%)) value and get instant conversions to all three formats. Also generates the matching CSS custom property, Tailwind config snippet, and a contrast ratio check against white and black. Useful for design-to-code workflows and building design tokens.
All processing happens entirely in your browser using modern web APIs. Nothing is uploaded to our servers — your data stays local and private. Free to use forever.
Common use cases
- Converting HEX colors from a design file (Figma, Sketch) to RGB or HSL for CSS
- Generating CSS custom property definitions for a design system
- Finding the Tailwind CSS closest color or generating a custom config
- Checking color contrast ratio for WCAG accessibility compliance
- Exploring color variations by adjusting HSL lightness and saturation
How it works
HEX to RGB: parses the hex string into R, G, B integer components. RGB to HSL: normalizes RGB to [0,1], computes max/min, then calculates hue (0-360°), saturation (0-100%), and lightness (0-100%) using standard colorimetry formulas. HSL to HEX: converts HSL back to RGB via the hue-to-RGB algorithm, then formats as hex. All conversions run in the browser with no dependencies.