Families of colors of the design Web

The color is a very important element of the design Web, and one of the best ways to change the sensation that transmits a design is to change the color scheme. But you want to play with the sensations that the color transmits you will have to understand the families of color. Families of color are a simple division of the wheel of color in three types of colors:

  • warm colors
  • cold colors
  • neutral colors

Although it is possible to have a design that uses the colors of the three families, the majority of the designs is going to have a general sensation of heat, cold, or neutrality.

Webpage of warm colors

The warm colors are tones of red, orange and yellow and its variants. Warm colors are called because they evoke the sensation of the light of the sun and the fire that are hot. The designs that use warm colors lie down to being vigorizantes and stimulating. They imply positive passion and feelings in the majority of the people.

The warm colors are created using only both colors: red and yellow. These are the primary colors and they are combined to make orange. You do not use the cold colors in a warm trowel when mixing colors.

Sample of color
  • Cc333F
  • eb6841
  • edc951
  • Ffd573
  • ff773d
  • f73e3e
  • Ffe545
  • fefbaf
  • c2a34f
  • fbb829
  • Ffab03
  • fc7f03
  • fc3903
  • d1024e

Webpage of cold colors

The cold colors are tones of green, blue, and purple and its variants. Cold colors are called at night because they evoke a water sensation, of forests (trees) and. They put in evidence a sensation of relaxation, calm and reserve. The designs that use colder colors often are seen as more stable professional and.

Unlike the warm colors, only there is a primary, blue color, the cold colors. So to obtain other colors in the trowel, blue one is due to mix a little red or yellow to obtaining green and mulberry. This makes green and purple warmer than the blue one, that is pure a cold color.

Sample of color
  • 69d2e7
  • a7dbd8
  • e0e4cc
  • 2a044a
  • 0b2e59
  • 0d6759
  • 7ab317
  • a0c55f
  • 8ca315
  • 5191c1
  • 1e6495
  • 0a4b75
  • 8fbfb9
  • 6493a7
  • bddb88
  • e0f3b2
  • eefaa8

Webpage of neutral colors

The neutral colors are the colors done by means of the combination of the three together primary colors to secure brown and remaining colors both: black and white. The more mixed or gray it is a neutral color the more becomes. The neutral designs are most difficult to define because great part of the sensation that is evoked is of the warm and cold colors that can emphasize the webpage. White and black designs lie down to being seen as more elegant and being falsified. But because these colors are so crude they can be difficult to create effective designs.

In order to create a trowel of neutral colors the three together primary colors are mixed to obtain brown and beige, or to add black to a warm or cold color, or target so that the colors are grayer.

Sample of color
  • D9ceb2
  • 948c75
  • d5ded9
  • 7a6a53
  • 99b2b7
  • E6cba5
  • ede3b4
  • 8b9e9b
  • bd7578
  • D8d0c8
  • d2d0c8
  • cbd0c8
  • c4d0c8
  • 182009
  • 464b35
  • 757661
  • d1ccb9

Use of the families of color in the design Web

If you are trying to evoke a mood with your design, the color families can help you to do it. A good way to prove this is the creation of three trowels different with the three families and to compare your design with the three. You will be able to notice that all the tone of the page changes when you change the range of colors.

Mixer of color with color code for HTML

It slides selectors of the smpte color bars red, green and blue to mix them and to secure than 16 million and more average of colors that can be used in a webpage.

Next to the box of color the hexadecimal code of the shown color ready to be used in the webpage.





function dec2hex (numero){ var vecHex=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']; var resultado=''; if (numero 15) { resultado = vecHex[numero % 16] + resultado; numero = parseInt(numero / 16); } resultado = vecHex[numero] + resultado; } return resultado; };

$.fn.cambiarColor = function (){ console.log($('#contenedorColor').css('background-color')); var valorHexa= [0,0,0]; $('.value').each(function(index, element) { valorHexa[index] = dec2hex($(this).position().left); }); $('#contenedorColor').css('background-color','#' + valorHexa[0] + valorHexa[1] + valorHexa[2]); $('#valor1').text('#' + valorHexa[0] + valorHexa[1] + valorHexa[2]); };

$('.colores li').each(function(index, element) { $(this).css('background-color','#'+ $(this).text()); }); $('#listaCalida li').click(function (){ $('#cuadradoCalido').css('background-color','#'+$(this).text()); $('#cuadradoCalido').text($(this).text()); }); $('#listaFria li').click(function (){ $('#cuadradoFrio').css('background-color','#'+$(this).text()); $('#cuadradoFrio').text($(this).text()); }); $('#listaNeutra li').click(function (){ $('#cuadradoNeutro').css('background-color','#'+$(this).text()); $('#cuadradoNeutro').text($(this).text()); });

$( ".value" ).draggable({ containment: "parent", axis: "x", drag: function( event, ui ) { $(this).cambiarColor(); console.log($(this).attr('id')); } });

$('.spin').click(function(e) { var coordenadasSpin = $(this).offset(); var relX = e.pageX - coordenadasSpin.left; var elemNum = $(this).attr('id').substr(4,1); var $miValue = $('#value'+ elemNum); var miPosicion =$miValue.position().left; if (relX = 20) { $miValue.css('left',miPosicion - 20); } else { $miValue.css('left',0); } } else if (relX > miPosicion){ if ( miPosicion

He lets a commentary