Generador de paleta de colores gratis

Ejemplo práctico

Abre la página y el cuadro «Color base» ya contiene #14b8a6, con «Paleta de marca» seleccionada. Aparecen siete muestras bajo «Paleta de marca · 7 colores»: #14B8A6 (Base), #EE66BA (Acento), #E5FAF8 (Tono claro), #14524A (Tono oscuro) y tres neutros teñidos con el mismo tono, #F3F6F6, #63837F y #1A2322. La tarjeta Base dice «Sobre blanco 2.5» con «No cumple», y «Sobre negro 8.4» con «AAA». Pulsa «Complementarios» y la tira baja a dos colores, #14B8A6 y #EF7381. En «Formato de copia» elige RGB y luego pulsa «Copiar todo». Un aviso dice «Copiados 2 colores» y el portapapeles contiene rgb(20, 184, 166), rgb(239, 115, 129). En «Comprobación de texto y fondo», el color del texto empieza como #000000 sobre el fondo #14B8A6 y dice 8.44:1, «Texto normal AAA», «Texto grande AAA».

Qué ajustes usar y los límites

• Escribe el color en la forma que lo tengas. El cuadro «Color base» admite un código hex con o sin #, de 3 o 6 dígitos, un nombre CSS como teal o tomato, un valor rgb() o hsl() (cualquier alfa se ignora), o números sueltos como 20 184 166. Los espacios en los nombres se ignoran, así que «rebecca purple» funciona. Un hex completo de 6 dígitos se aplica mientras escribes. Cualquier otra cosa se aplica al pulsar Intro o salir del cuadro. El hex de 8 dígitos y oklch() no se leen. Los puntos redondos fijan uno de ocho colores iniciales, y el cuadrado abre el selector de color de tu sistema.
• Elige el tipo de paleta según el trabajo. «Paleta de marca» da 7 colores con funciones: Base, Acento, Tono claro, Tono oscuro y tres neutros. «Complementarios» da 2, «Análogos» 4, «Triádico» 3, «Complementario Dividido» 3, «Tetrádico» 4, «Monocromático» 5 y «Tonos» 7. Monocromático conserva tu color y varía la luminosidad. Tonos es una escala fija de 10 a 90 por ciento de luminosidad con tu tono y saturación, y no incluye tu color exacto. Los tipos que giran el tono (Complementarios, Análogos, Triádico, Complementario Dividido, Tetrádico) buscan una luminosidad percibida similar, mantenida en un rango medio.
• Bloquea lo que te guste y vuelve a mezclar. Pulsa «Bloquear este color» en una muestra y luego pulsa «Mezclar» o elige una base nueva. Las muestras bloqueadas conservan su color y las demás cambian. «Mezclar» elige una base aleatoria con saturación HSL de 50 a 84 y luminosidad de 40 a 57, así que cae en tonos medios. Los bloqueos siguen la posición de la muestra, no el color: bloquea la muestra 1, cambia la base y la muestra 1 conserva el color anterior. «Editar este color» abre un selector de color para una muestra y añade «(editado)» al encabezado. Una muestra editada que no bloqueaste se sustituye la próxima vez que la paleta se regenere.
• Comprueba el contraste antes de publicar. Cada tarjeta muestra las relaciones «Sobre blanco» y «Sobre negro» con una insignia: «AAA» desde 7:1, «AA» desde 4.5:1, «AA grande» desde 3:1 y, en otro caso, «No cumple». Las relaciones usan la fórmula de luminancia relativa de WCAG. En «Comprobación de texto y fondo» eliges un color de texto y un fondo de la paleta, además de blanco y negro. La línea «Texto normal» califica AAA a 7 y AA a 4.5. La línea «Texto grande» califica AAA a 4.5 y AA a 3. Prueba los pares exactos que pienses usar, porque una paleta no es legible solo porque cada color lo sea.
• Elige el formato de copia y luego la exportación. «Formato de copia» fija lo que copian un clic en una muestra, en una etiqueta de tono claro u oscuro y «Copiar todo»: hex, rgb, hsl u oklch. Para la base eso da #14B8A6, rgb(20, 184, 166), hsl(173, 80%, 40%) y oklch(70.4% 0.123 182.5). En «Exportar:», los botones guardan palette.css, palette.scss, tailwind-colors.js, tailwind-scales.js («Tailwind 50-950»), palette.json, palette.png, palette.svg, palette.gpl, palette.ase y palette.aco. Los archivos de texto contienen valores hex, y JSON añade cadenas rgb, hsl y oklch. PNG mide 200 px de ancho por muestra, SVG 160 px. «Etiquetas hex en PNG/SVG» viene marcada de forma predeterminada.
• Comparte el enlace o parte de un ajuste predefinido. «Compartir resultado» crea un enlace que conserva el color base, el tipo, las ediciones y los bloqueos después del # en la dirección; en un dispositivo táctil que lo admita, abre la hoja para compartir. Una paleta compartida puede tener de 1 a 12 colores. En «Prueba estas», «Pastel», «Tierra», «Neón» y «Apta para marca (AA)» cargan cada una 5 colores como una paleta «Personalizada», y cambiar la base después vuelve a «Paleta de marca». «Elegir de la pantalla» aparece solo en navegadores que tienen la función EyeDropper, principalmente los basados en Chromium.

