LibraTool logoLibraTool
🎨
🌐

Convert Colors for Web Design

Get HEX, RGB, and HSL values for any colour — ready to paste into CSS or Tailwind.

No cal iniciar sessió

Accepts: HEX (#fff or #ffffff), RGB (255, 255, 255), or HSL (360, 100%, 50%)

Presets:
HEX#14B8A6
RGBrgb(20, 184, 166)
HSLhsl(173, 80%, 40%)
HSVhsv(173, 89%, 72%)
CMYKcmyk(89%, 0%, 10%, 28%)
CSS RGB20, 184, 166

Lightness scale

Click any swatch to switch to that shade

Web Design tips

🌐

CSS supports all three formats: hex (#14b8a6), rgb(20, 184, 166), and hsl(174, 80%, 40%). Pick whichever matches your codebase conventions.

🎨

HSL is often easier to work with when building colour scales — just adjust the lightness (L) value to get lighter or darker shades.

💡

Tailwind CSS uses HEX values in its config. Copy the HEX output and use it directly in tailwind.config.ts for custom colours.

🖥️

For CSS custom properties (variables), use the RGB triplet without rgb(): --color-primary: 20, 184, 166. Then reference with rgb(var(--color-primary)).

Com funciona

1
Introdueix
Enter your data into the tool above. Everything stays local to your browser.
2
Processa
The tool processes your data instantly in your browser using JavaScript. No server, no waiting.
3
Descarrega
Get your result instantly. Nothing is stored after you leave the page — complete privacy.

Per què usar la nostra?

✓Completament gratuït — sense costos ocults, mai
✓No cal compte, correu electrònic ni inici de sessió
✓Els fitxers no surten mai del teu dispositiu
✓Sense cap límit de mida de fitxer
✓Sense marques d'aigua en cap sortida

Also check out…

🖨️

Convert Colors for Print (CMYK)

Convert screen colours (HEX/RGB) to CMYK values fo

🎨

Build Color Palettes for Design Systems

Convert brand colours across all formats and gener

♿

Check Colour Contrast for Accessibility

Convert colours to get RGB values for use in contr

🖌️

Convert Colors for Figma

Get the exact HEX and RGB values to paste into Fig

Preguntes freqüents

Back to Color Converter