Utilore

Convertidor de color

Escribe un color en cualquier notación habitual —#1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214)— y aparecerán todas las demás formas, junto con las cifras de contraste que necesitas para que el texto se lea.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

Contraste:

Cómo usarlo

  1. Escribe o pega el color, o elígelo con el selector.
  2. Consulta HEX, RGB y HSL uno al lado del otro.
  3. Copia la notación que necesite tu archivo.

Lo que conviene saber

Tres notaciones para el mismo color

HEX es compacto y universal en CSS. RGB nombra los canales de forma explícita, lo que importa cuando el valor se calcula en vez de escribirse a mano. HSL describe tono, saturación y luminosidad: es la forma a la que recurrir cuando quieres el mismo color un punto más claro, porque cambias un número en lugar de adivinar tres.

El contraste no es decoración

Según la WCAG, el texto normal necesita una relación mínima de 4,5:1 con su fondo, y el texto grande, de 3:1. Las dos cifras que se muestran aquí te dicen enseguida si ese color admite texto blanco, texto negro o ninguno de los dos, antes de que el diseño llegue a un desarrollador.

Fuentes

Preguntas frecuentes

¿Qué formatos acepta?

HEX de tres, cuatro, seis y ocho dígitos, con o sin almohadilla, además de rgb() y rgba() con comas o espacios. El canal alfa se conserva y aparece en el valor HEX.

¿Por qué HSL muestra a veces un color algo distinto?

Los valores HSL se redondean a números enteros para que se lean bien, así que la ida y vuelta puede desplazar un canal en una unidad. HEX y RGB sí son exactos.

¿Se envía algo a un servidor?

No. Todo se calcula en la página: los colores de una marca aún no publicada no salen de tu equipo.

Herramientas relacionadas