Idioma:Español
Tu laboratorio del color

Un color.Tu próxima paleta.

Encuentra colores que funcionan juntos. Pruébalos, comprueba el contraste y hazlos tuyos.

Preajustes y colores recientes
Desde una imagen

Gratis. Todo en tu navegador. Paletas listas para usar

Paleta generada

Haz clic en un color para copiar su HEX. La escala de tonos sirve para botones, estados, tarjetas y superficies UI.

Las paletas guardadas permanecen en este dispositivo.

Aspecto de la paleta

Solo cambia la visualización. Tus colores y exportaciones siguen iguales.

Haz tuya esta paleta

Bloquea los colores que quieras conservar. Edita o reordena los demás. Espacio regenera con la paleta visible; los campos y botones enfocados conservan su comportamiento.

Los colores y el orden se incluyen al copiar el enlace para compartir.

shadcn/uiTailwind v4 · v3

Escala de tonos

La reducción de croma conserva luminosidad y tono antes del redondeo a HEX. Original mantiene las paletas y enlaces anteriores.

Paletas listas para usar

Elige un ejemplo para abrir todos sus colores en el generador. Edita, compara y guarda tu propia versión.

Paneles de datos
Panel claro7 coloresAbrir paleta Panel oscuro7 coloresAbrir paleta Gráficos categóricos7 coloresAbrir paleta
Pasteles
Melocotón y lavanda6 coloresAbrir paleta Jardín suave6 coloresAbrir paleta Cielo y rosa6 coloresAbrir paleta
Tonos azules
Azul de producto5 coloresAbrir paleta Azul marino y arena5 coloresAbrir paleta Azul nocturno5 coloresAbrir paleta

Son puntos de partida. Comprueba los pares reales de texto y fondo antes de usarlos.

Inspector de color

Consulta el color base en formatos prácticos. Copia HEX, RGB, HSL y OKLCH para implementación y documentación.

#E24B4A
Componer transparencia

Pega RGBA, HSLA, OKLCH con alfa o HEX con alfa. Elige un fondo uniforme y aplica a la herramienta el color opaco resultante.

HEX opaco resultante

Vista previa de visión del color

Simulaciones aproximadas para deficiencias comunes de visión del color. Son vistas previas de diseño, no diagnóstico médico.

Comprobador de contraste WCAG

AA requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1.

Comprobación manual

Ratio
--
Texto de interfaz legible
Ajustar contraste

La propuesta ajusta la luminosidad y reduce el croma si hace falta. La pareja HEX final se comprueba sin redondear la relación. Revisa el aspecto y el tamaño del texto.

Mejores combinaciones

Comprobaciones automáticas con blanco, negro y colores de la paleta.

Matriz de contraste de tonos · 13 × 13

Las filas son fondos y las columnas texto. Incluye once tonos, blanco y negro. Usa las flechas en la matriz y selecciona un par para inspeccionarlo.

Selecciona un par para ver la relación y usarlo en la comprobación manual.

AA: 4,5:1 normal / 3:1 grande. AAA: 7:1 normal / 4,5:1 grande. Las valoraciones corresponden a este par y tamaño.

Exportar tokens

Copia variables CSS, configuración Tailwind, SCSS, tokens JSON y tarjetas SVG/PNG descargables.

Descargar tarjeta de paleta
Exporta una tarjeta 1200x630 como PNG o SVG para documentación, redes y brand boards.
Generada localmente en el navegador.
Vista previa de la tarjeta de la paleta actual
La misma tarjeta que descargas en PNG o SVG · 1200 × 630


Extraer colores de imagen
Suelta un PNG, JPG o WebP. La imagen se procesa localmente en tu navegador.


Generador de gradientes
Crea gradientes CSS desde la paleta actual.


Vista previa UI
Un pequeño mockup de interfaz para comprobar que la paleta funciona en un contexto real.


Checklist de producción
Una checklist breve para usar la paleta en un sitio real.
  • Usa el tono marcado Original como color de marca. Su nivel depende del color introducido; elige hover y estados activos comprobando el contraste, sin asumir 500/600/700.
  • Usa tonos 50/100 para superficies, no colores saturados detrás de párrafos.
  • Comprueba el texto con mínimo 4.5:1 antes de publicar.
  • Prueba estados UI importantes: hover, deshabilitado, éxito, aviso y error.
  • Mantén un solo acento fuerte para conservar coherencia visual.


Herramientas y guías de color
Páginas dedicadas a contraste, paletas Tailwind, variables CSS, extracción de imágenes y gradientes.
Comprobador de contraste WCAGComprueba si texto y fondo cumplen los ratios de contraste WCAG AA y AAA.Generador de colores TailwindCrea una escala Tailwind 50-950 desde un color de marca.Generador de variables de color CSSGenera custom properties CSS y tokens de diseño desde una paleta.Extractor de colores de imagenExtrae colores dominantes de imágenes localmente en el navegador.Generador de gradientes CSSCrea gradientes CSS lineales, radiales y cónicos desde una paleta.Paleta de colores accesibleDiseña paletas que mantienen el texto legible y compatibles con WCAG.Generador de paletas de marcaCrea una paleta de marca desde un logo o color primario y exporta variables CSS y tokens de diseño.Generador de paletas para gráficosGenera colores distintos para dashboards y visualización de datos, con contraste y riesgo daltonismo.Simulador de daltonismoPrevisualiza paletas para deuteranopia, protanopia y tritanopia antes de publicar combinaciones de riesgo.Convertidor de color HEX, RGB, HSL y OKLCHConvierte colores entre HEX, RGB, HSL y OKLCH y copia valores listos para CSS y documentación.Generador de armonía de colorGenera armonías complementarias, análogas, triádicas, split, tetrádicas y monocromáticas.Generador de paletas de colorGenera paletas armónicas desde un color base con reglas complementarias, análogas, triádicas y monocromáticas.Generador de tonos de colorGenera una escala 50-950 desde un color base para superficies UI, bordes, hover y modo oscuro.Generador de paleta modo oscuroCrea paletas dark mode con texto legible, superficies muted, bordes y acentos accesibles.Generador de design tokensCrea design tokens de color desde una paleta y exporta CSS variables, SCSS maps, JSON y Tailwind.Generador de tema shadcnMapea una paleta a variables CSS estilo shadcn para background, foreground, primary, muted, accent y destructive.Generador de esquemas de color webCrea un esquema de color web con colores primarios, neutros y acentos para hero, botones, cards y formularios.


Cómo crear una paleta accesible
Parte de un color de marca, elige una armonía, verifica contraste y exporta tokens.
¿Complementaria o análoga?
La paleta complementaria usa colores opuestos en la rueda y da un contraste fuerte. La análoga usa tonos vecinos y resulta más suave, buena para interfaces densas.
¿Por qué importa el contraste?
El texto con poco contraste queda bien en un mockup y se vuelve ilegible en la pantalla de quien lo usa. Para texto de lectura apunta como mínimo a WCAG AA, es decir 4,5:1.
¿Sirve para Tailwind?
Sí. La exportación Tailwind genera la escala del color primario de 50 a 950, más el color de acento cuando existe.
¿Se suben las imágenes?
No. La extracción de color usa canvas en tu navegador. Ningún archivo sale de tu dispositivo.