Uso de Paletton para ayudar a elegir la paleta de colores de su sitio web de WordPress

En esta publicación, veremos cómo usar Paletton para elegir la paleta de colores de su sitio web de WordPress. Paletton es un generador de paletas de colores en línea fácil de usar que le ahorrará mucho tiempo. No todos los clientes de diseño web tendrán un esquema de color de marca y será usted quien elija los colores para su sitio web. Ahí es donde Paletton resulta útil.

Entre todas las opciones disponibles en línea , Paletton es una de las favoritas debido a la función de ejemplo en vivo. La aplicación no se ha actualizado en algunos años, pero afortunadamente todavía funciona perfectamente bien para lo que necesitas. Encontrarás la aplicación en Paletton.com. Ignore los anuncios de Google a su alrededor y estará listo para comenzar.

¿Por qué es importante elegir los colores adecuados para su sitio web?

Antes de profundizar en cómo usar la aplicación Paletton, hagamos un repaso rápido de por qué es importante tener la paleta de colores correcta en un sitio web. Como sabes, los colores transmiten mensajes subliminales que afectan las emociones del espectador y, en última instancia, sus decisiones. Los colores también deben representar la marca de la empresa del sitio web.

La mejor manera de elegir una paleta de colores para un sitio web es considerar el estado de ánimo que desea que refleje. De la misma manera que los diseñadores de interiores eligen los colores para darle un ambiente específico a un espacio, puedes hacer lo mismo con un sitio web. Piense en las primeras impresiones; cuando alguien llega a un sitio web con colores brillantes y vibrantes, se sentirá satisfecho e incluso podría sonreír. Un sitio web con una paleta neutral y tenue puede calmar a una persona e infundirle una sensación de comodidad.

Por supuesto, los colores que elijas también deben ir a juego con la marca. Es en la combinación y la tonalidad donde usted, como diseñador web, ocupa un lugar central. Elegir el mejor uso de los colores en una paleta también es importante para el estado de ánimo de un sitio.

Es por eso que Paletton es uno de los generadores de paletas de colores favoritos. Puede obtener una vista previa de cómo se aplica una paleta de colores en diferentes combinaciones en un sitio web. Esto le ayuda a tomar mejores decisiones sobre los colores que elija. Poner el color oscuro como fondo en lugar del color claro hará una gran diferencia en el diseño final.

Todas las paletas de colores comienzan con un color base

Para cada paleta de colores que cree en Paletton, necesitará un color base con el que trabajar. Pero, ¿cómo saber qué color base usar?

Eche un vistazo al contenido que el cliente le ha proporcionado, su marca y cualquier imagen que le haya proporcionado.

  • Si su cliente tiene un logotipo de color, utilícelo como color base.
  • Use una herramienta de cuentagotas para extraer uno o dos colores de una de las imágenes que le dio el cliente.
  • Pregúntele a su cliente sobre el estado de ánimo y la historia de la marca de su empresa.
  • Si está creando diseños web para vender como plantillas o temas secundarios, o para su cartera, elija un color según el estado de ánimo que desee con su diseño.

Cuando crea una paleta en Paletton, puede elegir un color base visualmente o un código hexadecimal en la pestaña hexadecimal del color base.

Introducción a la interfaz de usuario de la aplicación Paletton

Ahora es el momento de comenzar a crear paletas. Echemos un vistazo a cómo está todo configurado. La aplicación tiene dos secciones principales; el lado izquierdo se trata de seleccionar colores y el lado derecho se trata de ver las vistas previas.

Echemos un vistazo a la herramienta de selección de color a la izquierda primero. Lo que sea que cambie en este lado cambia los resultados del lado derecho, pero es mejor entender primero de qué es capaz cada lado.

Lado izquierdo: los selectores de color

Lo primero que notas cuando ingresas a Paletton App es la rueda de colores. La vista predeterminada tiene el color base como un rojo neutro en una paleta monocromática (de 1 color).

Verás un conjunto de 5 puntos en una línea dentro del círculo de color. El punto en el centro es el color base, dos puntos agregan brillo y desaturación mientras que los otros dos agregan contraste y saturación.

Combinaciones de colores

Sobre el círculo de color hay cinco botones de combinación. Las opciones son de izquierda a derecha:

  • Monocromático – 1 color + complementario opcional
  • Adyacente – 3 colores + complementario opcional
  • Triádico – 3 colores + complementario opcional
  • Tétrada – 4 colores
  • Estilo libre – 4 colores

Color de base

Para cambiar el color base, puede realizar una de las siguientes acciones:

  1. Arrastra el punto de color principal a cualquier parte del círculo exterior.
  2. Arrastre el punto central dentro del círculo para elegir un tono diferente del color principal elegido en el círculo exterior
  3. Ingrese un código hexadecimal en la pestaña inferior izquierda.
  4. Para convertir un color secundario en el color base, deberá hacerlo en el lado de vista previa de la pantalla. Más sobre eso más adelante.

Cuando arrastra el punto de color base dentro del círculo, todos los demás puntos se mueven junto con él mostrando las variantes de tono.

También puede seleccionar colores individuales haciendo clic en Mayús antes de arrastrar.

Sintonia FINA

El botón en la parte superior izquierda del círculo le permite ingresar los grados de matiz a mano para un ajuste fino. Hay más capacidades de ajuste fino con el botón en la parte inferior derecha. Aquí puedes afinar todo sobre los colores que has elegido:

  • Matiz
  • Saturación
  • Brillo
  • Contraste

Simplemente haga clic en los botones para agregar o disminuir cada efecto en 1, 5 o 10 grados.

