como funciona
Sujete cada canal a 0-255, redondeelo y luego escriba dos dígitos hexadecimales por canal detrás de #. HSL se deriva de las relaciones RGB: tono del canal dominante, saturación de la distancia entre máximo y mínimo, luminosidad de su promedio.
- HEX acepta 3 o 6 dígitos; los valores están fijados entre 0 y 255.
Por qué es importante
Las herramientas de diseño exportan diferentes formatos y CSS espera formatos específicos. La conversión manual invita a errores de redondeo, y el mismo color escrito de tres maneras es fácil de verificar una vez que se ven todas las representaciones una al lado de la otra.
Un ejemplo trabajado
rgb(99, 91, 255) es #635BFF y hsl(244, 100%, 68%). La forma HEX es la que los autores de CSS pegan con mayor frecuencia; HSL es más fácil de oscurecer o desaturar sin tener que adivinar nuevos canales.
Errores comunes
- Suponiendo que el mismo HEX parezca idéntico en todas partes sin gestión del color.
- Olvidar que HEX de tres dígitos expande cada mordisco dos veces.
- Editar canales RGB cuando querías ajustar la luminosidad.
Consejos prácticos
Diseñe en HSL cuando necesite tintes y sombras sistemáticos: mantenga el tono y la saturación, varíe la luminosidad en pasos. Guarde el HEX para la salida, pero mantenga las notas HSL en el archivo de diseño para futuros ajustes.
como usarlo
- Abra la herramienta. Todo se ejecuta en la pestaña de su navegador.
- Pegue o escriba su entrada, luego elija la acción que necesita.
- Comprueba el resultado y cópialo con un clic.
Preguntas comunes
¿Por qué mi valor HEX es diferente en otra herramienta?
Los valores se limitan a 0-255 y se redondean, luego se escriben como HEX en mayúsculas. Algunas herramientas mantienen entradas en minúsculas o no válidas.
¿Qué es HSL?
Una representación alternativa: tono en grados, saturación y luminosidad en porcentaje. Es útil para ajustar los colores.
¿Comprueba el contraste?
No. Esto convierte formatos de color; La comprobación del contraste es una herramienta diferente.
¿Esta herramienta es realmente gratuita?
Sí. No hay cuenta, muro de pago ni límite de uso. La aplicación Tools está financiada por aumenso, el estudio detrás de ella.
¿Se ha subido algo de lo que ingreso?
No. La herramienta se ejecuta en la pestaña de su navegador; lo que usted ingresa nunca se nos envía ni se almacena.