:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}El generador de paletas de colores convierte un solo color base en un conjunto coordinado de colores utilizando reglas de armonía de rueda de color. Elija un color inicial y elija un modo (tonos y tintes, monocromáticos, complementarios, análogos, triádicos o tetrádicos) y la herramienta calcula una paleta equilibrada con el valor hexadecimal, RGB y HSL para cada muestra.
Las buenas combinaciones de colores siguen relaciones predecibles en la rueda de color HSL: los colores complementarios se sientan uno frente al otro, los colores análogos se sientan uno al lado del otro y los colores triádicos están espaciados uniformemente. Hacer estos trabajos a mano significa hacer malabarismos con los ángulos de tono y los valores de ligereza. Esta herramienta hace las matemáticas al instante y muestra el resultado para que puedas elegir un esquema que funcione.
Todo se ejecuta en su navegador. Ajuste el color base, los modos de cambio, haga clic en cualquier muestra para copiar su valor o exporte toda la paleta como propiedades personalizadas de CSS. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.
Utilice el selector de color o escriba un valor hexadecimal para establecer el color en el que se construye la paleta.
Cambia entre tonos y tintes, monocromáticos, complementarios, análogos, triádicos y tetradicos para ver diferentes esquemas coordinados.
Cada muestra muestra su valor hexadecimal, RGB y HSL. Haga clic en una muestra para copiarla o copie toda la paleta como propiedades personalizadas de CSS.
Utilice los colores generados para fondos, acentos y texto en su diseño o hoja de estilo, manteniendo la armonía constante en su interfaz de usuario.
Los tonos y tintes, monocromáticos, complementarios, análogos, triádicos y tetrádicos, cubren todas las relaciones de color comunes.
Cada muestra muestra los tres formatos, por lo que puede colocar el valor correcto directamente en CSS, herramientas de diseño o código
Exporte toda la paleta como :propiedades personalizadas de raíz, listas para pegar en su hoja de estilo como una escala de token de diseño
Las armonías se calculan en HSL para que los tonos se mantengan espaciados uniformemente y los pasos de ligereza se vean equilibrados, no embarrados.
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!