Guía de Colores
En esta Guia de Colores os intentaremos mostrar las caracteristicas, anecdotas e informaciones más importantes sobre los colores, desde un punto de vista sencillo sin meternos en muchos lios de palabras raras.
Entre los apartados que tenemos podemos destacar la seccion que nos enseña que son exactamente los colores, la parte de colores con nombre en el que veremos un analisis profundo de las tonalidades con nombre mas famosas.
Tambien veremos que son los modelos de color CMYK , RGB, HSL y HSV que aunque tienen unos nombres muy raros la idea es sencilla, son la forma de representar los colores mediante sus valores más importantes como tipo de color, luz, intensidad o los colores que los forman.
Otra seccion muy importante sera la de colores html en la que veremos la influencia de estos colores en la web y su paso a los codigos css.
En concreto para coda color daremos la siguiente informacion : Detalles del Color, Codigo Html, Codigo Css Fondo, Codigo Css, Html de Color, porcentajes, Modelo CMYK, Modelo CMYK, RGB porcentajes, Modelo RGB, colores complementarios, colores intercambiados, colores complementarios, colores intercambiados, Modelo HSL, Modelo HSV.
Colores de los sentimientos
La relacion entre los los colores y los sentimientos y los difententes conceptos es muy importante la psicologia y en esta Guía de los colores os mostramos los colores más comunes asociados a los conceptos y sentimientos más comunes. Entre los que podemos destacar las siguientes categorias:
Tambien tratamos los colores en difententes conceptos como por ejemplo en los siguientes conceptos
Colores con nombre
A nivel cultural hay unos cuantos colores famosos como los Marrones, Rojos, Naranjas, Amarillos, Verdes, Azules, violetas, Rosas, Blancos, Grises o Negros pero además hay muchos más colores que de unos ambitos u otros como moda, banderas, ciencia, arte, heraldica, marcas comerciales se han ido haciendo famosos y que se pueden contar más de 1500 colores.
En esta seccion podemos ver los siguientes colores según su coloracion.
¿Que son los colores?
Pues esta pregunta tan sencilla es de una dificultad y abstraccion extrema. Para saber que son los colores tenemos que ser conscientes de una idea revolucionaria: en cada milimetro cuadrado de nuestra piel estamos rodeados por miles de millones de millones de millones de ondas llamadas electromagneticas que chocan y rebotan de unos sitios a otros.
Los colores son Ondas
Dependiendo del tamaño de la onda vamos a tener ondas de radio las mas grandes, microondas que son las que se utilizan en los aparatos de la cocina para calentar , ondas de calor o infrarojas y debajo de estas en un trozo bastante pequeño con ondas que van desde 400 nm a 750 nm (un nm es una millonesima parte de un milimetro ) las ondas de color, aun hay ondas mas pequeñas como por ejemplo los rayos ultravioleta que son los que nos queman la piel en la playa e incluso otros más pequeños como los rayos x que son con los que nos hacen las radiografias y por ultimo unos rayos que aparecen en las explosiones de estrellas lejanas llamadas Supernovas que emiten rayos cosmicos, Como podeis ver en el grafico de abajo.
Osea que la luz que nosostros sentimos es solo una parte de todos los montontes de ondas que hay en el espacio.
Bueno y que son entonces los colores, bueno pues nuestros ojos convierten estas ondas en los colores que nosotros sentimos , las ondas que se acercan al 400 nm son las que vemos como violetas y las que se acercan al 750 nm.
Aproximadamente son los siguientes : los violetas son ondas que va desde 380 a 450 nm
los azul son ondas que va desde 450 a 495 nm , los verdes son ondas que va desde 495 a 570 nm
los amarillos son ondas que va desde 570 a 590 nm, los naranjas son ondas que va desde 590 a 620 nm y los rojos son ondas que va desde 620 a los 750 nm.
Ademas cada objeto del mundo es un devorador de ondas pero muy selectivos y se comen todas las ondas menos las de un tipo, las que dejan libres son las que le dan su color.
Por ejemplo , una amapola, absorbe todos los colores menos el rojo que lo devuevle como le viene por eso es maravillosamente roja, un girasol, al contrario devora todas las ondas menos las amarillas y por eso es amarilla.
Cuando un objeto es realmente un gloton y se come todas las ondas se dice que es negro por que el negro es la ausencia de ondas de color, no llega ninguna a nuestros ojos y no vemos nada, por eso cuando es de noche y no hay luz lo vemos todo negro.
Cuando un objeto devuelve todas las ondas de color mezcladas, se dice que es blanco que es todos los colores juntos.
Los colores html son muy importantes ya que se se refiere a como representamos los colores en internet en esta pagina puedes saber más sobre los colores html.
Colores html
Uno de los momentos más importantes de los colores ha aparecido con la irrumpcion de internet en la que las webs tienen muchos colores distintos y su diseño es muy importante.
La web utiliza una serie de colores estandares como black, navy, blue,green, teal,lime,aqua, maroon, purple, olive, gray, silver, red, fuchsia y yellow. Pero ademas tambien podemos definir los colores usando el modelo de color RGB y los codigos hexadecimales.
RR GG BB
RR es el Valor en Rojo que va desde el 00 que es 0 al FF que equivale a 255
GG es el Valor en Rojo que va desde el 00 que es 0 al FF que equivale a 255
BB es el Valor en Rojo que va desde el 00 que es 0 al FF que equivale a 255
Asi por ejemplo #FF0000 es un rojo muy intenso y 550000 es un rojo muy oscuro y FF9999 es un rojo muy claro.
Los colores los podemos usar en html mediante los atributos color y bgcolor que son de html 4.0 y anteriores y que no deberian usarse o mediante los atributos de los css.
En fuentes podemos usar una de estas dos opciones
Colores de texto en html 4.0
<font color="#FF0000"> texto en rojo </font>
<font color="Red"> texto en rojo </font>
Colores de texto en html 5.0 con css
<div style="color:#80BFFF"> texto en rojo <div>
Para el fondo de la pagina o de una tabla podemos usar el codigo bgcolor en html 4 o el estilo css background en html 5
Colores de fondo en html 4.0
<body bgcolor="#FF0000">
<table bgcolor="#FF0000">
<tr bgcolor="#FF0000" >
<td bgcolor="#FF0000">
</td>
</tr>
</table>
o en html 5.0
<body style="background:#80BFFF">
<table style="background:#80BFFF">
<tr style="background:#80BFFF">
<td style="background:#80BFFF">
</td>
</tr>
</table>
Los colores seguros html
Con html podemos definir en un principio 255 rojos *255 verdes *255 azules = 16 millones de colores que son más de los que puede distinguir casi el ojo humano.
Además no todos los navegadores pintan igual los colores por eso hay uno colores que se ven igual en todos los navegadores son Los colores seguros html son colores.
Y que son los siguientes:
FFFFFF |
FFCCFF |
FF99FF |
FF66FF |
FF33FF |
FF00FF |
FFFFCC |
FFCCCC |
FF99CC |
FF66CC |
FF33CC |
FF00CC |
FFFF99 |
FFCC99 |
FF9999 |
FF6699 |
FF3399 |
FF0099 |
FFFF66 |
FFCC66 |
FF9966 |
FF6666 |
FF3366 |
FF0066 |
FFFF33 |
FFCC33 |
FF9933 |
FF6633 |
FF3333 |
FF0033 |
FFFF00 |
FFCC00 |
FF9900 |
FF6600 |
FF3300 |
FF0000 |
CCFFFF |
CCCCFF |
CC99FF |
CC66FF |
CC33FF |
CC00FF |
CCFFCC |
CCCCCC |
CC99CC |
CC66CC |
CC33CC |
CC00CC |
CCFF99 |
CCCC99 |
CC9999 |
CC6699 |
CC3399 |
CC0099 |
CCFF66 |
CCCC66 |
CC9966 |
CC6666 |
CC3366 |
CC0066 |
CCFF33 |
CCCC33 |
CC9933 |
CC6633 |
CC3333 |
CC0033 |
CCFF00 |
CCCC00 |
CC9900 |
CC6600 |
CC3300 |
CC0000 |
99FFFF |
99CCFF |
9999FF |
9966FF |
9933FF |
9900FF |
99FFCC |
99CCCC |
9999CC |
9966CC |
9933CC |
9900CC |
99FF99 |
99CC99 |
999999 |
996699 |
993399 |
990099 |
99FF66 |
99CC66 |
999966 |
996666 |
993366 |
990066 |
99FF33 |
99CC33 |
999933 |
996633 |
993333 |
990033 |
99FF00 |
99CC00 |
999900 |
996600 |
993300 |
990000 |
66FFFF |
66CCFF |
6699FF |
6666FF |
6633FF |
6600FF |
66FFCC |
66CCCC |
6699CC |
6666CC |
6633CC |
6600CC |
66FF99 |
66CC99 |
669999 |
666699 |
663399 |
660099 |
66FF66 |
66CC66 |
669966 |
666666 |
663366 |
660066 |
66FF33 |
66CC33 |
669933 |
666633 |
663333 |
660033 |
66FF00 |
66CC00 |
669900 |
666600 |
663300 |
660000 |
33FFFF |
33CCFF |
3399FF |
3366FF |
3333FF |
3300FF |
33FFCC |
33CCCC |
3399CC |
3366CC |
3333CC |
3300CC |
33FF99 |
33CC99 |
339999 |
336699 |
333399 |
330099 |
33FF66 |
33CC66 |
339966 |
336666 |
333366 |
330066 |
33FF33 |
33CC33 |
339933 |
336633 |
333333 |
330033 |
33FF00 |
33CC00 |
339900 |
336600 |
333300 |
330000 |
00FFFF |
00CCFF |
0099FF |
0066FF |
0033FF |
0000FF |
00FFCC |
00CCCC |
0099CC |
0066CC |
0033CC |
0000CC |
00FF99 |
00CC99 |
009999 |
006699 |
003399 |
000099 |
00ff66 |
00cc66 |
009966 |
006666 |
003366 |
000066 |
00FF33 |
00CC33 |
009933 |
006633 |
003333 |
000033 |
00FF00 |
00CC00 |
009900 |
006600 |
003300 |
000000 |
Modelos de Colores
Para representar los colores necesitamos un metodo no podemos decir el color igual que el verde claro o algo asi , ya que esto no es cientifico. Entonces como podemos definir un color de manera cientifica ?
Pues podemos escoger varias formas y cada una de ellas es lo que se llama un modelo de color.
Modelo RGB del color
Una forma de definir un color es mediante la suma de colores primarios rojos verde y azules , esta es la que se llama modelo RGB o Red Green y Blue. Esta es la forma más simple y la que se utiliza más en el mundo digital y en concreto en los monitores y en las paginas web.
Los colores mas importantes se representan asi
Rojo = RGB(100%, 0, 0)
Amarillo = RGB(100%, 100%, 0)
Verde = RGB(0, 100%, 0)
Cian = RGB(0, 100%, 100%)
Azul = RGB(0, 0, 100%)
Magenta = RGB(100%, 0, 100%)
Modelo de colores Hex o Html
Es la forma que se usa en las paginas webs y que no es mas que un subconjunto del modelo RGB en el que se usan palabras hexadecimales para cada uno de los valores de Rojos verde y azul.
Con Este modelo Hex podemos definir en un principio 255 rojos *255 verdes *255 azules = 16 millones de colores que son más de los que puede distinguir casi el ojo humano.
Modelo de colores CMYK
Estos colores se llaman aditivos ya que el color total aparece como la suma de esos colores. Otra forma es mediante la union de los colores substrativos que son la combinacion de colores Cian, Amarillo, Magenta y Negro que son CMYK.
El modelo CMYK se dice que es al contrario substrativo ya que seen la absorción de la luz por un objeto. el color que presenta un objeto corresponde a la parte de la luz que incide sobre este y se refleja no siendo absorbida por el objeto.
En CMYK los colores basicos con
Rojo = CMYK(100%, 100%, 0,0)
Amarillo = CMYK(0, 0, 100%,0)
Verde = CMYK((100%, 0,100% ,0)
Cian = CMYK(100%, 100%, 0,0)
Azul = CMYK(100%, 100%, 0,0)
Magenta = CMYK(100%, 0, 0,0)
El modelo de colores HSV y el HSL
Otro modo de representar el color es usando el matiz de color y luego la cantidad de luz que tiene y la cantidad o intensidads de "color" que tiene , este sistema es el que da los modelos HSV y el HSL
El modelo Modelo de color HSV tiene tres parametros Hue, Saturation, Value – Matiz, Saturación, Valor o Brillo). En la que Matiz es un angulo que representa el tipo de color que va con estos angulos
Los colores mas representativos en este modelo son estos
Rojo = HSV(0º,100% ,50%) = RGB(1, 0, 0)
Amarillo = HSV(60º,100% ,50%) = RGB(1, 1, 0)
Verde = HSV( 120º,100% ,50%) = RGB(0, 1, 0)
Cian = HSV( 180º,100% ,50%) = RGB(0, 1, 1)
Azul = HSV(240º,100% ,50%) = RGB(0, 0, 1)
Magenta = HSV(300º,100% ,50%) = RGB(1, 0, 1)
La Saturación es la distancia al eje de brillo negro-blanco. Los valores posibles van del 0 al 100% y representa como de intenso es el color, cuanto mayor sea mas color tendra y cuanto menor se más se acercara al gris.
A este parámetro también se le suele llamar "pureza" por la analogía con la pureza de excitación y la pureza colorimétrica de la colorimetría. Cuanto menor sea la saturación de un color, mayor tonalidad grisácea habrá y más decolorado estará. Por eso es útil definir la insaturación como la inversa cualitativa de la saturación
Los valores de Saturación en HSV van del 0 al 100%. 0 = Gris y 100 = Color Puro.
El ultimo elemento Valor o Brillo es la cantidad de blanco / negro que contiene de manera que si el color tiene mas valor sera mas claro y si tiene menos sera más oscuro.
Los valores de Brillo en HSV van del 0 al 100%. 0 = negro 50% = Color Medio 100 = Blanco.
El modelo de colores HSL
Otro modelo de color es el El modelo HSL que es muy parecido al anterior, de hecho la h , Hue o Matiz es lo mismo en ambas.
Modelo de colores Pantone
Otra forma de numerar los colores es mediante el sistema de la empresa Pantone.
Cada color se describe con un codigo de dos valores .
una numeración que es la que representa el color en si mismo y cuyo valor es arbitrario.
unas siglas que varia en función de la superficie o material en el que se va a aplicar el color:
- M para acabado mate
- C y CP para papel estucado (Coated)
- T para plásticos transparentes (Transparent)
- TC y TCX para tejidos (Textil Color eXtended)
- TPX para papel (Textil Paper eXtended)
- Q para plásticos opacos (opaQue)
- EC para estucado según el estándar europeo (Euro Coated)
- U y UP para papel texturado (Uncoated)
Por ejemplo Pantone M100 es un amarillo claro mate.
Es importante destacar que han entrado muy fuerte en el mundo del diseño creando el llamado color pantene del año desde el año 2000 |