Ir al contenido principal
← Herramientas

Herramienta gratuita

Conversor de colores

Convierte colores HEX, RGB, HSL y CSS al instante para flujos de diseño y desarrollo.

En el navegadorSin registroGratis para siempre

Prueba HEX, rgb(), hsl() o un nombre CSS como red.

✓ Color válido detectado

Color Tailwind más cercano: green-500

Bajo contraste sobre fondo blanco · Relación de contraste 2.28:1

HEX

#22c55e

RGB

rgb(34, 197, 94)

HSL

hsl(142, 71%, 45%)

HSV

hsv(142, 83%, 77%)

CMYK

cmyk(83%, 0%, 52%, 23%)

Coincidencia Tailwind

green-500 · #22c55e

Variable CSS

--primary-color: #22c55e;

Color CSS

color: #22c55e;

Optimizado para flujos con CSS y Tailwind

Listo para desarrollo web

Conversión instantánea en el navegador

Vista previa

#22c55e

¿Necesitas facturas profesionales para tu negocio? Crea facturas gratis con Invoicey.

Flujo

Cómo funciona

Tres pasos rápidos desde la entrada hasta un resultado que puedes usar en tu flujo.

1

Paso 1

Introduce o elige un color

2

Paso 2

Convierte al instante

3

Paso 3

Copia el formato que necesitas

Por qué lo usan los equipos

Beneficios y casos de uso

  • Convert HEX, RGB, HSL, and named colors instantly in your browser.
  • See a live preview plus HSV, CMYK, Tailwind nearest match, and CSS snippets.
  • One-click copy for every format — built for designers and developers.
  • No signup, dashboards, or heavy “design software” UI.
  • Runs locally in the session for a fast, lightweight workflow.

Overview

Quick context

What does this color converter do?

This tool parses common web color inputs — including HEX codes, rgb()/rgba(), hsl()/hsla(), and CSS named colors — then normalizes them and shows equivalent values in multiple formats. A large preview updates as you type so you can judge the color visually in one glance, without opening a full graphics suite.

Why convert between HEX, RGB, and HSL?

Different tools and codebases prefer different representations. Designers often think in HEX or HSL for quick tweaks, while components and APIs may consume rgb() values. Converting instantly avoids mental math, reduces copy-paste errors, and keeps CSS variables and design tokens aligned across Figma notes, Tailwind configs, and production stylesheets.

Tailwind match and CSS variable output

For Tailwind projects, the closest default palette token can speed up class selection. The CSS variable line formats a ready-to-paste custom property such as --primary-color, which fits modern theming and component libraries. These outputs are optional helpers; you can still copy raw HEX or rgb() when that is what your stack needs.

Respuestas

FAQ

¿Este conversor de colores es gratis?

Sí. Funciona en tu navegador y no requiere registro.

¿Qué formatos de color admite?

HEX, rgb/rgba, hsl/hsla, salidas HSV y CMYK, variables CSS y nombres CSS habituales.

¿Puedo convertir RGB a HEX?

Sí. Pega un valor rgb() y copia el campo HEX al instante.

¿Admite colores HSL?

Sí. Escribe hsl() o hsla() y el resto de formatos se actualiza solo.

¿Puedo copiar los valores convertidos?

Sí. Cada formato tiene copia con un clic.

Conversor de colores gratuito | Invoicey