Utilore

Generador de paletas de colores

Elige un color de partida y la herramienta calcula el resto del conjunto según el círculo cromático. Haz clic en cualquier muestra para copiar su código, o carga una foto y toma la paleta directamente de ella.

Esquema

Haz clic en una muestra para copiar su código

    Paleta desde una foto

    La foto no sale de tu dispositivo: se lee en el propio navegador.

      Cómo usarlo

      1. Escribe un código de color o abre el selector: la paleta se redibuja mientras eliges.
      2. Cambia de esquema: el complementario está enfrente en el círculo, la tríada lo divide en tres.
      3. Haz clic en una muestra para copiar el código, o copia todo el conjunto como variables CSS.
      4. Para sacar colores de una foto, elige una imagen: se lee en tu propio dispositivo.

      Lo que conviene saber

      De dónde salen los ángulos

      Un esquema de color no es cuestión de gusto sino de geometría en el círculo cromático. El color complementario está justo enfrente, a 180°; una tríada divide el círculo en tres partes iguales de 120°; los análogos son vecinos dentro de treinta grados. La herramienta gira el tono manteniendo saturación y luminosidad, así que los acompañantes quedan tan vivos y tan profundos como el color de partida.

      Por qué una foto da colores reales y no barro

      Contar los píxeles más frecuentes no funciona en una fotografía: solo el cielo contiene un millón de azules ligeramente distintos, cada uno con una sola aparición. Esta herramienta parte el espacio de color por la mitad en su canal más amplio y lo repite hasta tener suficientes cajas, de modo que el conjunto conserva el cielo, la cara y la sombra por separado en lugar de un único marrón promedio.

      Preguntas frecuentes

      ¿Qué esquema conviene para una web?

      El monocromático y el análogo son los seguros: mantienen la página tranquila y no compiten por la atención. Reserva el complementario para el único elemento que debe verse: un botón, una etiqueta, un aviso.

      ¿Cómo uso la paleta en el código?

      Copia el bloque de variables CSS que hay bajo las muestras y pégalo en tu hoja de estilos. Los nombres salen como --color-1 … --color-6, que se leen mejor en un proyecto ajeno que una fila de códigos hexadecimales.

      ¿Se sube mi foto a algún sitio?

      No. La imagen se decodifica en la página y se reduce a 160 píxeles antes de contar los colores: nada sale del dispositivo y la respuesta llega al instante.

      ¿Por qué la fila de tonos oscuros no termina en negro?

      El negro puro y el blanco puro no aportan información: todo el mundo los conoce y en una paleta solo ocupan sitio. La fila se detiene antes del borde, así cada muestra sigue siendo un color utilizable.

      Herramientas relacionadas