Ajustes preestablecidos según el color base

El área de selección de color tiene dos opciones principales de selección; Colores y preajustes. Miramos la sección de colores arriba. Ahora, visitemos la pestaña de ajustes preestablecidos. De acuerdo con el color base y la combinación que haya seleccionado, los ajustes preestablecidos mostrarán una variedad de variables. Estos son útiles si no quiere jugar con el tono, la saturación, el brillo y el contraste por su cuenta.

Estos ajustes preestablecidos pueden darle una buena idea de lo que es posible con los colores que ha elegido y si hay posibles paletas secundarias para complementar la primera.

Lado derecho: las vistas previas de la paleta

En el lado derecho del Paletton es donde se ven todas las vistas previas en vivo. El área principal está separada en cuatro secciones para poder visualizar paletas monocromáticas u otras con dos, tres o cuatro colores. Cada sección de color muestra el color base en el área más grande y cuatro variaciones a su alrededor.

En la imagen a continuación, verá cómo el selector de color y la vista previa funcionan juntos.

Debajo del cuadro de vista previa hay una pestaña donde puede cambiar la apariencia de las vistas previas. La vista predeterminada es definitivamente la mejor, pero en caso de que desee cambiar la apariencia de las cosas, ese botón está ahí para usted.

Cambiar el color base

Dentro de la sección de vista previa, puede hacer clic en uno de los colores secundarios o complementarios y convertirlos en el color base. Coloca el cursor sobre cualquier color y haz clic en ‘más información’. Además de ver toda la información de ese color, verás un botón que dice ‘Aplicar como color base’. Al hacer clic en esto, todos los colores de la paleta cambiarán.

Uso de la función de simulación de visión de Paletton

Una de las mejores características de Paletton es la capacidad de evaluar cómo se verán sus colores en instancias inesperadas. La función se llama «Simulación de visión» y la encontrará debajo del cuadro de vista previa. Estas son las simulaciones disponibles:

  • Simulación de daltónicos
  • desaturar
  • Simulación gamma
  • Colores web (paleta de 216 colores heredada)

Esta es una gran herramienta si está creando una paleta para un sitio web. Puede ver si su paleta se verá bien en todos esos casos. La más útil es la simulación de daltonismo. ¡Es bueno asegurarse de que todos los colores estén diferenciados entre sí!

Ver ejemplos en vivo de su paleta de colores

Otra herramienta práctica en Paletton es la pestaña que le muestra cómo se verá la paleta en un sitio web de muestra y otros estilos de diseño. Encontrará estas simulaciones en la pestaña ‘EJEMPLOS…’. La primera opción es un diseño de página y esto tiene algunas opciones:

  • pagina blanca
  • página oscura
  • diseño positivo
  • diseño negativo

La aplicación puede mostrarte otras simulaciones de diseños artísticos con la paleta de colores que elijas. Hay algunos ejemplos estáticos y animados. Estos son prácticos para tener una buena idea de cuánto potencial tiene su paleta de colores.

Además, en esta etapa, puede aleatorizar su paleta de diferentes maneras:

  • Colores similares, a diferencia del estilo.
  • A diferencia de
  • Similar
  • A diferencia de los colores, estilo similar.

¡Asegúrate de obtener una copia de tu paleta antes de aleatorizarla! No hay vuelta atrás.

Exportación y copia de una paleta de colores

Ahora que ha ajustado y obtenido una vista previa de su paleta de colores, es hora de exportarla desde Paletton y prepararla para su sitio web.

Hay algunas formas diferentes de copiar o exportar su paleta. En la parte superior derecha de la ventana hay un botón que dice ‘compartir paleta’ pero parece haberse roto hace un tiempo. Simplemente ignore ese botón ya que no hace nada.

Copie su paleta de cualquiera de estas otras formas:

  • Copie los códigos hexadecimales de colores individuales desplazándose para verlos y haciendo clic para abrir la ventana de información.
  • Haga clic en ‘TABLAS/EXPORTAR’ para ver las paletas en diferentes formatos.
  • Dentro de la pestaña TABLAS/EXPORTAR, exporte en cualquiera de estos formatos:

    • Listas de colores

      • HTML
      • MENOS
      • CSS
      • HABLAR CON DESCARO A
      • XML
      • texto
    • Muestras de color

      • Imagen PNG
      • ACO (Photoshop)
      • GPL ( Gimp )
  • También puede ver combinaciones de colores en la paleta elegida.

Agregar los colores a su sitio web de WordPress

¡Ahora es el momento de agregar los colores a su sitio!

Dado que la aplicación Paletton no se ha actualizado en más de 6 años, es mejor que descargue la versión de texto simple e ingrese los colores en su hoja de estilo manualmente. Es posible que las funciones de exportación no funcionen con la hoja de estilo HTML o CSS de su sitio web.

Para agregar colores a su tema Divi , navegue a sus Opciones de tema e ingrese cada color con su código hexadecimal correspondiente.

¡Eso es una envoltura de color!

Hemos terminado de revisar los pasos para crear una paleta de colores con Paletton. Las características básicas de la aplicación son similares a otras aplicaciones de paleta de colores, pero lo que la hace destacar del resto es la capacidad de ver los colores en ejemplos en vivo tanto para el diseño web como para otros diseños artísticos. Es una pena que la aplicación no se haya actualizado en más de 6 años. ¡Afortunadamente, parece mantenerse vivo a través de esos anuncios de Google!

¿Cuál es tu aplicación generadora de paleta de colores favorita? ¿Ya probaste Paletton? ¡Cuéntanos en los comentarios!

Imagen destacada a través de DaGaAl / shutterstock.com