Convert Colors Instantly Between HEX, RGB, HSL and OKLCH
Every designer and developer works across tools that speak different color dialects. Figma speaks HEX. CSS Variables prefer HSL. Modern design tokens use OKLCH. And your React components probably want RGBA. Our Color Converter is a free, browser-based tool that accepts any color in any supported format and converts it to all six simultaneously. No more copy-pasting into multiple converters or doing mental arithmetic.
The Six Color Formats You Need to Know
Understanding what each format is good for helps you pick the right one for the right job.
HEX is the web's oldest color notation. A six-character string like #2563eb is the most universally supported format. Every browser, every design tool and every CSS preprocessor understands it. Use HEX when you need maximum compatibility.
RGB stands for Red, Green, Blue. Each channel runs from 0 to 255, letting you mix any color in the visible sRGB gamut. rgb(37, 99, 235) is the same blue as above. RGB is the format closest to how your monitor actually works since screens are made of tiny red, green and blue subpixels.
RGBA adds a fourth channel for alpha transparency. A value of 1 is fully opaque and 0 is fully transparent. rgba(37, 99, 235, 0.5) gives you the same blue at 50% opacity. This is indispensable for overlays, shadows and glassmorphism effects.
HSL stands for Hue, Saturation, Lightness. Instead of mixing channels, you describe the color intuitively. The hue is a degree on the color wheel (0 = red, 120 = green, 240 = blue). Saturation is how vivid it is and lightness is how bright it is. hsl(221, 83%, 53%) is much easier to reason about than its RGB equivalent when you are building design systems.
HSLA extends HSL with the same alpha channel from RGBA. It is the most human-readable format for transparent colors.
OKLCH is the future of CSS color. Defined in CSS Color Level 4, it uses a perceptual model built on human vision research. The three values are Lightness, Chroma and Hue. Unlike HSL, two OKLCH colors with the same L value actually look equally bright to the human eye. This makes OKLCH ideal for building accessible color palettes, generating systematic tonal scales and avoiding the hue-shifting artifacts that plague HSL-based approaches.
Why Color Format Conversion Matters in Real Projects
Design to Code Handoff: Design tools like Figma export HEX by default, but your CSS custom properties might be defined in HSL for easy theming. This tool bridges that gap in one click.
Accessibility Work: When building WCAG-compliant color palettes, OKLCH is far more reliable than HSL for predicting perceived contrast. Convert your brand colors to OKLCH to see their true perceptual lightness and adjust accordingly.
Component Libraries: Modern design systems like Tailwind CSS and Radix Themes use OKLCH internally. Being able to convert any input color to OKLCH helps you add custom colors that integrate seamlessly with the existing token structure.
Dark Mode: HSL and OKLCH make dark mode far easier to implement. By converting your light mode HEX colors to HSL, you can systematically flip the lightness value to generate a dark mode variant without unpredictable color shifts.
CSS Custom Properties: When defining design tokens as CSS variables, HSL format lets you manipulate individual channels with CSS calc(). For example, you can adjust the lightness of a color by 10% without touching the hue or saturation.
Interactive Color Palette: Tailwind, Shades, Tints & Tones
Beyond format conversion, the tool automatically generates an interactive 11-step color palette bar for your input color:
- Tailwind: Generates the standard Tailwind CSS weight scale (
50,100,200, ...,900,950) centered around your base color, making it trivial to create custom Tailwind color ramps for your design system. - Shades: Renders 10 darker variants by systematically lowering lightness down to 5%.
- Tints: Renders 10 lighter variants by increasing lightness up to 95%.
- Tones: Renders 10 desaturated variants from 100% saturation down to grayscale (0%).
Hover over any segment to see its label and exact HEX value, and click any segment to immediately switch your input to that color variation.
How the Color Math Works
Every conversion in this tool goes through a common internal RGBA representation. When you type a HEX value, it is decoded to RGB channels. When you type HSL, the hue, saturation and lightness values are mathematically transformed to RGB using the standard HSL-to-RGB formula. OKLCH goes through a two-step matrix transformation: first from OKLCH to OKLab, then from OKLab through linear sRGB to gamma-corrected display sRGB.
Everything runs locally in your browser. Your color values are never sent to a server, logged or stored. All conversions are synchronous and instantaneous, completing in microseconds. There is no debouncing, no loading states and no API calls. This also means the tool works completely offline once the page has loaded.