Problemas comunes y cómo solucionarlos

Dice «No reconocemos ese color. Prueba #14b8a6, teal o rgb(20, 184, 166).»

El texto no se pudo leer como color, y el cuadro vuelve a la base actual. Las causas habituales son un hex de 4 u 8 dígitos como #14b8a680, un valor oklch(), un nombre de color que no es un nombre CSS y números fuera de rango como rgb(300, 0, 0) o hsl(10, 120%, 50%). Vuelve a escribirlo como hex de 3 o 6 dígitos, un nombre CSS, o rgb() o hsl() con valores en rango, y pulsa Intro.

Elegiste un color base nuevo, pero una muestra conservó el color anterior.

Esa muestra está bloqueada. El botón de bloqueo de la tarjeta se vuelve verde azulado, y su descripción emergente dice «Desbloquear este color». Las muestras bloqueadas se conservan cada vez que la paleta se regenera, incluso tras una base nueva, un tipo nuevo o «Mezclar». Pulsa de nuevo el bloqueo para soltarla. Los bloqueos están ligados a la posición de la muestra, así que un bloqueo en la muestra 1 sigue vigente después de pasar de «Paleta de marca» a «Triádico».

Un aviso dice «No se pudo copiar».

Fallaron las dos vías del portapapeles: la API de portapapeles del navegador y luego un cuadro de texto oculto con un comando de copia. La API de portapapeles no existe en páginas no seguras ni en algunos marcos aislados, y un navegador también puede rechazarla cuando la página no tiene el foco. Haz clic una vez en la página y vuelve a intentarlo, o abre la página en una pestaña normal del navegador. Si la copia sigue bloqueada, usa los botones de exportación CSS, JSON o Tailwind para guardar un archivo.

No hay ningún botón «Elegir de la pantalla».

El botón solo se añade cuando el navegador tiene la función EyeDropper, y las preguntas frecuentes de la página dicen que son principalmente los navegadores basados en Chromium. Donde falta, usa el cuadro de color cuadrado junto al campo de texto, o escribe el código hex que leas en otra aplicación. Pulsar Esc durante la selección la cancela sin avisar, y una selección que falla por otro motivo no muestra ningún mensaje en la página.

El PNG o SVG guardado no tiene códigos hex en las muestras.

La casilla «Etiquetas hex en PNG/SVG» está desmarcada. Viene marcada al abrir la página, así que alguien la desmarcó. Con ella marcada, cada muestra lleva su código hex en mayúsculas, con una tinta oscura o clara elegida por contraste. La casilla afecta solo a los archivos PNG y SVG. Las demás exportaciones contienen los propios valores de color y no tienen etiquetas. Marca la casilla y vuelve a pulsar PNG o SVG.

Cómo se compara

Esta página construye una paleta a partir de un color con reglas fijas de círculo cromático, califica el contraste con las relaciones WCAG y exporta a archivos de código y de diseño. No extrae colores de una foto (para eso la página enlaza al extractor de colores de imágenes), no previsualiza el daltonismo, no pone nombre a los colores ni guarda paletas en una cuenta. Tu trabajo se conserva en la barra de direcciones después del #, así que recargar o un marcador lo recuperan. Las reglas de armonía dan un punto de partida, no una marca terminada. Una aplicación de diseño o una guía de marca siguen siendo el lugar para decidir los roles y probar la paleta en diseños reales.