Entendiendo el color y los esquemas de color de la web
Hay cuatro esquemas de color básicos que puede usar para un sitio web. Cada página de este artículo muestra una imagen del esquema de color y cómo puede generar un esquema similar en Photoshop.
- monocromoUsando colores del mismo tono. Pueden tener diferentes tonos o matices dependiendo de la cantidad de blanco o negro que se agregue.
- análogoEsto utiliza colores que están cerca uno del otro en la rueda de colores.
- complementarioEsto se ve a menudo como "opuesto" porque los dos colores en un esquema de color complementario están opuestos entre sí en la rueda de color.
- triádicoEstos colores están espaciados uniformemente en la rueda de color.
Todas las combinaciones de colores utilizarán este amarillo como color base.
02 de 10Esquema de color web monocromático
Este esquema de color utiliza el amarillo mostaza de mi color base y agrega un poco de blanco y negro para tintar y sombrear el esquema en consecuencia.
- superior izquierda - el color base # ffe500
- arriba a la derecha: se agregó un relleno del 50% de blanco para obtener # fff280
- abajo a la izquierda: se agregó un relleno del 75% de blanco para obtener # fff8bf
- abajo a la derecha - se agregó un 50% de negro para obtener # 7f7200
Los esquemas de color monocromáticos son a menudo los más fáciles a la vista de todos los esquemas de color. Los suaves cambios en el tinte y el tono hacen que los colores fluyan entre sí mejor. Utilice este esquema de color para hacer que su sitio se vea más fluido y recogido.
03 de 10Más esquema de color web monocromático
Se agregó un cuadrado de 20% negro para obtener más colores en el esquema. Agregar negro o blanco a sus colores puede crear un nuevo color en su paleta sin alterar el tono de la página.
04 de 10Esquema de color web análogo
Esta combinación de colores toma el color base amarillo y agrega y resta 30 grados al tono en la paleta de colores de Photoshop.
- superior izquierda - el color base # ffe500
- arriba a la derecha - +30 grados para obtener # 99ff00
- abajo a la izquierda - -30 grados para obtener # ff6600
- abajo a la derecha - 100% blanco #ffffff
Los colores análogos pueden funcionar muy bien juntos, pero a veces pueden chocar mal. Asegúrese de probar estos esquemas con más personas que usted, su familia y amigos. Cuando funcionan, crean un sitio que es más colorido que el esquema monocromático, pero casi tan fluido.
05 de 10Esquema de color web más análogo
Se agregó un cuadrado de 20% negro para obtener más colores en el esquema.
06 de 10Esquema de color web complementario
Las combinaciones de colores complementarias, a diferencia de otras combinaciones de colores, normalmente solo tienen dos colores. El color base y el opuesto en la rueda de colores. Photoshop facilita la obtención del color complementario: simplemente seleccione el área de color que desea complementar y presione Ctrl-I. Photoshop lo invertirá por ti. Asegúrese de hacer esto en una capa duplicada, para que no pierda su color base.
- izquierda - el color base # ffe500
- derecha - el complemento # 001aff
Los esquemas de color complementarios son a menudo mucho más llamativos que otros esquemas de color, así que utilícelos con cuidado. Se utilizan con mayor frecuencia en piezas que necesitan destacarse.
07 de 10Esquema de colores web más complementario
Para obtener esta versión, agregué 50% de blanco a la mitad inferior de los colores y 30% de negro al cuadrado central. Como puede ver, le ofrece algunas opciones más, pero sigue siendo un esquema de color complementario.
08 de 10Esquema de color web triádico
Los esquemas de colores triádicos se componen de 3 colores más o menos espaciados alrededor de la rueda de colores. Debido a que una rueda de color tiene 360 grados, otra vez usé el cuadro de tono en el selector de color para sumar y restar 120 grados del color base.
- superior izquierda - el color base # ffe500
- arriba a la derecha - +120 grados para obtener # e500ff
- abajo a la izquierda - -120 grados para obtener # 00ffe6
- abajo a la derecha - 100% blanco #ffffff
Los esquemas de colores triádicos a menudo producen páginas web muy vibrantes. Pero al igual que los esquemas de color complementarios, pueden afectar a las personas de manera diferente. Asegúrese de probar.
También puede crear esquemas de color tetradic o de 4 colores, donde los colores están espaciados por igual alrededor de la rueda de color.
09 de 10Más Triadic Web Color Scheme
Al igual que con los otros ejemplos, agregué un cuadrado negro del 30% a los colores para obtener los tonos adicionales.
10 de 10Esquemas de color Web discordantes
La belleza está en el ojo del espectador, pero es un hecho desafortunado que no todos los colores van juntos. Los colores discordantes son colores que están separados más de unos 30 grados en la rueda de colores y no son complementarios o forman parte de una tríada.
Los esquemas de color discordantes pueden ser muy impactantes y solo deben usarse para generar atención. Recuerde que debido a que estos colores a menudo chocan, es posible que la atención que reciba no sea exactamente lo que está buscando.
