Convertidor de colores

Pega un color en cualquier formato y cópialo en todos los demás: hex a rgb, rgb a hex, hex a hsl, un convertidor de OKLCH, hex a CMYK, Display P3 y más.

Cómo convertir un color

  1. Pega o escribe un color en cualquier formato CSS: hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() o color(), un valor CMYK o un nombre de color como coral.
  2. La línea de estado confirma lo que se leyó, incluida su opacidad y si el color cabe dentro de sRGB o Display P3.
  3. Copia cualquier fila de la lista de formatos. Están agrupados en web, perceptuales, de dispositivo y código nativo.
  4. La dirección de la página se actualiza con tu color, así que puedes guardar o compartir una conversión.

Qué puedes hacer

  • Formatos web

    HEX, con HEX de 8 dígitos cuando hay opacidad, además de RGB, HSL y HWB, escritos como los espera CSS.

  • Formatos perceptuales

    CIE Lab, LCH, OKLab y OKLCH, además de una variable de tema de Tailwind v4 lista para usar.

  • Display P3 y CMYK

    Display P3 de gama amplia y una estimación CMYK sencilla. Si un color queda fuera de sRGB, obtienes una alternativa con gamut ajustado y otra recortada.

  • Código nativo

    Valores de Android ARGB, Swift UIColor, SwiftUI Color y Flutter Color, listos para pegar.

  • Opacidad

    Un color con alfa conserva su opacidad en todos los formatos que pueden representarla.

  • Ejemplos y siguientes pasos

    Prueba las entradas de ejemplo, abre la página del color para ver tonos y armonías, o verifica su contraste.

Preguntas frecuentes

¿Cómo convierto un código HEX a RGB?

Pega el código hex, por ejemplo #3B82F6, y copia la fila RGB. A mano, divide los seis dígitos en tres pares y convierte cada par de base 16 a un número del 0 al 255: 3B es 59, 82 es 130 y F6 es 246, así que #3B82F6 es rgb(59, 130, 246).

¿Cómo convierto RGB a HEX?

Ingresa el valor rgb() y copia la fila HEX. A mano, escribe cada canal con dos dígitos hexadecimales y únelos: 59, 130 y 246 se convierten en 3B, 82 y F6, lo que da #3B82F6.

¿Cuál es la diferencia entre HEX, RGB y HSL?

HEX y RGB describen lo mismo: las cantidades de luz roja, verde y azul que se mezclan. HEX escribe las tres cantidades en base 16 y RGB en base 10. HSL describe en cambio el tono, la saturación y la luminosidad, lo que es más fácil de ajustar a mano.

¿Qué es OKLCH?

OKLCH es un formato de color CSS con tres partes: luminosidad, croma y tono. Se basa en el espacio de color OKLab, donde pasos numéricos iguales se ven como pasos visuales iguales, por lo que cambiar la luminosidad no desplaza el tono aparente como ocurre con HSL. Los navegadores modernos lo admiten mediante oklch().

¿El valor CMYK es exacto para imprimir?

No. El valor CMYK sale de una fórmula sencilla sin perfil ICC, así que el color impreso variará. Úsalo como punto de partida y revisa una prueba con tu imprenta.