El color es un elemento muy importante del diseño web, y una de las mejores maneras de cambiar la sensación que transmite un diseño es cambiar el esquema de color . Pero si quieres jugar con las sensaciones que transmite el color deberás entender las familias de color. Familias de color son una simple división de la rueda de color en tres tipos de colores:
- colores cálidos
- colores fríos
- colores neutros
A pesar de que es posible tener un diseño que utilice los colores de las tres familias, la mayoría de los diseños van a tener una sensación general de calor, frío, o neutralidad.
Página web de colores cálidos
Los colores cálidos son tonos de rojo, naranja y amarillo y sus variantes. Se llaman colores cálidos porque evocan la sensación de la luz del sol y del fuego que son calientes. Los diseños que utilizan colores cálidos tienden a ser vigorizantes y estimulantes. Implican pasión y sentimientos positivos en la mayoría de las personas.
Los colores cálidos son creados usando sólo los dos colores: rojo y amarillo. Estos son los colores primarios y se combinan para hacer naranja. No utilices los colores fríos en una paleta cálida al mezclar colores.
- Cc333F
- eb6841
- edc951
- Ffd573
- ff773d
- f73e3e
- Ffe545
- fefbaf
- c2a34f
- fbb829
- Ffab03
- fc7f03
- fc3903
- d1024e
Página web de colores fríos
Los colores fríos son tonos de verde, azul, y púrpura y sus variantes. Se llaman colores fríos porque evocan una sensación de agua, de bosques (árboles) y de la noche. Ponen en evidencia una sensación de relajación, calma y reserva. Los diseños que utilizan colores más fríos son a menudo vistos como más profesional y estable.
A diferencia de los colores cálidos, sólo hay un color primario, azul, los colores fríos. Así que para obtener otros colores en la paleta, se debe mezclar un poco de rojo o amarillo a azul para obtener verde y morado. Esto hace verde y púrpura más cálidos que el azul, que es un color frío puro.
- 69d2e7
- a7dbd8
- e0e4cc
- 2a044a
- 0b2e59
- 0d6759
- 7ab317
- a0c55f
- 8ca315
- 5191c1
- 1e6495
- 0a4b75
- 8fbfb9
- 6493a7
- bddb88
- e0f3b2
- eefaa8
Página web de colores neutros
Los colores neutros son los colores hechos mediante la combinación de los tres colores primarios juntos para conseguir marrón y los dos colores restantes : blanco y negro. Cuanto más mezclado o gris es un color más neutral se vuelve. Los diseños neutros son los más difíciles de definir porque gran parte de la sensación que se evoca es de los colores cálidos y fríos que pueden resaltar la página web. Diseños blancos y negros tienden a ser vistos como más elegantes y sofisticados. Pero debido a que estos colores son tan crudos pueden ser difícil crear diseños eficaces.
Para crear una paleta de colores neutros se mezclan los tres colores primarios juntos para conseguir marrones y beiges, o agregar negro a un color cálido o frío, o blanco para que los colores sean más grises.
- D9ceb2
- 948c75
- d5ded9
- 7a6a53
- 99b2b7
- E6cba5
- ede3b4
- 8b9e9b
- bd7578
- D8d0c8
- d2d0c8
- cbd0c8
- c4d0c8
- 182009
- 464b35
- 757661
- d1ccb9
Uso de las familias de color en el diseño web
Si estás tratando de evocar un estado de ánimo con tu diseño, las familias de color pueden ayudarte a hacerlo. Una buena manera de probar esto es la creación de tres paletas diferentes con las tres familias y comparar tu diseño con los tres. Podrás notar que todo el tono de la página cambia cuando cambias la gama de colores.
Mezclador de color con código de color para html
Desliza los selectores de las barras de color rojo, verde y azul para mezclarlos y conseguir los más de 16 millones y medio de colores que se pueden utilizar en una página web.
Al lado de la caja de color el código hexadecimal del color mostrado listo para ser utilizado en la página web.
(function () {
$(document).ready(function(e) {
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 <= 235){
$miValue.css('left',miPosicion + 20);
} else {
$miValue.css('left',255);
}
}
$miValue.cambiarColor();
});
});
})(jQuery);
