Qué hace esta herramienta
Cómo funciona la rueda de colores
Cómo se calculan los tipos de paleta
Funciones explicadas
Selector de rueda arrastrable
Arrastra el marcador alrededor de la rueda para cambiar el matiz y la saturación en tiempo real. La paleta se recalculan en cada movimiento para que puedas ver cómo cambia la combinación antes de decidirte por un color.
Entrada Hex con validación
Escribe o pega un código hex directamente (de 3 o 6 dígitos, con o sin #). Un valor no válido se señala de inmediato en lugar de fallar en silencio.
Deslizadores de Matiz / Saturación / Luminancia
Para ajustes precisos que son difíciles de realizar con el ratón en una rueda pequeña, el panel de edición expone el mismo color mediante tres deslizadores independientes que puedes ajustar uno a uno.
Cinco tipos de paletas
Cambia entre complementario, monocromático, análogo, triádico y tetrádico sin volver a seleccionar tu color base; la herramienta reutiliza el mismo matiz y simplemente cambia cómo rota en la rueda.
Copia con un solo clic
Haz clic en cualquier muestra para copiar su código hex, o utiliza los botones debajo de la paleta para copiar todos los colores a la vez como una lista hex simple o como propiedades personalizadas CSS listos para pegar (--color-1, --color-2, etc.).
Cada muestra es editable de forma independiente
Los colores generados no están bloqueados a la fórmula. Arrastra cualquier marcador en la rueda o pasa el cursor sobre una muestra y haz clic en el icono de ajuste para abrir sus propios deslizadores de Matiz/Saturación/Luminancia. Una vez que mueves un color, se queda en la posición asignada en lugar de volver a la posición calculada; solo el cambio de tipo de paleta lo restablece.
Fondo adaptativo según tu color
El área detrás del selector toma un tinte suave y atenuado del color base seleccionado, permitiéndote apreciar cómo se percibe el color en una superficie más grande y no solo como una pequeña muestra.
Descarga como imagen
Además de copiar códigos hex, la paleta se puede descargar como una tarjeta de imagen en formato PNG, JPG o SVG, muy útil para compartir la paleta fuera de un editor de código, en un documento o en un informe de diseño.
¿Para qué puedes usarla?
Elección del esquema de colores para un sitio web o app
Selecciona primero tu color de marca principal y luego genera un conjunto complementario o triádico para aplicar en botones, enlaces y acentos.
Creación de paletas para un sistema de diseño
Copia la paleta como variables CSS y agrégala directamente a tu hoja de estilos como punto de partida para un tema.
Verificación de contraste y conflicto entre dos colores
Establece un color como base y observa dónde se ubica el otro en la rueda con respecto a él; los colores cercanos (ángulo pequeño) son más difíciles de diferenciar, mientras que los opuestos crean el mayor contraste.
Exploración de sombras y tintes de un solo color
Cambia al tipo monocromático para obtener una sombra más oscura y un tinte más claro de tu matiz exacto, ideal para estados hover, bordes o variantes desactivadas de un color de UI.
Información de la herramienta
| Entrada | Código de color Hex (escrito) o clic/arrastre en la rueda |
|---|---|
| Salida | Códigos HEX y propiedades personalizadas CSS (copiados al portapapeles), o tarjeta de paleta descargada en PNG, JPG o SVG |
| Tipos de paleta | Complementario, Monocromático, Análogo, Triádico, Tetrádico |
| Procesamiento | Completamente en el navegador: sin subidas, sin cuenta, sin peticiones al servidor |
| Modelo de color | HSL (matiz, saturación, luminosidad), convertido a y desde hex |
Beneficios
- No se requiere cuenta ni registro: la rueda funciona inmediatamente al cargar la página.
- La paleta se actualiza al instante mientras arrastras, lo que permite comparar opciones rápidamente.
- Copiar como variables CSS te evita renombrar y reestructurar manualmente los códigos hex.
- La base matemática de cada tipo de paleta es fija y consistente, haciendo que los resultados sean predecibles una vez que entiendes la regla.
Limitaciones
- La rueda en sí solo muestra el matiz y la saturación; la luminosidad debe ajustarse por separado con el deslizador.
- Esta herramienta genera paletas basadas en reglas de teoría del color; no verifica relaciones de contraste ni cumplimiento de accesibilidad (WCAG).
- Copiar al portapapeles requiere un navegador compatible con la Clipboard API; en navegadores muy antiguos los botones de copia pueden no funcionar.
- El archivo PNG/JPG/SVG descargado es una tarjeta de paleta simple (bloques de color con etiquetas hex) en lugar de una imagen de la rueda interactiva.
- Arrastrar el marcador de una muestra solo cambia directamente el matiz y la saturación; su luminosidad conserva el valor calculado hasta que se ajuste con el deslizador de Luminancia.
Privacidad
Ningún color, código hex o paleta que crees se envía a ningún servidor. Todo el cálculo se realiza localmente en la pestaña de tu navegador, y al cerrar o actualizar la página todo se borra.
Tratamiento de datos
Esta herramienta no utiliza cookies, no almacena tus paletas y no requiere inicio de sesión.
Consejos
- Si dos colores en tu paleta se ven demasiado similares, prueba un tipo de paleta más amplio (triádico o tetrádico en lugar de análogo).
- Para trabajos de interfaz de usuario (UI), mantén la saturación más baja (40-60%) si prefieres una paleta más suave en lugar de una muy llamativa.
- Utiliza el tipo monocromático para crear variantes de estado hover/activo/deshabilitado de un solo color de marca.
Preguntas frecuentes
¿Esta herramienta guarda mis paletas?
No. No se almacena nada: si recargas la página o cierras la pestaña, la paleta se perderá a menos que ya la hayas copiado en otro lugar.
¿Cuál es la diferencia entre la rueda y los deslizadores?
La rueda controla el matiz y la saturación juntos según dónde hagas clic o arrastres. Los deslizadores del panel de edición permiten definir el matiz, la saturación y la luminancia de forma independiente, lo cual es más sencillo para obtener valores exactos.
¿Puedo usar códigos hex de 3 dígitos como #1ec?
Sí, el campo hex acepta códigos hex tanto de 3 dígitos como de 6 dígitos, con o sin el símbolo # inicial.
¿Por qué la rueda se muestra a todo color pero el color que elegí se ve apagado?
El fondo de la rueda siempre muestra la saturación máxima en el borde como referencia visual. La saturación real de tu color se representa por la distancia de su marcador al centro, mientras que su luminosidad es un valor independiente que se ajusta con el deslizador de Luminancia.
Si muevo una muestra, ¿afecta a las demás?
No. Mover o editar una muestra solo cambia ese color en específico. Las demás muestras permanecen en sus posiciones calculadas hasta que las muevas o hasta que cambies el tipo de paleta, lo que restablece todos los ajustes manuales.
¿Cuál es la diferencia entre las descargas en PNG/JPG y SVG?
Muestran la misma tarjeta de paleta. PNG y JPG son imágenes de resolución fija, mientras que el formato SVG mantiene la nitidez a cualquier tamaño y se puede editar posteriormente en una herramienta vectorial.