Quick presets:
Complementary
5 colors · Click any swatch to copy HEX
Base
rgb(13, 162, 231)
hsl(199°, 89%, 48%)
Base Light
rgb(101, 200, 246)
hsl(199°, 89%, 68%)
Base Dark
rgb(8, 95, 135)
hsl(199°, 89%, 28%)
Complement
rgb(231, 82, 13)
hsl(19°, 89%, 48%)
Complement Light
rgb(246, 147, 101)
hsl(19°, 89%, 68%)
Export
:root {
--color-base: #0da2e7;
--color-base-light: #65c8f6;
--color-base-dark: #085f87;
--color-complement: #e7520d;
--color-complement-light: #f69365;
}- 7 reglas de armonía: genere paletas utilizando escalas de tonos complementarias, triádicas, análogas, complementarias divididas, tetrádicas, monocromáticas y estilo Tailwind a partir de cualquier color de semilla.
- Matemáticas de color precisas: todas las conversiones utilizan algoritmos RGB/HSL adecuados con cálculo de relación de contraste WCAG. Vea la luminancia relativa y las insignias de aprobación/rechazo para texto blanco y negro en cada muestra.
- Valores HEX, RGB y HSL: cada muestra muestra sus valores HEX, RGB y HSL. Haga clic en cualquier muestra para copiar el código HEX a su portapapeles al instante.
- Exporte como CSS, SVG o TXT: descargue su paleta como propiedades personalizadas de CSS, hoja de muestras SVG o lista HEX de texto sin formato. Perfecto para sistemas de diseño, configuraciones de Tailwind y documentación.
Casos de uso comunes para el generador de paleta de colores
- Diseño de interfaz de usuario y creación de prototipos: genere paletas de colores armoniosas para maquetas de interfaz de usuario de sitios web y aplicaciones. Utilice reglas complementarias y análogas para crear interfaces equilibradas con una jerarquía de colores adecuada.
- Tailwind CSS y tokens de diseño: utilice la regla Tonos 50→900 para generar escalas de tonos completas para colores de marca personalizados. Exporte variables CSS y conéctelas directamente a la configuración de su sistema de diseño.
- Creación de sistemas de diseño: cree un sistema de colores consistente para sus tokens de diseño. Genere paletas tetrádicas y triádicas que funcionen juntas y luego expórtelas como propiedades personalizadas de CSS para la documentación de su sistema de diseño.
- Identidad de marca y logotipos: al crear una identidad de marca, utilice las reglas complementarias o análogas para encontrar colores que complementen el color principal de su marca manteniendo la armonía visual.
- Presentación y presentaciones de diapositivas: cree esquemas de color coherentes para presentaciones. Utilice la regla monocromática para obtener una variedad de matices y sombras que mantengan sus diapositivas profesionales y consistentes.
- Visualizaciones de datos y gráficos: genere paletas de colores accesibles para gráficos e infografías. Cada muestra incluye insignias de contraste WCAG para que pueda verificar la legibilidad tanto en fondos blancos como negros.
Preguntas frecuentes
El generador de paleta de colores admite siete reglas de armonía: complementaria (colores opuestos en la rueda, alto contraste), tríada (tres colores espaciados uniformemente, equilibrado), análoga (colores adyacentes, armoniosos), complementaria dividida (color base más dos casi complementarios), tetrádica (cuatro colores en un rectángulo, complejo), monocromática (mismo tono en diferentes niveles de luminosidad) y tonos 50→900 (escala de tonos de diez pasos estilo Tailwind).
Simplemente haga clic en cualquier tarjeta de muestra para copiar su código HEX a su portapapeles. Aparece brevemente un icono de marca de verificación para confirmar la copia. Cada muestra también muestra valores RGB y HSL para que puedas usarlos en cualquier herramienta de diseño o editor de código. Para exportación masiva, utilice las opciones de descarga de Variables CSS, SVG o TXT en la sección Exportar.
Cada muestra muestra dos insignias: una para texto blanco (⬜) y otra para texto negro (⬛). Las insignias verdes indican que el color cumple con el requisito de contraste de las WCAG; el rojo indica que falla. Los niveles mostrados son AA Grande (3:1), AA (4,5:1) y AAA (7:1). Esto le ayuda a evaluar rápidamente si un color es legible como fondo para el texto.
¡Sí! Seleccione la regla de armonía "Sombras 50→900" para generar una escala de sombras de diez pasos (50, 100, 200, 300, 400, 500, 600, 700, 800, 900): el mismo patrón utilizado por Tailwind CSS. El color base se convierte en el tono 500, con variantes más claras y más oscuras generadas automáticamente. Exporte las variables CSS para usarlas directamente en su tailwind.config.js.
Puede exportar su paleta en tres formatos: Variables CSS (propiedades personalizadas como: raíz {...}), Hoja de muestras SVG (una cuadrícula visual de muestras de color con etiquetas hexadecimales) y Texto sin formato (lista de nombres: pares hexadecimales). Utilice el botón Copiar CSS o los botones Descargar para archivos CSS, SVG o TXT.
Todas las conversiones de color utilizan algoritmos estándar para la conversión RGB↔HSL con representación adecuada de tono (0-360°), saturación (0-100%) y luminosidad (0-100%). Las relaciones de contraste se calculan utilizando la fórmula de luminancia relativa WCAG 2.1, que tiene en cuenta la corrección gamma no lineal de los dispositivos de visualización. Esto garantiza información de color precisa y confiable.
Sí, el Generador de paleta de colores es completamente gratuito y no es necesario registrarse. No hay tarifas ocultas, funciones premium ni límites en la cantidad de paletas que puede generar. Dado que todo se ejecuta localmente en su navegador, no hay costos de servidor ni límites de API.
Después de la carga inicial de la página, el Generador de paleta de colores funciona completamente sin conexión. Todas las funciones de matemáticas de color, representación de muestras y exportación se ejecutan en su navegador sin ninguna solicitud del servidor. Esto la convierte en una herramienta confiable para diseñadores y desarrolladores que trabajan en entornos con conectividad a Internet limitada o nula.