COLOR, CON PROPÓSITO
Desde un color de marca única hasta prácticos esquemas de color web. Elija paletas coincidentes, obtenga una vista previa de los efectos de la página y exporte sus variables de diseño.
TU PALETA
Se están preparando tarjetas de paleta de colores. Habilite JavaScript para comenzar a usarlo.
haga clic en un valor de color para editar su HEX con precisión o en una muestra grande para copiarlo. El color de la marca permanece fijo; Se pueden bloquear otras muestras.
Solo se conservan los últimos 50 pasos. Actualizar borra el historial.
11 pasos de ligereza para estado y jerarquía
VERLO EN CONTEXTO
Organice proyectos, conecte equipos y convierta grandes ideas en próximos pasos en un espacio de trabajo limpio.
Desde tareas diarias hasta nuevos avances, comparte el progreso con tu equipo y concentra tu energía en lo que realmente importa.
El texto y los números de muestra son solo para obtener una vista previa de los esquemas de color. Los modos de cambio reorganizarán los colores de fondo, superficie y texto; Los colores funcionales pueden diferir de las tarjetas de colores originales.
FICHAS DE DISEÑO
VERIFICACIÓN DE CONTRASTE
Texto normal ≥ 4,5:1, texto grande ≥ 3:1. Los límites de control que se basan en el reconocimiento de colores normalmente requieren ≥ 3:1; Las líneas decorativas están exentas. El informe comprueba pares de colores específicos; Las páginas completas aún requieren verificación del tamaño de fuente, el estado y el fondo.
Haga clic en proporciones en la matriz para comparar el primer plano y el fondo.
Las relaciones de contraste entre muestras ayudan a evaluar las combinaciones candidatas; La idoneidad del texto del cuerpo, los controles de la interfaz de usuario o los gráficos depende del caso de uso específico.
LISTO PARA TU PRÓXIMO PASO
Exporta colores de roles semánticos, paletas de colores de acento y escalas de colores primarios para el modo de tema activo.
Después de copiar a su hoja de estilo, establezca los colores de fondo y de texto para los componentes reales, luego verifique los estados de desplazamiento, deshabilitado y enfoque.
Los esquemas de color no se cargan ni guardan de forma predeterminada. Utilice enlaces de paletas o descargue archivos para conservar sus resultados. Presione espacio en el espacio vacío del banco de trabajo para cambiar de conjunto; Bloquee las tarjetas de colores para conservarlas. Esta página contiene anuncios del sitio.
Conecta este paso con tu objetivo
Después de usar esta herramienta, continúe con los pasos relevantes. Las marcas de la lista de verificación son sus propias notas, no una prueba aprobada ni una aprobación comercial.
Ver todos los objetivos comercialesLos pasos de IA tienen límites de uso compartidos y verificación humana. Se ejecutan solo cuando usted los envía y no reciben automáticamente entradas ni informes de pasos anteriores.
TU PRÓXIMO PASO
Utilice funciones de imágenes y documentos según los límites gratuitos establecidos. Cree una cuenta de empresa para monitorear sitios web, consultas comerciales y notificaciones de equipo, o analice su flujo de trabajo con nosotros.
Las nuevas empresas reciben una prueba Pro de 14 días, sin necesidad de tarjeta. Las pruebas excluyen la concesión de crédito mensual pagado.
¿Ya tienes una cuenta? Abre tu espacio de trabajo → (English)Seleccionar un color de marca es fácil, pero aplicarlo en páginas web requiere más juicio. Los botones deben destacarse, el texto del cuerpo debe ser claro y las tarjetas necesitan una jerarquía visual; el efecto del mismo color cambia cuando se coloca sobre fondos claros versus oscuros. Esta herramienta de paleta de colores web reúne colores primarios, paletas coincidentes, rampas continuas y muestras de páginas en vivo en un único banco de trabajo, lo que ayuda a los operadores de tiendas, gerentes de productos, diseñadores y desarrolladores a discutir soluciones viables juntos.
Un buen conjunto de muestras de color no significa que todos los colores sean adecuados para el cuerpo del texto o los botones. El banco de trabajo crea roles para fondo, superficie, cuerpo, texto secundario, botón principal, acento y bordes a partir de colores primarios y secundarios, y selecciona colores de texto para los botones. El modo claro requiere un contraste de texto claro, mientras que el modo oscuro necesita distinguir los fondos de las tarjetas; los dos no pueden resolverse únicamente con una simple inversión de color.
Si el color primario es muy claro, puede permanecer en la paleta de la marca mientras se combina con un color de texto más adecuado para los botones. Es mejor utilizar los colores de acento con moderación; Las áreas de fondo grandes generalmente requieren una saturación más baja. La herramienta proporciona un punto de partida comparable, mientras que el diseño final, las imágenes y la densidad del contenido dependen de usted.
La escala de color de 11 pasos aquí está etiquetada de 50, 100, 200 a 950 y muestra cambios de claridad de claro a oscuro. OKLCH separa la luminosidad del croma y el tono, lo que lo hace ideal para encontrar candidatos para fondos claros, estados seleccionados, estados de desplazamiento y texto oscuro. A los candidatos fuera de la gama sRGB se les reducirá el croma antes de mapear y convertir a HEX.
Los números de los pasos de sombra indican la posición relativa dentro de la escala de sombras; no implican que el color primario de su marca deba residir en 500. El amarillo brillante, el azul intenso y el rosa claro tienen diferentes niveles de luminosidad de entrada, pero el color primario permanece intacto en la muestra principal. Los colores funcionales y los pasos de sombra exportados deben seleccionarse en función de los componentes reales y ajustarse dentro de su proyecto.
Los informes de relación de contraste calculan la luminancia relativa entre los colores opacos de primer plano y de fondo sRGB. El texto normal requiere una proporción de 4,5:1 para cumplir con AA; El texto grande (al menos 18 puntos normal o 14 puntos en negrita) requiere 3:1. Los límites de control y los gráficos significativos utilizados para la identificación generalmente requieren 3:1, pero los divisores decorativos varían. Pasar un solo par de colores no significa que toda la página web cumpla con las WCAG.
Las superposiciones transparentes, los degradados y las imágenes de productos alterarán el fondo real; Los estados de desplazamiento, enfoque, alertas de error y deshabilitados también deben inspeccionarse por separado. El contenido no puede depender únicamente del color; por ejemplo, los errores también deben incluir texto claro. Después de colocar las paletas exportadas en páginas activas, las operaciones del teclado, los tamaños de fuente y los estados deben evaluarse juntos, no solo este informe de paleta.
El equipo de operaciones puede seleccionar candidatos según el color primario de la marca; el equipo de producto puede comparar botones y jerarquía de información en maquetas web; el equipo de diseño puede bloquear sus tarjetas favoritas para explorarlas; El equipo de desarrollo puede exportar variables CSS y JSON. Los enlaces compartidos recargan la configuración de color y de interfaz de usuario, minimizando las discrepancias de color en las capturas de pantalla.
Esta herramienta solo maneja colores y maquetas. No emite juicios automatizados sobre el posicionamiento de la marca, las tasas de conversión o la psicología de la industria, ni genera afirmaciones no verificadas bajo la apariencia de IA. Proporcionar a la misma paleta de colores pautas de uso claras y relaciones de contraste verificables es el resultado práctico que puede aplicar directamente a continuación.
seleccione o ingrese un color de marca principal, luego elija esquemas adyacentes, complementarios, complementarios divididos, triádicos o monocromáticos. La herramienta conserva el color primario de entrada, genera colores coincidentes restantes en el espacio de color OKLCH y proporciona vistas previas web claras y oscuras, colores funcionales y comprobaciones de contraste. Las relaciones de color proporcionan un punto de partida del diseño; Las elecciones finales aún deben considerar la marca, las imágenes y las páginas reales.
Tanto el color primario como el editor preciso de cada muestra aceptan #RGB y #RRGGBB, como #63F o #635BFF, y los normalizan a HEX de seis dígitos. Haga clic en el valor debajo de una muestra para pegar un color, compararlo con el original y aplicarlo. No se admiten transparencias, nombres de colores ni otros espacios de color de entrada. Aún puedes copiar muestras como HEX, RGB u OKLCH; Las exportaciones CSS utilizan HEX.
Los botones Deshacer y Rehacer encima de las muestras restauran colores, bloqueos, armonía, estilo y configuraciones de vista previa del sitio web. Fuera de los campos de texto, use Ctrl / ⌘ + Z para deshacer y Ctrl / ⌘ + Shift + Z para rehacer; Windows también admite Ctrl + Y. Los campos de texto mantienen el texto nativo deshacer del navegador. En esta página solo se conservan los últimos 50 pasos y la actualización los borra. Para conservar una paleta por más tiempo, copie el enlace para compartir o descargue un archivo.
OKLCH describe el color utilizando luminosidad, croma y tono, lo que generalmente lo hace más adecuado para generar escalas de color visualmente uniformes que ajustar directamente la luminosidad HSL. Al convertir a sRGB estándar web, algunos colores quedan fuera de la gama visualizable; la herramienta reduce el croma para asignarlos a sRGB. Las visualizaciones aún pueden variar según las diferentes pantallas, la luz ambiental y los navegadores.
Los colores análogos utilizan tonos cercanos al color primario, adecuados para imágenes cohesivas. Los colores complementarios introducen tonos opuestos para resaltar puntos clave. Aspectos complementarios divididos adyacentes al tono complementario para mantener la distinción. Los colores triádicos forman tres grupos de tonos distintos en la rueda de colores para ayudar a diferenciar los módulos. Monocromático ajusta la luminosidad y la croma alrededor del color primario para que la jerarquía destaque más que el tono. Estas no son reglas deterministas para la industria o la psicología de las marcas.
No necesariamente. 50–950 son etiquetas de colores de diseño que representan cambios graduales de luminosidad; 500 no es una ligereza adecuada para todas las entradas. El color primario de entrada se conserva por completo en la muestra principal, mientras que las sombras se utilizan para encontrar candidatos para fondos, bordes y estados de desplazamiento. Elija según el uso real y los requisitos de contraste.
Haga clic en el botón de bloqueo en una tarjeta de color para solucionarlo. Al cambiar combinaciones, estilos o hacer clic en "Aleatorio", las tarjetas de colores desbloqueadas restantes seguirán cambiando. Puede editar una tarjeta de color individualmente o configurarla como el nuevo color primario. Haga clic en "Desbloquear todo" para desbloquear todas las tarjetas de colores o en "Restablecer" para restaurar los esquemas y configuraciones de colores predeterminados.
No. El informe solo evalúa el contraste de luminancia relativo de los colores opacos de primer plano y de fondo enumerados. WCAG AA requiere una proporción de 4,5:1 para texto normal y 3:1 para texto grande; Los límites de control de la interfaz de usuario y los gráficos que requieren identificación de color generalmente requieren 3:1. El texto grande se refiere a texto normal de al menos 18 puntos o 14 puntos en negrita. La transparencia, los degradados, las imágenes de fondo, los estados de enfoque/desplazamiento, los tamaños de fuente y otras reglas de accesibilidad deben auditarse por separado en las páginas reales; Los divisores decorativos no requieren uniformemente 3:1.
Las páginas web oscuras requieren reorganizar la jerarquía de colores de fondo, superficie, cuerpo del texto y acento. La herramienta genera colores funcionales según el modo seleccionado y elige colores de texto apropiados para los botones principales, mientras que las paletas de colores primarios aún conservan su entrada. Diferentes plantillas muestran el mismo conjunto de colores funcionales para comparar fácilmente los efectos reales en SaaS, exhibición de productos y páginas B2B.
Los cálculos de color se completan localmente en su navegador sin enviar colores a este sitio ni guardar esquemas en el almacenamiento local de forma predeterminada. Puede descargar CSS o JSON antes de cerrar la página. Los enlaces de paleta copiados incluyen colores y configuraciones de interfaz de usuario para reabrir o compartir con colegas; No incluya información personal o de clientes en los enlaces. La página contiene anuncios de sitios que utilizan sus propios servicios de red.
La exportación CSS incluye paletas de colores, una escala de colores primarios de 11 pasos y variables semánticas para los modos claro/oscuro actuales como punto de partida para los estilos web. JSON es ideal para guardar combinaciones de colores y configuraciones para revisión de diseñadores o desarrolladores. Copiar estilos no garantiza automáticamente el cumplimiento de la accesibilidad; verifique con el contenido real y los estados de los componentes.
Cálculo y referencias de color:Notas de contraste de texto WCAG 2.2、Detalles de contraste sin textoy Color CSS 4 OKLab/OKLCH. Esta herramienta se asigna al espacio de color sRGB reduciendo el croma y no pretende reproducir todos los algoritmos de asignación de color del navegador.
La paleta de un sitio web extiende un color primario a funciones de fondo, texto, acento y estado para crear jerarquía y componentes legibles.
Equipos de diseño y producto que eligen colores para una marca, sitio web o página de destino.
Ingrese un color primario, compare paletas y vistas previas de la interfaz, verifique el contraste del texto y luego copie colores o variables de diseño.
Inspecciona vistas previas claras/oscuras reales, incluidos botones, texto del cuerpo y colores de estado. Preservar el color de la marca puede requerir diferentes colores de texto y bordes en diferentes superficies.
Las paletas, escalas, contraste y vistas previas se generan en su navegador. Copiar, exportar y compartir el enlace de una paleta son acciones deliberadas.
