Che cos'è il formato OKLCH e perché usarlo?

OKLCH è uno spazio colore percettivamente uniforme: a differenza di HSL, variazioni uguali nei valori corrispondono a variazioni uguali percepite dall'occhio, utile per generare palette e gradienti più coerenti visivamente.

Come viene calcolato il contrasto WCAG?

Lo strumento calcola il rapporto di contrasto tra due colori secondo la formula WCAG 2.1, indicando se il risultato soddisfa i livelli AA o AAA per testo normale e testo grande.

I colori inseriti vengono salvati da qualche parte?

No, tutte le conversioni e i calcoli avvengono localmente nel browser, senza inviare alcun dato a un server.

Free Online Color Picker — Convert HEX RGB HSL OKLCH

How to convert HEX colors to RGB

A HEX color is simply the hexadecimal notation of the three RGB channels. #3b82f6 → R=59 (3b in hex), G=130 (82), B=246 (f6). In CSS you can use HEX, rgb(), hsl() or the modern oklch() interchangeably.

OKLCH is the modern color format recommended for design: its components (Lightness, Chroma, Hue) match human color perception, making it easy to build consistent tonal scales. It's supported by all modern browsers and by Tailwind v4.

What is WCAG contrast?

WCAG contrast (Web Content Accessibility Guidelines) measures the luminance ratio between text and background. AA requires at least 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1. This tool calculates the contrast between your color and white/black.

When to use a color picker with format conversion

This tool converts colors between HEX, RGB, HSL and OKLCH, generates palettes, and calculates WCAG contrast — useful during web development or design to choose and verify accessible colors.

When to use it

You need to convert a color from one format to another (e.g. from HEX to RGB) to use it in CSS or another tool.

You want to check that the contrast between text and background meets WCAG accessibility guidelines.

You're building a consistent color palette for a web or graphic design project.

When NOT to use it

You need to handle advanced color profiles for print (CMYK, Pantone): this tool is designed for the web (HEX, RGB, HSL, OKLCH), not for professional print workflows.

Alternatives

Design software (Figma, Adobe) with a built-in color picker when you're already working inside that environment.

Browser DevTools to inspect and edit colors directly on an existing page.

Common mistakes

Choosing colors purely for looks without checking contrast, risking unreadable text for users with low vision.

Confusing HSL and OKLCH: OKLCH is newer and perceptually more uniform, useful for generating palettes that look consistent to the human eye compared to HSL.

Frequently asked questions about the color picker

OKLCH is a perceptually uniform color space: unlike HSL, equal changes in the values correspond to equal changes perceived by the eye, which helps generate visually consistent palettes and gradients.

The tool calculates the contrast ratio between two colors using the WCAG 2.1 formula, showing whether the result meets the AA or AAA levels for normal and large text.

No, all conversions and calculations happen locally in your browser, without sending any data to a server.

🎨 Color Picker