nicetool.dev logo

Conversor de colores

Escribe cualquier color CSS (HEX, rgb(), hsl(), oklch(), cmyk() o un nombre de color).

#3B82F6
Formatos
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91.2% 59.8%)
  • HSVhsv(217 76% 96.5%)
  • HWBhwb(217 23.1% 3.5%)
  • OKLCHoklch(62.31% 0.188 259.81)
  • CMYKcmyk(76% 47% 0% 4%)

Contraste WCAG

Aa 123

Texto sobre blanco

3.68:1

AAAA grandeAAA
Aa 123

Texto sobre negro

5.71:1

AAAA grandeAAA

Tonos

Haz clic en un tono para usarlo.

¿Por qué convertir formatos de color?

Diseñadores y desarrolladores trabajan con colores en muchos formatos: HEX en herramientas de diseño, rgb() y hsl() en CSS, OKLCH en sistemas de diseño modernos como Tailwind CSS v4 y CMYK para impresión. Esta herramienta los convierte entre sí al instante.

Características

  • • Salida en HEX, RGB, HSL, HSV, HWB, OKLCH y CMYK
  • • Selector de color nativo y control de opacidad
  • • Relación de contraste WCAG 2 contra blanco y negro
  • • Paleta automática de tonos claros y oscuros

Instantáneo y local

Todas las conversiones se calculan en tu navegador sin peticiones de red.

Colores accesibles, cero rastreo.

Cómo usar: Conversor de colores

  1. 1

    Escribe un color en cualquier formato CSS: #3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) o un nombre como tomato. También puedes elegirlo con el selector.

  2. 2

    Ajusta la opacidad si necesitas transparencia. Todos los formatos se actualizan juntos, incluido HEX de 8 dígitos y rgba.

  3. 3

    Copia el formato que necesites: HEX para el traspaso de diseño, rgb() o hsl() para CSS, OKLCH para tokens de diseño modernos y CMYK como punto de partida para imprenta.

  4. 4

    Revisa el contraste WCAG con texto blanco y negro, y haz clic en un tono de la paleta para explorar variantes más claras u oscuras.

Ejemplos prácticos

Del diseño al código

Un diseñador te pasa #0EA5E9 desde Figma. Conviértelo a hsl() para crear estados hover y active cambiando solo la luminosidad.

Comprobaciones de accesibilidad

El texto principal necesita un contraste de al menos 4,5:1 según WCAG AA. Comprueba un color de marca antes de usarlo como fondo de botón con texto blanco.

Crear una escala de color

Usa los tonos generados como base para una paleta de 50 a 900 en Tailwind CSS o tu sistema de diseño.

Material impreso

Convierte un color de pantalla a CMYK para hablar con la imprenta. Tómalo como aproximación: el color exacto depende del papel y del perfil de impresión.

Preguntas frecuentes

¿Diferencia entre RGB y HSL?+

Ambos describen los mismos colores. RGB mezcla luz roja, verde y azul; HSL usa tono, saturación y luminosidad, más fácil de ajustar para personas, por ejemplo aclarar un color un 10%.

¿Por qué usar OKLCH?+

OKLCH es perceptualmente uniforme: cambios iguales de luminosidad se ven igual de distintos, a diferencia de HSL. Lo soportan todos los navegadores modernos y facilita escalas coherentes y temas oscuros.

¿Qué contraste necesito?+

WCAG AA pide 4,5:1 para texto normal y 3:1 para texto grande (unos 24 px, o 19 px en negrita). AAA lo sube a 7:1 y 4,5:1.

¿El valor CMYK es exacto?+

No. Convertir RGB de pantalla a CMYK sin perfil de color da una aproximación matemática. Para impresiones críticas de marca pide una prueba de color o usa referencias Pantone.