Cómo diseñar con azul y colores complementarios

Tabla de contenido:

Cómo diseñar con azul y colores complementarios
Cómo diseñar con azul y colores complementarios
Anonim

El azul es uno de los colores más comunes utilizados en el diseño web. El uso de un azul medio a oscuro fomenta una sensación relajante que los diseñadores pueden complementar con amarillo y naranja.

Aquí hay algunas maneras diferentes en que el azul puede funcionar con otros colores.

Los opuestos se atraen y el azul combina bien con el naranja

Image
Image

Considere combinar los colores azul con naranja en un esquema de color complementario.

De más oscuro a más claro, los naranjas que se muestran con cada muestra azul en la imagen de arriba son:

  • hexadecimal FFA500 | RGB 255, 165, 0 (un naranja dorado; palabra clave de color SVG y palabra clave de color CSS naranja)
  • hexadecimal FF8000 | RGB 255, 128, 0 (naranja medio)
  • hexadecimal FF4500 | RGB 255, 69, 0 (naranja rojo; palabra clave de color SVG orangered)
  • hexadecimal C83200 | RGB 200, 50, 0 (naranja oscuro)
  • Números: hexadecimal FF7F27 | RGB 255, 127, 39 (naranja melocotón)

Los azules, de más oscuros a más claros son:

  1. Marina: Hexadecimal 000080 | RGB 0, 0, 128 (palabra clave de color CSS/palabra clave de color SVG azul marino)
  2. Azul: Hexadecimal 0000FF | RGB 0, 0, 255 (la palabra clave de color CSS/SVG es azul; color seguro para el navegador)
  3. Hexadecimal: 0045FF | RGB 0, 69, 255 (un azul medio)
  4. Azul acero: Hexadecimal 4682B4 | RGB 70, 130, 180 (palabra clave de color SVG azul acero; un azul corporativo)
  5. Hexadecimal: 0080FF | RGB 0, 128, 255 (un azul medio)
  6. Azul claro: Hexadecimal ADD8E6 | RGB 173, 216, 230 (palabra clave de color SVG azul claro)

Los azules oscuros y los tonos medios de azul simbolizan la importancia, la confianza, el poder, la inteligencia, la estabilidad, la unidad y el conservadurismo. Al agregar un poco de naranja a su paleta predominantemente azul oscuro, introduce algo de calidez y energía que puede evitar que su paleta sea demasiado forzada o abrumadora.

No tienes que usar estos tonos exactos. Vaya un poco más claro o más oscuro, o avance un punto hacia la izquierda o hacia la derecha en la rueda de colores. Estas combinaciones de colores lo ayudan a encontrar una paleta de colores adecuada utilizando el azul y el naranja como componentes principales.

Mezcla azules profundos con amarillo dorado

Image
Image

Lleva los azules oscuros a casi morados y agrega un toque de amarillo sol en un esquema de color complementario.

El azul es un color frío que se vuelve cálido a medida que agrega los tonos púrpura, mientras que el amarillo es un color cálido en el otro lado de la rueda de colores. Para evitar vibraciones desagradables, evite usar en cantidades iguales. Dale vida a tu azul con un toque de amarillo (o calma tu amarillo con una pizca de azul).

De más oscuro a más claro, el amarillo que se muestra con cada muestra azul en la imagen de arriba son:

  • Amarillo de cadio: Hexadecimal FF9912 | RGB 255, 153, 18 (un amarillo parduzco cálido)
  • Oro: Hexadecimal FFD700 | RGB 255, 215, 0 (palabra clave de color SVG oro)
  • Números: hexadecimal FFFF00 | RGB 255, 255, 0 (palabra clave de color SVG/CSS amarillo)

El blues es:

  1. Azul muy oscuro: Hexadecimal 000033 | RGB 0, 0, 51 (un navegador azul oscuro seguro)
  2. Azul medianoche: Hexadecimal 191970 | RGB 25, 25, 112 (clave de color SVG azul medianoche)
  3. Azul pizarra oscuro: Hex 483D8B RGB 72, 61, 139 (palabra clave de color SVG azul pizarra oscuro; un azul púrpura grisáceo)
  4. Índigo: Hexadecimal 4B0082 | RGB 75, 0, 130 (clave de color SVG índigo; un azul violáceo)
  5. Azul Violeta: Hexadecimal 8A2BE2 | RGB 138, 43, 226 (clave de color SVG azul violeta)
  6. Azul cob alto: Hexadecimal 3D59AB | RGB 61, 89, 171

