Generador de esquemas de color
Paletas que concuerdan
Este generador de esquemas de color parte de un color, un nombre o una foto. Por lo tanto, obtienes paletas complementarias, análogas, tríadas y monocromáticas, cada una con códigos hex, variables CSS y una lectura de contraste. La rueda corre en tu navegador, y no subimos nada.
- GratisPrecio
- SeisArmonías
- NingunoRegistro
- NingunoSubidas
Generador de esquemas de color
Un color de entrada, seis armonías de salida, con tabla de contraste y cinco formatos de exportación
Un código hex, rgb(), hsl() o un nombre de color funcionan. No se sube nada: toda la página corre en esta pestaña.
El lector nombra la armonía que mejor encaja. Un casi acierto también recibe respuesta.
La imagen se lee en un lienzo dentro de esta pestaña, así que un archivo que aún no se ha publicado sigue sin publicarse. Vuelven hasta cinco colores, los más usados primero; una imagen plana da menos.
Un paso de luminosidad es la reparación habitual cuando una armonía es correcta en la rueda y ilegible en la página.
| Texto sobre fondo | Proporción | Texto de cuerpo | Texto grande |
|---|
Los umbrales son los de WCAG: 4.5 a 1 para texto de cuerpo y 3 a 1 para texto grande.
Listo. Escribe un color, elige uno, o pulsa Azul del sitio.
Qué hace un generador de esquemas de color
Un color es un punto de partida, no un plan. Una página necesita un fondo, un color de texto, un borde y un acento que encajen entre sí. Por lo tanto, un generador de esquemas de color toma el color que ya tienes y resuelve el resto.
De una sola elección salen cuatro cosas. Primero, los conjuntos de armonía: complementaria, análoga, tríada, complementaria dividida, tetrádica y monocromática. Luego una rampa de tintes y sombras desde casi negro hasta casi blanco. Después, una tabla de contraste que dice qué par puede llevar texto. Finalmente, los formatos de exportación, listos para pegar.
Esa tabla de contraste importa más de lo que parece. Una paleta bonita que falla la regla de contraste se convierte en un ticket de soporte. Así que cada par recibe una lectura, y cada fila que falla lo dice con palabras.
La dirección también funciona al revés. Como puedes pegar una paleta que ya tienes y preguntar qué armonía le encaja mejor, la página ayuda cuando heredas un diseño y necesitas ampliarlo sin una ruptura visible.
Cómo un generador de esquemas de color construye una paleta
Las matemáticas son más viejas que la web. Una rueda de color ordena los tonos en un círculo, y cada armonía es una figura dibujada sobre ese círculo. Dos puntos opuestos dan un par complementario. Tres puntos con espaciado uniforme dan una tríada.
Así que la primera pasada convierte tu color a HSL. El tono es el ángulo, la saturación es cuánto se aleja el color del gris, y la luminosidad es cuánto blanco o negro lleva. Los ángulos se suman limpios en HSL, y por eso cada armonía trabaja ahí y no en hex.
La segunda pasada gira el tono. La complementaria suma 180 grados. La análoga suma 30 y resta 30. La tríada suma 120 y 240. La complementaria dividida suma 150 y 210. La tetrádica suma 90, 180 y 270. Cada resultado da la vuelta al círculo, así que un tono de 350 más 30 cae en 20 en lugar de en 380.
La tercera pasada ajusta los extras. Como una rotación pura puede dejar dos colores con la misma luminosidad, el generador también ofrece una versión con la luminosidad escalonada. De lo contrario, un banner y su acento se funden en un proyector.
Aquí nada necesita una llamada de red. Por lo tanto, la página funciona sin conexión, y funciona con un color de marca que preferirías no escribir en una herramienta alojada.
Por qué decide la rueda y no el ojo
El ojo se adapta. Dos colores que se ven distintos sobre una página blanca pueden verse idénticos sobre una oscura. La aritmética de tonos no se adapta, y eso es justamente lo que aporta.
Como la rotación corre sobre números, la misma entrada da la misma salida siempre. Así que una paleta que te gustó el mes pasado vuelve exactamente como la dejaste.
El contraste es la otra razón. Una ratio de contraste depende de la luminancia relativa y no del tono. Por lo tanto, dos colores de lados opuestos de la rueda pueden fallar la regla cuando ambos están a una luminosidad parecida.
De ahí el paso de luminosidad. Es la palanca que repara una armonía que es correcta en la rueda e inusable en la página.
Las seis armonías, una por una
La complementaria pone dos tonos uno frente al otro. El par grita, lo que le va bien a una llamada a la acción o a un precio. Sin embargo, el mismo par daña como texto de cuerpo sobre un fondo, porque los bordes vibran donde se encuentran.
La análoga mantiene tres vecinos dentro de unos 60 grados. Como los tonos están cerca, el conjunto se siente tranquilo, y le va bien a un gráfico con varias series. Aun así, no te entrega ningún acento natural.
La tríada toma tres tonos con espaciado uniforme. El resultado es vivo y equilibrado a la vez. Pero uno de los tres suele tener que encogerse a acento, o la página se convierte en una bandera.
La complementaria dividida toma un tono y los dos vecinos de su opuesto. Por lo tanto, conservas el golpe de un par complementario con menos tensión. Es la más fácil de las seis para usar en una landing.
La tetrádica, a veces llamada cuadrada, toma cuatro tonos con espaciado uniforme. De hecho, es la que más disciplina pide, ya que dos de los cuatro deberían llevar la mayor parte de la página y el resto quedarse pequeño.
La monocromática se queda en un tono y mueve solo la luminosidad y la saturación. En particular, es el conjunto más seguro para una interfaz de producto, porque nada dentro de él compite por la atención.
Leer un color de una foto
Un color de marca a menudo llega como logo, captura o fotografía en vez de como código. Así que la página también lee uno. Suelta el archivo, y el muestreador devuelve los tonos que cubren más píxeles.
La lectura corre en un lienzo dentro de tu propia pestaña. Como el archivo nunca sale del navegador, una foto de producto sin publicar sigue sin publicarse.
El muestreo agrupa los píxeles parecidos antes de contarlos. De lo contrario, la fotografía de una hoja devuelve cuatrocientas tonalidades de verde y nada útil. La agrupación mantiene la lista lo bastante corta para elegir de ella.
Desde ahí se aplican las mismas seis armonías. Por lo tanto, la fotografía de un escaparate puede producir todo un esquema en un paso, con el color del cartel como base.
Qué sale: los formatos de exportación
Cada conjunto sale en el formato que necesita tu paso siguiente. La lista simple de códigos hex le va bien a un mensaje para un diseñador. Las propiedades personalizadas de CSS le van bien a una hoja de estilos, ya que las variables son la forma habitual de guardar un tema.
Un bloque de propiedad personalizada de CSS va primero, porque un tema suele vivir en variables. Luego un bloque de Tailwind, ya que un archivo de tema guarda los mismos valores bajo sus propios nombres. Después, variables SCSS y un objeto JSON cubren los casos que quedan.
Cada muestra lleva también sus propias lecturas. Eso significa el ángulo de tono, la saturación, la luminosidad, el código hex, y el contraste contra blanco y contra negro.
Finalmente, todo el esquema se descarga como archivo JSON. Así una paleta sobrevive a un portapapeles vaciado, y puede estar en un repositorio de diseño junto a las pantallas de las que salió.
En esta página
- La herramienta
- Qué hace un generador de esquemas de color
- Cómo usar el generador de esquemas de color
- Por qué usar este generador de esquemas de color
- Conseguir una paleta que aguante
- Seis formas en que una paleta generada sale mal
- Preguntas sobre el generador de esquemas de color
- Herramientas que van con esta
Sigue leyendo
Cómo usar el generador de esquemas de color
Cuatro pasos, y ninguno necesita una cuenta.
- 1
Parte de un color
Así que escribe un código hex, elige un nombre de la lista, o arrastra el marcador en la rueda. Cualquiera de los tres fija el color base, y el resto de la página se actualiza al momento.
- 2
Lee las armonías
Luego mira los seis conjuntos. Cada uno muestra sus muestras con el código hex debajo. Como el color base se queda en todos los conjuntos, los comparas sin perder el sitio.
- 3
Revisa la tabla de contraste
A continuación, repasa los pares. Un par que falla la regla para texto de cuerpo todavía sirve para un titular grande, y la tabla dice cuál es cuál. Así que reparas el par que falla antes de que llegue a una hoja de estilos.
- 4
Llévate el formato que necesites
Finalmente, copia las variables CSS, el bloque de Tailwind, la lista SCSS o los códigos hex sueltos. Después, descarga el JSON si quieres todo el esquema en un archivo.
Por qué usar este generador de esquemas de color
Cinco razones, y cada una va sobre el color y no sobre el código.
Seis armonías, no una
Así que comparas una tríada contra una complementaria dividida sin abrir una segunda herramienta. Como todos los conjuntos comparten el color base, la comparación sigue siendo justa.
Las matemáticas corren en tu pestaña
Por lo tanto, un color de marca bajo embargo se queda en tu máquina. No se sube nada, y ninguna cuenta se interpone entre tú y la salida.
El contraste llega con la paleta
Luego los números se sientan junto a los colores. De lo contrario, eliges una paleta aquí y encuentras el fallo en una auditoría tres semanas después, cuando el diseño ya está construido.
Una foto sirve como entrada
Como un logo es a menudo la única fuente de un color de marca, el muestreador lee uno directamente. Así te saltas el paso de adivinar un código hex a ojo desde un JPEG.
Cinco formatos de exportación
Finalmente, la salida le va bien a una hoja de estilos, a un tema Tailwind, a una compilación SCSS, a un fixture JSON o a una lista simple. Por eso el botón de copiar rara vez te deja reformateando a mano.
Conseguir una paleta que aguante
Seis hábitos que separan una paleta que se publica de una que se vuelve a dibujar.
- Elige la base desde la marca Así que parte del color que tienes que conservar. Un generador que inventa la base te entrega un esquema sin dueño, y el siguiente diseñador lo tira.
- Escalona la luminosidad antes de publicar Como una rotación pura de tono puede dejar dos colores igual de claros, sube o baja uno de ellos. Entonces el par se separa tanto en un proyector como en tu propia pantalla.
- Guarda un solo acento En un conjunto tríada o tetrádico, deja que un único color lleve los acentos. De lo contrario, cada botón compite por la misma atención, y ninguno gana.
- Prueba contra los dos fondos Revisa cada color de texto sobre blanco y sobre la superficie más oscura del conjunto. Como resultado, encuentras el par que falla antes de que un lector tenga que entrecerrar los ojos.
- Nombra las variables por el trabajo Así que escribe un nombre como tinta de marca en vez de azul setecientos. Ya que un valor hex cambia y un trabajo no, el nombre sobrevive a un rebranding.
- Revisa el conjunto en escala de grises Por último, quita el tono y mira otra vez. Si la página todavía se lee con claridad, la paleta lleva una jerarquía real y no un truco de color.
Seis formas en que una paleta generada sale mal
Cada una de estas se ve bien en la rueda y duele en la página.
Usar el par complementario para el texto de cuerpo
Ojo aquí. Como dos tonos opuestos vibran donde se encuentran, la letra pequeña sobre ese par cansa la vista. Usa el par para un botón o un titular en su lugar.
Suponer que la rueda conoce tu marca
Una rotación da armonía, no significado. Por lo tanto, una tríada correcta puede seguir estando mal para un banco, porque la rueda no puede leer tu brief.
Dejar que el tono lleve todo el mensaje
Cerca de uno de cada doce hombres lee el rojo y el verde de otra manera. Así que nunca dejes que el tono solo marque un error o un acierto. La forma, el texto o la posición tienen que repetir el mensaje.
Olvidar el tema oscuro
Un conjunto que funciona sobre blanco puede derrumbarse sobre casi negro. Por eso la tabla de contraste lista una lectura contra los dos, en lugar de contra el que revisaste por casualidad.
Dejar que la paleta crezca más de cinco
Cada color extra añade una decisión a cada pantalla. Como un lector sostiene unos cinco en la cabeza a la vez, un esquema de diez colores se vuelve ruido.
Pegar códigos hex en una hoja de estilos a mano
Copia las variables en su lugar. Un dígito mal escrito da un color que se ve casi bien, y eso es más difícil de encontrar que uno que se ve obviamente mal.
Preguntas sobre el generador de esquemas de color
¿Este generador de esquemas de color es gratis?
Sí. No hay cuenta, ni límite, ni plan de pago. Así que construyes tantas paletas como quieras.
¿Envía mi color a algún sitio?
No. Porque la rueda y el muestreador se ejecutan en tu navegador, el color base nunca sale de tu máquina. Por lo tanto, un color de marca bajo embargo sigue siendo privado.
¿Puedo partir de un solo color?
Sí. Un código hex basta. Entonces las seis armonías se construyen a su alrededor, y el color base se mantiene igual en todos los conjuntos.
¿Puede leer un color de una imagen?
Sí. Suelta una foto, un logo o una captura, y el muestreador devuelve los tonos que cubren más píxeles. Como la lectura se hace en un lienzo dentro de tu pestaña, el archivo nunca se sube.
¿Qué armonías construye?
Seis. Complementaria, análoga, tríada, complementaria dividida, tetrádica y monocromática. Cada una conserva el color base y gira el tono un ángulo fijo.
¿Comprueba el contraste?
Sí. Cada par de texto sobre fondo recibe una ratio y un veredicto para texto normal y para texto grande. Por eso, una paleta que se ve bien y se lee mal aparece aquí.
¿Qué formatos puedo exportar?
Cinco. Códigos hex sueltos, propiedades personalizadas de CSS, un bloque de tema Tailwind, variables SCSS y un archivo JSON. Además, el botón de copiar pone cualquiera de ellos en tu portapapeles con un clic.
¿Puedo pegar una paleta que ya tengo?
Sí. Pega los códigos hex y la página nombra la armonía que mejor encaja. Eso ayuda cuando heredas un diseño y quieres ampliarlo sin una ruptura visible.
¿Una armonía generada es accesible?
Armonía y accesibilidad responden a preguntas distintas. Un par complementario puede fallar el contraste, y un conjunto monocromático puede pasarlo. Por lo tanto, lee la tabla de contraste en lugar de la rueda.
¿Cuáles son los niveles de contraste WCAG?
La tabla nombra dos umbrales: 4.5 a 1 para texto normal y 3 a 1 para texto grande. Todo lo que queda por debajo de su umbral falla, y la fila lo dice con palabras.
¿Funciona en un teléfono?
Sí. La rueda se encoge, las muestras se envuelven y los botones de copiar quedan bajo la salida. Así que una paleta funciona desde el teléfono cuando estás lejos del escritorio.
¿Puedo usar la paleta comercialmente?
Sí. Los valores de color no llevan licencia. Así que los códigos hex son tuyos, y nada aquí pide un crédito.
¿Necesito una cuenta o una extensión?
No. La página funciona sola, sin registro y sin instalar nada. Entonces cierras la pestaña cuando la paleta está lista.
¿Qué es un generador de esquemas de color?
Es una página que convierte un color en una familia de colores que concuerdan con él. En resumen, la rueda hace la aritmética y tú te quedas con los códigos.
¿Qué es un color complementario?
El color opuesto al tuyo en la rueda, o sea media vuelta de distancia. Como los dos están lo más lejos posible, un par complementario suena fuerte. Eso le va bien a un botón, y rara vez a una página entera.
¿Cómo elige la rueda un ángulo?
Cada armonía lleva un juego fijo de rotaciones. Primero la rueda lee tu tono base, luego avanza esos ángulos y vuelve a leer. Así que un conjunto tríada siempre cae a 120 grados.
¿Puedo escribir un color por su nombre?
Sí. Nombres como teal, coral o azul medianoche se aceptan junto al código hex. Por lo tanto, puedes partir de la palabra del brief en vez de un código que tuviste que buscar.
¿Qué es un esquema tríada?
Tres colores repartidos de forma uniforme en la rueda, o sea a 120 grados. Como los tres están a la misma distancia, un conjunto tríada se lee equilibrado. También necesita que uno de ellos mande, o el ojo no tiene dónde posarse.
¿Qué es un esquema complementario dividido?
Una relación más suave entre un color y los dos vecinos de su opuesto. Así conservas el contraste sin el grito. Mientras tanto, el par queda a 150 grados en lugar de 180.
¿Cuántos colores tiene cada conjunto?
Entre tres y cinco, según la armonía. Ya que cada conjunto conserva el color base, una muestra queda fija y el resto gira.
¿Cuál es la diferencia entre un esquema y una paleta?
El esquema es la relación, y la paleta es la lista de códigos que sale de ella. En otras palabras, la rueda elige el esquema y la exportación te entrega la paleta.
¿Qué modelo de color usa la rueda?
Tono, saturación y luminosidad. Como un ángulo es fácil de imaginar en un círculo, la rueda gira el tono y deja los otros dos en paz hasta que un paso pide cambiarlos.
¿Qué muestra la lectura del ángulo?
La rotación que tomó cada muestra desde tu color base. Por ejemplo, más 180 para un par complementario. Así ves por qué dos conjuntos difieren en lugar de adivinarlo.
¿Puedo usar una paleta como variables CSS?
Sí. La pestaña CSS escribe propiedades personalizadas, una por muestra. Después pega el bloque en una hoja de estilos y cada muestra es un nombre en vez de un código.
¿Una armonía garantiza un buen diseño?
No. Una armonía solo promete que los tonos se relacionan. Contraste, proporción y significado siguen decidiendo si la página funciona. Por lo tanto, revisa la tabla antes de comprometerte.
¿Puedo descargar la paleta en vez de copiarla?
Sí. El botón de descargar guarda el formato actual como archivo. Así una paleta puede viajar a un compañero o a un repositorio sin copiar y pegar.
¿Necesita una conexión rápida?
No. Una vez cargada la página, la rueda y el muestreador corren en tu pestaña. Por eso una línea lenta frena la primera carga y nada más.
Herramientas que van con esta
Cuatro páginas a las que suele llevar el mismo trabajo.
Selector de códigos de color
Luego lee una muestra en todos los formatos a la vez. Como una hoja de estilos, una llamada a canvas y un token de diseño quieren cada uno una escritura distinta, el selector las muestra todas lado a lado.
Abrir herramienta →Conversor de imágenes
Antes de muestrear un logo, cambia su formato aquí. Un archivo más pequeño entra más rápido en el muestreador, y un fondo plano se lee más limpio que uno comprimido.
Abrir herramienta →Compresor SVG
Para un logo dibujado como vectores, esto quita primero los metadatos del editor. Así el dibujo y la paleta se quedan juntos en un archivo pequeño.
Abrir herramienta →Minificador CSS
Después de que las variables caigan en una hoja de estilos, encoge el archivo que envías. Entonces toda la paleta cuesta unos bytes en vez de unos kilobytes.
Abrir herramienta →
Construye una paleta desde un solo color
Elige el color base, lee las seis armonías, revisa la tabla de contraste y llévate el formato que necesites. Nada sale de tu navegador, así que un color de marca bajo embargo sigue siendo tuyo. Todo el trabajo cabe en un clic.