Color y degradados

El panel de color unificado de Sitely aporta coherencia de color al diseño de tu sitio web. Cada vez que selecciones una opción de color en el panel de estilos, se mostrará el panel de color.

Dentro del panel hay tres grupos de colores: la primera fila de colores es tu paleta principal; estos son los colores que defines para tu sitio web. La segunda fila son los colores neutros, que normalmente incluirán negro y blanco. La última fila son los colores de wireframe predeterminados que Sitely aplica a los elementos cuando se agregan por primera vez a tu página web. En el uso normal, los únicos colores que quizá quieras cambiar son los contenidos en la fila superior, la principal. Para mayor claridad, nos referiremos a esta primera fila como la paleta de tu sitio web.

Debajo de las filas de colores hay herramientas que te permiten crear colores. Estas incluyen deslizadores de tono, saturación y brillo, y espacios para introducir valores numéricos de RGB, HSL, Hex y opacidad.

Sitely ofrece una paleta de colores principal estándar para ayudarte a empezar. Sin embargo, al configurar un sitio nuevo, normalmente cambiarás los colores principales para que reflejen los colores que quieres en tu sitio web. Para hacerlo, selecciona uno de los colores principales que quieres reemplazar: su borde se resaltará para indicar que está seleccionado. Luego, usa las distintas herramientas para cambiar el color por el de tu elección. Repite esto con los otros colores que quieras modificar. Si conoces los valores de los colores que deseas usar, simplemente introdúcelos en las casillas correspondientes. Por ejemplo, si quisieras crear una paleta de color como esta:

podrías simplemente introducir el código Hex o el código RGB en los campos correspondientes del panel de color.

Lo importante a tener en cuenta es que al seleccionar un color en el panel y luego realizar cambios, se sobrescribirá el color seleccionado en el panel de color y en todos los elementos de la página que usen ese color.

Uso del selector de color de Apple

Otra forma de editar colores es usar el selector de color integrado de Apple. Puedes acceder a él haciendo clic en el cuadro del selector de color en el panel de color. Se ve así:

‍La herramienta cuentagotas te permite seleccionar cualquier color de la pantalla de tu equipo.

‍Al seleccionar esto, se abrirá el selector de color de Apple.

‍En el ejemplo que se muestra aquí, tenemos una muestra de color de Sitely creada para usarse en otras aplicaciones de Mac y guardada como una muestra personalizada. Con el selector de color abierto, simplemente selecciona el color que quieras añadir a tu paleta principal. El color elegido reemplazará el color principal actualmente seleccionado en la paleta principal de Sitely. Por supuesto, puedes usar cualquiera de las herramientas que ofrece el selector para generar colores nuevos, incluido el cuentagotas:

‍

La ventaja del panel de color

Al configurar tu paleta de colores principal y usarla de forma consistente para aplicar color a los elementos de la página, estarás listo cuando decidas darle a tu sitio web una renovación de color. Basta con abrir una copia del archivo de proyecto de tu sitio existente y cambiar los colores de tu paleta principal. Todos los elementos de la página que usaban los colores antiguos cambiarán en todo tu sitio para reflejar tu nuevo esquema de color.

‍Cambios de color puntuales

‍Puede que necesites aplicar un color a un elemento de la página que no forma parte de tu paleta principal del sitio. En ese caso, puedes seleccionar el elemento en la página y luego usar la opción de color ‘Actual’ en el panel de color:

‍

Al seleccionar esta opción y cambiar el color, tu cambio solo afectará al elemento actualmente seleccionado. El color que elijas no se agregará a tu paleta principal del sitio web.

‍Degradados

‍El selector de color te permite elegir los dos extremos de un degradado o, en el caso de un degradado de varios pasos, cada paso de color. Además, el degradado se puede configurar como lineal (en la dirección del ángulo), radial (del centro hacia los bordes) o cónico (un barrido circular que parte del ángulo).

‍El degradado es una variación continua de color (rampa) entre los pasos de color. El siguiente ajuste te permite elegir si la rampa debe realizarse entre los colores rojo, verde y azul, o en un espacio de color más parecido a la visión humana, intentando preservar el matiz y la luminosidad (el espacio de color OKLCH). Para muchas combinaciones de colores, este último produce degradados más agradables y vivos.

‍Los degradados también se pueden aplicar a los bordes de cajas y botones: