Selector de color (Color Picker)

Elige colores y copia valores listos para usar

Un buen selector de color debe hacer más que mostrar un cuadrado bonito. Diseñadores, desarrolladores y creadores de contenido suelen necesitar el mismo color en varios formatos según el destino. CSS admite HEX, RGB y HSL, los sistemas de diseño pueden documentar los tokens en HEX y los ajustes rápidos de prototipos suelen ser más fáciles en HSL, porque el tono, la saturación y la luminosidad se cambian de forma independiente. Esta herramienta muestra esos formatos uno junto a otro para que elijas el color una sola vez y copies el valor que encaje en tu flujo de trabajo.

Todo ocurre localmente en el navegador. La entrada de color, los cálculos de conversión y los botones de copiado funcionan con JavaScript del lado del cliente, por lo que no hay cuenta, subida de archivos ni procesamiento remoto. Así, la herramienta es útil para paletas de marca privadas, temas de producto sin publicar, trabajos para clientes y experimentos rápidos de interfaz que no deben salir de tu equipo.

Cómo usar tintes y sombras en las interfaces

Los tintes y las sombras permiten que un único color de marca sostenga una interfaz completa. Los tintes más claros sirven para fondos sutiles, estados hover, paneles de notificación y filas seleccionadas. Las sombras más oscuras aportan bordes, estados pulsados, acentos para el modo oscuro o texto de alto énfasis cuando el color original es demasiado brillante. Las muestras de aquí mantienen constantes el tono y la saturación mientras cambian la luminosidad, lo que crea una escala sencilla que se siente relacionada con el color base.

Considera la escala generada como un punto de partida y no como un sistema de diseño final. La percepción humana no es perfectamente lineal y algunos tonos necesitan ajuste manual para parecer igualmente espaciados. Los azules y morados suelen tolerar rangos amplios de luminosidad, mientras que los amarillos pueden necesitar sombras más oscuras para un texto legible. Copia los valores, pruébalos en el componente real y refina los pasos que más importan.

Cómo elegir entre HEX, RGB y HSL

HEX es compacto y habitual en la entrega de diseños, por lo que es una buena opción por defecto para la documentación. RGB resulta útil cuando una herramienta pide canales numéricos de rojo, verde y azul o cuando piensas directamente en la luz de la pantalla. HSL suele ser el formato más cómodo para ajustes pequeños: cambia el tono para girar por la rueda de color, baja la saturación para lograr un tono más sereno o modifica la luminosidad para obtener un tinte o una sombra. Mantener los tres visibles reduce los errores al pasar entre herramientas de diseño, archivos CSS y bibliotecas de componentes.