Selector de colores y generador de paletas
Seleccione colores y genere paletas de colores
Elija un color
Paletas de colores
Material
Pastel
Moderno
Monocromático
Consejos sobre colores
Haga clic en cualquier color de las secciones de armonías o paletas para seleccionarlo.
Use el botón de color aleatorio para descubrir nuevas combinaciones de colores.
Los colores complementarios crean un contraste alto e interés visual.
Los colores análogos crean diseños armoniosos y relajantes.
Los colores triádicos ofrecen un contraste vibrante sin perder la armonía.
Use los tonos oscuros y claros para encontrar variaciones más oscuras o claras de su color.
Vista previa del color
Formatos de color
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)hsla(217, 91%, 60%, 1)Elija un color para ver sus valores, armonías y variaciones.
Complementaria
Análoga
Triádica
Complementaria dividida
Tetrádica
Tonos oscuros y claros
Tonos más oscuros
Tonos más claros
Acerca de la herramienta Selector de colores
Nuestro selector de colores online gratis es una completa herramienta de selección y conversión de colores pensada para diseñadores, desarrolladores y creativos digitales. Elija cualquier color con la entrada de color interactiva, véalo en varios formatos, como HEX, RGB, RGBA, HSL y HSLA, y explore armonías de color para crear esquemas cromáticos bellos y coherentes para sus proyectos.
Ya sea que esté diseñando un sitio web, creando una identidad de marca, desarrollando una interfaz de usuario o realizando arte digital, contar con una buena herramienta de selección de color es esencial. Nuestra herramienta va más allá de la selección básica: genera automáticamente armonías de color complementarias, análogas, triádicas, complementarias divididas y tetrádicas, ofrece paletas de colores seleccionadas (Material, Pastel, Moderna, Monocromática) y permite copiar al portapapeles al instante cada formato de color.
La herramienta incluye un panel grande de vista previa del color, un generador de tonos y matices, generación de colores aleatorios para inspirarse y muestras de paleta en las que se puede hacer clic, que hacen que explorar combinaciones de colores sea rápido e intuitivo. Todos los cálculos de color se realizan al instante en su navegador, sin procesamiento en el servidor, lo que garantiza una experiencia rápida, privada y ágil.
Características principales
- Selector de color interactivo con la entrada de color nativa del navegador
- Cinco formatos de color de salida: HEX, RGB, RGBA, HSL y HSLA
- Copia al portapapeles con un clic para cualquier formato de color
- Cinco tipos de armonía de color: complementaria, análoga, triádica, complementaria dividida y tetrádica
- Generador de tonos y matices para encontrar variaciones más oscuras o más claras
- Cuatro paletas de colores seleccionadas: Material Design, Pastel, Moderna y Monocromática
- Generador de colores aleatorios para inspirarse
- Panel grande de vista previa del color para una evaluación visual precisa
- Validación de la entrada hexadecimal con respuesta en tiempo real
- Diseño adaptable optimizado para computadoras de escritorio y dispositivos móviles
Cómo usar el selector de colores
- Seleccione un color: Haga clic en el cuadro de entrada de color para abrir el selector de color nativo, o escriba un valor HEX directamente en el campo de texto (por ejemplo, #3B82F6).
- Vea los formatos de color: Consulte el color seleccionado en los formatos HEX, RGB, RGBA, HSL y HSLA en la sección Formatos de color, debajo de la vista previa.
- Copie un valor de color: Haga clic en el icono de copiar junto a cualquier formato de color para copiar ese valor al portapapeles y usarlo en CSS, herramientas de diseño o código.
- Explore las armonías de color: Revise las armonías de color generadas automáticamente. Use las pestañas para filtrar tipos de armonía específicos o verlos todos a la vez.
- Ajuste con tonos y matices: Encuentre variaciones más oscuras o más claras del color seleccionado con la sección Tonos y matices.
- Explore las paletas: Haga clic en cualquier muestra de las paletas Material, Pastel, Moderna o Monocromática para seleccionar ese color y ver sus valores y armonías.
- Genere colores aleatorios: Haga clic en el botón de mezclar junto a la entrada de color para descubrir colores nuevos y combinaciones inesperadas que sirvan de inspiración creativa.
Casos de uso
- Diseño y desarrollo web: Elija y convierta colores para hojas de estilo CSS, design tokens y frameworks de frontend. Copie valores HEX, RGB o HSL directamente en su código.
- Creación de identidad de marca: Seleccione los colores primario, secundario y de acento para las guías de marca y use después las armonías de color para construir una paleta de marca completa y coherente.
- Diseño UI/UX: Elija colores de interfaz con el contraste y la armonía adecuados para botones, fondos, textos y elementos interactivos en diseños de interfaz de usuario.
- Proyectos de diseño gráfico: Encuentre y refine colores exactos para ilustraciones, gráficos de redes sociales, material de marketing y proyectos de diseño impreso.
- Diseño de presentaciones: Seleccione esquemas de color profesionales y armoniosos para presentaciones de diapositivas, informes y visualizaciones de datos.
- Enseñanza de la teoría del color: Aprenda sobre las relaciones de color complementarias, análogas, triádicas, complementarias divididas y tetrádicas con el generador de armonías interactivo.
- Pruebas de accesibilidad: Compare valores de color y experimente con relaciones de contraste para asegurarse de que sus diseños cumplan los estándares de accesibilidad WCAG.
- Arte digital e ilustración: Explore paletas de colores y descubra combinaciones armoniosas para pinturas digitales, ilustraciones y obras creativas.
Preguntas frecuentes
¿Qué formatos de color admite la herramienta?
El selector de colores admite cinco formatos: HEX (por ejemplo, #3B82F6), RGB (por ejemplo, rgb(59, 130, 246)), RGBA con canal alfa, HSL (por ejemplo, hsl(217, 91%, 60%)) y HSLA con canal alfa. Todos los formatos se generan automáticamente a partir del color seleccionado.
¿Qué son las armonías de color?
Las armonías de color son combinaciones de colores que resultan estéticamente agradables en conjunto. Nuestra herramienta genera cinco tipos: complementaria (opuestos en la rueda de color), análoga (colores adyacentes), triádica (tres colores equidistantes), complementaria dividida (base + dos colores adyacentes a su complementario) y tetrádica (cuatro colores en forma de rectángulo).
¿Puedo introducir un código HEX específico?
Sí, puede escribir cualquier código de color HEX válido directamente en el campo de texto junto al selector de color. La herramienta valida lo que escribe en tiempo real y actualiza al instante la vista previa, los formatos de color y las armonías cuando se introduce un código hexadecimal válido.
¿Qué son los tonos y los matices?
Esta herramienta crea cinco variaciones más oscuras y cinco más claras cambiando la luminosidad HSL en pasos de 12 puntos porcentuales y manteniendo igual el tono y la saturación. La luminosidad está limitada a 0-100%, por lo que algunas variaciones pueden repetirse en negro o blanco.
¿Esta herramienta es gratuita?
Sí, nuestro selector de colores es totalmente gratis y sin limitaciones. Seleccione, convierta y copie todos los colores que necesite sin crear una cuenta ni pagar nada.
¿Mis datos están seguros?
Por supuesto. Toda la selección y la conversión de colores se procesan por completo en su navegador. No se envían datos a ningún servidor y no se almacena ni se rastrea ninguna información sobre sus elecciones de color.
Consejos y buenas prácticas
- Empiece por las armonías de color: Al construir un esquema de color, seleccione primero su color principal y use después los colores complementarios, análogos o triádicos generados automáticamente como punto de partida para su paleta.
- Use tonos y matices para dar profundidad: Una vez elegido el color principal, use los tonos y matices para crear estados hover, fondos y bordes que mantengan la coherencia visual.
- Use el generador aleatorio para inspirarse: Si se queda sin ideas para elegir colores, haga clic varias veces en el botón aleatorio para descubrir colores inesperados que puedan dar pie a una dirección creativa.
- Pruebe los colores en contexto: Un color que se ve muy bien en el selector puede verse distinto en su diseño real. Pruebe siempre los valores de color copiados en su proyecto antes de decidirse por una paleta.
- Tenga en cuenta la accesibilidad: Asegúrese de que haya suficiente contraste entre el texto y el color de fondo. Una pauta habitual es una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande (WCAG AA).
- Use HSL para los ajustes finos: El formato HSL facilita crear variaciones de un color ajustando la luminosidad (más claro o más oscuro) o la saturación (más vivo o más apagado) sin cambiar el tono.