Entrada
Preparando tu espacio de trabajo…
Cómo usarlo
- Introduce un color HEX, RGB, HSL o un nombre CSS.
- Comprueba la muestra y los valores convertidos.
- Usa el botón Copiar de HEX, RGB o HSL para copiar ese valor.
Un color, tres formatos CSS
Un token de diseño puede llegar en HEX mientras la hoja de estilos usa RGB o HSL. Cambiar su notación permite reutilizar el color sin elegir otro.
La muestra y las tres salidas se actualizan juntas. Los nombres CSS, como rebeccapurple, también se convierten en valores numéricos.
Elegir una notación
HEX resulta compacto para tokens de diseño; RGB muestra los canales rojo, verde y azul; HSL separa tono, saturación y luminosidad. Son formas de describir un color, no formatos de imagen distintos.
Se admite tanto HEX abreviado como largo. Puedes incluir un canal alfa con la sintaxis HEX, RGB o HSL compatible.
#2563ebrgb(37, 99, 235)El mismo color sRGB opaco expresado en HEX y RGB.
Transparencia y precisión
Los valores convertidos conservan el canal alfa. El aspecto del color transparente sigue dependiendo del fondo.
El conversor trabaja en sRGB y redondea los valores mostrados. No convierte espacios de color amplios como Lab, OKLCH o la función CSS color().
Usar el valor convertido
Los botones copian un valor de color, no una declaración completa. Úsalo en color, background-color, border-color o en un token de diseño según corresponda.
Entrada de texto de hasta 1 MiB. Las transformaciones de CSS y HTML se ejecutan en un worker con un límite de 30 segundos. Las herramientas de color usan sRGB; los estilos generados son vistas previas y deben probarse en tu propio diseño.
Preguntas frecuentes
¿Qué formatos de color puedo introducir?
Un valor HEX, RGB o HSL compatible, o un nombre de color CSS. La sintaxis no admitida genera un error en lugar de un valor convertido.
¿Se conserva la transparencia?
Sí. El canal alfa compatible se incluye en las salidas. Comprueba la muestra sobre el fondo donde usarás el color.
¿Por qué cambia la escritura o la precisión del resultado?
Los valores se normalizan y redondean para mostrarlos. No se conservan la abreviación, los espacios ni la representación numérica exacta del original.
¿Admite OKLCH o Display P3?
No. Este editor trabaja con representaciones sRGB y no transforma gamas de color más amplias a sRGB.
¿Se suben mis valores de color?
No. La conversión y la vista previa se ejecutan en el navegador. Copiar envía únicamente la salida seleccionada al portapapeles.