Los colores que empujan hacia el lado violeta-púrpura del azul pueden agregar un toque de misterio, toques de feminidad. Añade calidez al azul frío.

Tonos de cian con naranja oscuro

Image
Image

El cian medio a oscuro es azul al borde del verde. Aquí, varios tonos de azul medio y cian se combinan con colores anaranjados pardos oscuros.

Además de sus atributos calmantes, este tono más oscuro de azul podría tener el simbolismo del verde, como el equilibrio, la armonía y la estabilidad. Obtiene un poco de calidez y energía cuando se combina con tonos marrones o rojizos de naranja. El marrón es un color neutro natural y con los pies en la tierra. El rojo y el cian son opuestos en la rueda de colores con alto contraste, pero no son necesariamente una gran combinación. Pasar del rojo al naranja y a los azules más oscuros proporciona una paleta más agradable.

De más oscuro a más claro, el rojo anaranjado que se muestra con cada muestra azul en la imagen de arriba son:

  • Rojo naranja intenso: Hexadecimal CD3700 | RGB 205, 55, 0
  • Naranja de cadmio: Hexadecimal FF6103 | RGB 255, 97, 3
  • Números: hexadecimal rojo FF0000 | RGB 255, 0, 0 (palabra clave de color SVG/CSS rojo)

El blues es:

  1. Azul real oscuro: Hexadecimal 27408B | RGB 39, 64, 139
  2. Azul cielo profundo: Hexadecimal 00688B | RGB 0, 104, 139 (no palabra clave de color azul cielo profundo)
  3. Azul pizarra oscuro: Hex 2F4F4F RGB 47, 79, 79 (no palabra clave de color azul pizarra oscuro)
  4. Cian oscuro: Hexadecimal 008B8B | RGB 0, 139, 139 (el lado más verde del azul)
  5. Azul de manganeso: Hexadecimal 03A89E | RGB 3, 168, 158 (un color azul turquesa)
  6. Cian (Aqua): Hexadecimal 00FFFF | RGB 0, 255, 255 (palabra clave de color SVG cian o agua; un color azul verdoso)

Azul, rojo y amarillo

Image
Image

Una tríada complementaria dividida toma un color (en este caso, azul) y luego toma los colores a cada lado del complemento de ese color (color opuesto en la rueda de colores). El complemento del azul puro es el amarillo puro. El azul medio es opuesto al naranja. Según el tono de azul con el que comience y la cantidad de colores intermedios que utilice, puede combinarlo con colores desde el rojo rosado hasta el amarillo verdoso.

  1. Marina: Hexadecimal 000080 | RGB 0, 0, 128
  2. Rojo brillante: Hexadecimal FE0004 | RGB 254, 0, 4
  3. Amarillo soleado: Hexadecimal FFFB00 | RGB 255, 251, 0
  4. Azul pizarra oscuro: Hex 483D8B RGB 72, 61, 139 (palabra clave de color SVG azul pizarra oscuro; azul púrpura grisáceo)
  5. Oro: Hexadecimal FFD700 | RGB 255, 215, 0 (palabra clave de color SVG oro)
  6. Chartreuse: Hexadecimal 7FFF00 | RGB 127, 255, 0
  7. Cian oscuro: Hexadecimal 008B8B | RGB 0, 139, 139 (el lado más verde del azul)
  8. Violeta-Rojo: Hexadecimal D02090 | RGB 208, 32, 144
  9. Naranja oscuro: Hexadecimal C83200 | RGB 200, 50, 0 (no palabra clave de color naranja oscuro)

Los tonos más oscuros de azul denotan importancia, confianza, poder, autoridad, inteligencia, estabilidad, unidad y conservadurismo. El rojo es otro color de poder, pero llama más la atención que el azul. El amarillo añade algo de brillo y alegría. Usar cantidades iguales de cada color lo haría infantil (piense en colores primarios), como el ejemplo n. ° 1. Sin embargo, si solo usa pequeñas dosis de rojo y amarillo (o colores cercanos) con un esquema de color principalmente azul oscuro, es bastante adecuado para proyectos para adultos que no desea que parezcan demasiado serios.

Recomendado: