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 paleta 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 dependerá de usted elegir 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 para lo que necesitas. Encontrarás la aplicación en Paletton.com. Ignore los anuncios de Google a su alrededor y estará listo.

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

Antes de analizar en profundidad cómo usar la aplicación Paletton, revisemos rápidamente por qué es importante tener la paleta de colores correcta en un sitio web. Como saben, 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, tú 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 es posible que sonríe. Un sitio web con una paleta tenue neutral puede calmar a una persona e infundirle una sensación de comodidad.

Por supuesto, los colores que elijas también deben coincidir con la marca. Es en la combinación y la tonalidad donde tú, como diseñador web, tomas el centro del escenario. 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 paleta 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 marcará 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 sabes qué color base usar?

Echa un vistazo al contenido que te ha proporcionado el cliente, su marca y las imágenes que te han proporcionado.

• Si su cliente tiene un logo de color, utilícelo como su color base.
• Utilice 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 de acuerdo con 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 empezar 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.

Primero echemos un vistazo a la herramienta de selección de color a la izquierda. Cualquier cosa que cambie en este lado cambiará los resultados del lado derecho, pero es mejor entender primero de lo que es capaz cada lado.

Lado izquierdo: los selectores de color

Lo primero que nota cuando ingresa a la aplicación Paletton es la rueda de colores. La vista predeterminada tiene el color base como rojo neutro en una paleta monocromática (1 color).

Verá 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
• Tetrad - 4 colores
• Estilo libre - 4 colores

Color de base

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

1. Arrastre el punto de color principal en cualquier lugar del círculo exterior.
2. Arrastre el punto del medio 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, tendrá que hacerlo en el lado de vista previa de la pantalla. Más sobre eso más tarde.

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 tono a mano para realizar ajustes. Hay más capacidades de ajuste con el botón en la parte inferior derecha. Aquí puede ajustar todo lo relacionado con los colores que ha 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 de selección principales; Colores y preajustes. Miramos la sección de colores de arriba. Ahora, visitemos la pestaña de ajustes preestablecidos. Según el color base y la combinación que haya seleccionado, los ajustes preestablecidos mostrarán una variedad de variables. Estos son útiles si no desea 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: vistas previas de la paleta

En el lado derecho del Paletton es donde puede ver todas las vistas previas en vivo. El área principal se divide 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 de abajo, 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 el aspecto 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á 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 casos inesperados. La función se llama 'Simulación de visión' y la encontrará debajo del cuadrado de vista previa. Estas son las simulaciones disponibles:

• Simulación daltónica
• 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 se diferencien 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ás estas simulaciones en la pestaña 'EJEMPLOS ...'. La primera opción es un diseño de página y tiene algunas opciones:

• Pagina blanca
• Página oscura
• Diseño positivo
• Diseño negativo

La aplicación puede mostrarle otras simulaciones de diseños artísticos con la paleta de colores elegida. 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.
• diferente a
• Similar
• A diferencia de los colores, estilo similar

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

Exportar y copiar 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 los colores individuales colocando el cursor sobre ellos 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, exporta 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 hasta sus Opciones de tema e ingrese cada color con su código hexadecimal correspondiente.

¡Eso es una envoltura de color!

Terminamos 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 distingue 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 de generador de paleta de colores favorita? ¿Ya probaste Paletton? ¡Háznoslo saber en los comentarios!

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