El selector de colores de UtilWave te permite elegir cualquier color visualmente y copiar su código en los formatos más usados en diseño y desarrollo web: HEX, RGB y HSL. Sin instalaciones, sin plugins - funciona directamente en tu navegador.
¿Qué son los formatos de color en web?
Existen tres formas principales de expresar un color en el desarrollo web:
- HEX: un código hexadecimal de 6 caracteres precedido por
#. Ejemplo:#3B82F6. Es el formato más usado en CSS y herramientas de diseño. - RGB: tres valores entre 0 y 255 para los canales rojo, verde y azul. Ejemplo:
rgb(59, 130, 246). - HSL: matiz (hue, 0-360°), saturación (0-100%) y luminosidad (0-100%). Ejemplo:
hsl(217, 91%, 60%). Es más intuitivo para los diseñadores porque permite ajustar tonos con facilidad.
Los tres formatos representan exactamente el mismo color - solo cambia la notación.
Cómo usar el Selector de Colores
- Abre la herramienta en UtilWave.
- Usa el selector visual para elegir el color deseado (zona de color y barra de tono).
- El código HEX, RGB y HSL se muestran automáticamente.
- Haz clic en cualquier código para copiarlo al portapapeles.
- Opcionalmente, escribe directamente un valor HEX, RGB o HSL para cargar ese color.
Casos de uso comunes
- Desarrollo CSS: cuando el diseñador entrega un color en HEX y necesitas convertirlo a RGB para usarlo con opacidad (
rgba). - Diseño de marca: explorar variaciones de un color ajustando luminosidad en HSL sin cambiar el tono.
- Accesibilidad: encontrar versiones más claras o más oscuras de un color que mantengan suficiente contraste.
- Paletas de color: explorar colores complementarios y adyacentes para diseño gráfico.
- Desarrollo de apps: definir colores del sistema (primario, secundario, acentos) en distintos formatos.
Preguntas frecuentes
¿Cuándo usar HEX, RGB o HSL?
HEX es el estándar para definir colores en CSS y compartirlos entre herramientas. RGB es necesario cuando quieres control individual de canales o agregar transparencia con rgba(). HSL es preferido cuando quieres crear variaciones armoniosas de un color.
¿Qué es el canal alfa y cómo lo manejo?
El canal alfa controla la transparencia (0 = completamente transparente, 1 = opaco). En CSS se usa rgba(59, 130, 246, 0.5) o hsla(217, 91%, 60%, 0.5). El selector te da el color base y tú agregas el alfa según lo necesites.
¿Puedo ingresar un color HEX corto como #FFF?
Sí. Los colores HEX de 3 caracteres son una abreviatura válida donde cada dígito se duplica: #FFF equivale a #FFFFFF.
¿El selector funciona en móvil? Sí, aunque en dispositivos táctiles puede ser más difícil precisar el color. Para máxima precisión, escribe el código directamente en el campo HEX.
Elige y copia cualquier color con el Selector de Colores de UtilWave.