Convertitore di colori
HEX ↔ RGB ↔ HSL ↔ OKLCH
Informazioni su questo strumento
Convert colors between HEX, RGB and HSL formats - the three most common ways to specify color in CSS, design tools and image editors. Plus a CSS-ready sRGB color() value and a Tailwind arbitrary-value snippet.
Useful for translating brand colors between design tools, building design tokens, debugging CSS, and converting screenshot picks into a usable code value. Runs in your browser.
Funzionalità
- HEX, RGB and HSL formats
- CSS color(srgb …) output
- Tailwind arbitrary-value snippet (bg-[#hex])
- Live color preview swatch
- Color picker for visual selection
- Browser-only - colors never uploaded
- Free and unlimited
- Live preview swatch updates as you type any of the formats
Come si usa
- Pick or paste a HEX color (or type RGB / HSL).
- Read the equivalent values in every other format.
- Copy the format you need.
Tutto avviene all'interno del tuo browser con JavaScript e WebAssembly. I tuoi file non vengono mai caricati su un server, mai memorizzati e mai visti da noi.
Domande frequenti
Not yet - this tool currently focuses on HEX, RGB and HSL plus a CSS-ready sRGB color() value. OKLCH (perceptually uniform) and CMYK (print) are on the roadmap.
HSL and HSV are different color models. HSL's L (lightness) hits pure white at 100%; HSV's V (value) hits the pure hue at 100%. Most CSS uses HSL; Photoshop's color picker uses HSV.
Use the Image Color Picker tool to grab the color, then paste the HEX into this tool to get the other formats.
A modern CSS function for specifying colors with explicit color-space. Useful when you want to be unambiguous about which RGB space the values are in.
They use different definitions of "saturation" and "value/lightness". HSL's lightness is the average of the brightest and darkest channels; HSV's value is just the brightest channel. The tool shows both because design tools and CSS each prefer different ones.
Yes - OKLCH and OKLAB are computed using the standard conversion matrix from sRGB, which matches what modern browsers and design tools use. The result is the same number you'd get from Figma or Tailwind.