Skip to content

Generador de paletas de color

In-browser only HSL color model WCAG 2.2 contrast
←/→ Cambiar armonia⌘/Ctrl+C Copiar⌘/Ctrl+E Exportar
Armonia
Formato de copia:
Vista previa de daltonismo:
Paleta - Complementario · 2 muestras
  • #3C83F6rgb(60, 131, 246)hsl(217, 91%, 60%)
  • #F6AF3Crgb(246, 175, 60)hsl(37, 91%, 60%)
Generador de paletas de color

Paleta · Complementario · 2

#3C83F6
#F6AF3C

Izquierda/Derecha cambiar armonia · Esc salir
Herramientas relacionadas Ver todo

Resumen

Crea paletas de color armonicas en tu navegador

Tanto si construyes una paleta de marca, un tema de interfaz o un conjunto de tokens de diseno, elige un color base y explora seis armonias de teoria del color — luego comprueba el contraste WCAG y la seguridad para el daltonismo, y exporta directamente a variables CSS o config Tailwind.

  • Seis reglas de armonia: complementario, analogo, triadico, tetradico, split-complementario, monocromatico
  • Entrada HEX, RGB y HSL con validacion en tiempo real
  • Copia con un clic por muestra o exportacion de la paleta completa
  • Exportacion en variables CSS y config Tailwind
  • Comprobador de contraste WCAG 2.2 y vista previa de daltonismo
  • Se ejecuta por completo en tu navegador
  • Se ejecuta por completo en tu navegador — nada se sube a un servidor
  • No se envian datos de color a ningun servidor
  • Funciona sin conexion una vez cargado
  • Las paletas recientes se almacenan solo en el almacenamiento local del navegador
  • Crear una paleta de color para una marca o interfaz desde un color base
  • Explorar armonias de teoria del color: complementario, analogo, triadico
  • Exportar tokens de paleta como variables CSS o config Tailwind
  • Fijar un color base y generar variaciones con diferentes reglas de armonia
  • Presentar una paleta en pantalla completa para revision

Primeros pasos

Como generar una paleta de color

  1. 1
    Introduce tu color base

    Escribe un codigo hex (ej. #E85D04), un valor RGB o HSL. O haz clic en la muestra de color para abrir el selector nativo.

  2. 2
    Elige una regla de armonia

    Haz clic en uno de los seis botones de armonia. La paleta se actualiza instantaneamente.

  3. 3
    Revisa tu paleta

    Cada muestra muestra sus valores HEX, RGB y HSL. Activa el panel de contraste para ver las valoraciones de accesibilidad WCAG, o habilita la vista previa de daltonismo.

  4. 4
    Copia o exporta

    Haz clic en el icono de copiar de cualquier muestra para copiar su codigo de color en el formato que prefieras (HEX, RGB o HSL). Usa el boton Exportar para copiar toda la paleta como variables CSS, configuracion de Tailwind o texto plano.

  5. 5
    Compara todas las armonias

    Haz clic en "Comparar todo" para ver las seis armonias a la vez. Haz clic en "Usar esta" en cualquier fila para cambiar a esa armonia.

  6. 6
    Comparte tu paleta

    Haz clic en "Compartir" para copiar una URL que restaura la paleta exacta.

Teoria del color

Referencia de reglas de armonia

Referencia de reglas de armonia
ReglaColoresDesplazamientos de tonoIdeal para
Complementario20°, 180°Contraste maximo; disenos energeticos
Analogo5-60° a +60°Paletas armonicas; escenas naturales
Triadico30°, 120°, 240°Disenos vibrantes y equilibrados
Tetradico40°, 60°, 180°, 240°Disenos ricos; requiere buen equilibrio
Split-complementario30°, 150°, 210°Alto contraste con menos tension
Monocromatico5Mismo tono, luminosidad variadaPaletas sutiles y cohesivas

Accesibilidad

Disenar paletas de color accesibles

  • Comprueba los ratios de contraste WCAG

    Activa el panel de contraste para ver el ratio WCAG 2.2 de cada muestra frente a un fondo blanco. Apunta a AA (4,5:1 texto normal, 3:1 texto grande) o AAA (7:1) siempre que sea posible.

  • Vista previa para usuarios con daltonismo

    Usa los modos de vista previa (protanopia, deuteranopia, tritanopia) para simular como ve tu paleta una persona con deficiencia visual del color. Asegurate de que el contenido clave sea distinguible sin depender unicamente del color.

  • Evita distinciones solo por tono

    No te bases unicamente en el tono para transmitir informacion. Combina las diferencias de color con contraste de luminosidad, patrones, formas o etiquetas de texto.

  • Prueba con contenido real

    Los ratios de contraste se calculan frente al blanco en esta herramienta. Prueba siempre tu paleta con texto real y componentes de UI sobre los fondos reales que planeas usar en produccion.

Preguntas frecuentes

A donde van mis datos de color?
A ninguna parte. Todos los calculos de color se realizan en tu navegador. No se envian datos de color a ningun servidor. La herramienta funciona sin conexion una vez cargada.
Que tan precisas son las paletas generadas?
Las reglas de armonia siguen las matematicas estandar de la teoria del color en la rueda HSL. Los colores generados son correctos para la regla seleccionada. La percepcion del color es subjetiva, asi que usa las paletas como punto de partida.
Que formatos de color se admiten?
Puedes introducir colores como HEX (3 o 6 digitos), RGB o HSL. La salida esta disponible en los tres formatos, mas variables CSS, config de Tailwind y texto plano.
Como funciona la vista previa de daltonismo?
La vista previa aplica matrices de transformacion establecidas que simulan como ve la paleta una persona con protanopia, deuteranopia o tritanopia. Son aproximaciones para fines de diseno.
Puedo usar las paletas en proyectos comerciales?
Si. Las paletas se generan a partir de reglas matematicas de teoria del color. No hay restricciones de licencia sobre los colores en si.
Por que algunas armonias producen colores similares?
Cuando el color base tiene poca saturacion (cerca del gris), las reglas basadas en el tono producen colores visualmente similares porque hay poco tono que rotar. Para paletas mas variadas, elige un color base saturado.
Cual es la diferencia entre complementario y split-complementario?
El complementario empareja el color base con el color directamente opuesto en la rueda (180°), creando el maximo contraste. El split-complementario usa los dos colores adyacentes al complemento (150° y 210°), ofreciendo alto contraste con menos tension visual.
Como compruebo si mi paleta cumple los estandares WCAG?
Activa el panel de contraste para ver el ratio de contraste de cada muestra frente a un fondo blanco. La herramienta muestra si cada par supera los umbrales WCAG AA y AAA.
Puedo guardar mis paletas?
La herramienta guarda automaticamente tus ultimas 10 paletas en el almacenamiento local del navegador. Tambien puedes compartir cualquier paleta mediante un enlace URL.
Funciona la herramienta en movil?
Si. La disposicion se adapta a cualquier tamano de pantalla. En movil, las muestras se apilan verticalmente y todas las funciones son accesibles.