El color en las páginas web se designa normalmente por sistema hexadecimal, aunque tambien se pueden usar nombres estandar. En la siguiente tabla se muestran los nombres reconocidos estandar que van a funcionar en todos los navegadores. Hay más, pero no son seguros. Tienen que ser escritos tal cual (no vale en español). Si tienes la más minima duda, usa el sistema hexadecimal descrito más abajo, además, si no entiendes bien como funciona no te preocupes, es muy fácil buscar el color por ejemplo con Photoshop, se describe más abajo.
Fuchsia | Aqua | Yellow | White |
Purple | Teal | Olive | Silver |
Blue | Lime | Red | Gray |
Navy | Green | Maroon | Black |
El sistema hexadecimal significa en base 16 (el sistema decimal al que estamos acostumbrados es en base 10) lo que significa que los digitos pueden crecer hasta 16. Como no hay tantos dígitos numéricos se utilizan las letras de la A a la F:
0=0 | 4=4 | 8=8 | C=12 |
1=1 | 5=5 | 9=9 | D=13 |
2=2 | 6=6 | A=10 | E=14 |
3=3 | 7=7 | B=11 | F=15 |
Para conseguir un color, mezclaremos valores de esta manera:
Donde cada valor puede crecer desde 00 hasta FF.
Como la intensidad de cada canal (rojo, verde, azul) se mide en 256 niveles (de 0 a 255), se ha necesitado un sistema en base 16 para definirlo. Fíjate que 16 x 16 = 256.
Puedes ayudarte de programas de diseño, o de retoque de imagenes como Photoshop para ver o buscar rápidamente el código de un color:
Para adaptarse a las pantallas que sólo disponen 256 colores se recomendaba utilizar los colores llamados web-safeque se obtienen usando combinaciones de 00, 33, 66, 99, CC y FF. Esto en la actualidad tiene poco sentido, pues la mayoría disponemos de monitores con millones de colores.
A continuación, listamos los artículos de más relevancia que hemos encontrado sobre terminología y cuestiones técnicas:
Artículo en ingles donde se explican los conceptos y terminología del color. Merece la pena, es fácil de entender y contiene ejemplos de gran calidad
Tabla de colores hexadecimales (para buscar colores sin tener que abrir ningun programa)
Software de ayuda en uso del color
Hay muchos programas que te ayudan a construir paletas. Tambien existen webs que lo hacen (siguiente apartado).
Algunos programas que te pueden servir son los siguientes:
ColorSchemer Studio Software dedicado a crear paletas de color
Adobe Illustrator, su herramienta Guía de color es muy util para crear gamas o realizar modificaciones a las ya creadas. Tambien dispone de numerosas bibliotecas de colores ya creadas, así como enlace directo a la herramienta online Kuler
Adobe Photoshop, aparte de los métodos personales que pueda tener cualquier usuario de Photoshop, uno de los más usados es partir de una imagen que nos agraden sus colores, esto es fácil de hacer, simplemente desenfocando bastante la imagen y cogiendo con el cuentagotas los colores que nos interesan. Podemos hacer un copia y pega del codigo hexadecimal de cada color en un documento de texto. La verdad es que este método es más fácil, rápido y automático hacerlo desde Kuler (más abajo).
Corel Painter, tiene un sistema de mexcla de colores similar a una paleta real de pintor.
Enlaces interesantes para ayudarnos a crear paletas de colores
Hay páginas web que nos ayudan a crear buenas paletas.
A continuación, listamos dichas páginas y artículos relacionados.
Colourlovers Comunidad del color (internacional pero con version en español)
Artículo de una gran calidad, al igual que las 2 partes anteriores, donde explica la creación de una paleta propia, incluyendo el uso de Kuler con imagenes, y como siempre, grandes ejemplos.
Kuler (Adobe) Para mí el mejor sistema, necesita registrarse para manejar tus propias paletas. En esteenlace puedes ver un video de como funciona (es en ingles pero se entiende bien, es muy visual)
50+ Beautiful Websites with Great Colour SchemesArtículo donde se muestran 50 ejemplos de buenas paletas de color en sitios de calidad. Te puede servir de inspiración.
APORTADO: Beatriz Pascual Hernandez
Circulo Cromatico
El círculo
cromático se usa en la clasificación de los colores. Se denomina círculo
cromático al resultante de distribuir alrededor de un círculo los colores que
conforman el segmento de la luz. Según Goethe, en su libro Teoría de los
colores de 1810, de carácter más cercano a lo filosófico que a lo científico.
Los colores en un círculo cromático son seis: amarillo, anaranjado, rojo,
violeta, azul y verde, lo cual dio paso al Modelo de color RYB, que a pesar de
ser un modelo arcaico e impreciso sigue enseñándose en las artes gráficas a
pesar de presentar serios inconvenientes en la composición de color; un modelo
más exacto surgió tras la aparición de la fotografía en color y basado en los
estudios de Newton sobre la luz, el cual se utiliza en la producción industrial
de color, con mayor precisión en la representación cromática, y del cual se
derivan los modelos RGB y CMYK, en el cual los colores son: amarillo, rojo,
magenta, azul, cian y verde. La mezcla de estos colores puede ser representada
en un círculo de 12 colores, haciendo una mezcla de un color con el siguiente y
así sucesivamente se puede crear un círculo cromático con millones de colores.
El hexagrama es una estrella que se coloca en el centro del círculo cromático.
La cantidad de picos que tenga depende de número de colores usados en el
círculo. Esta estrella muestra los colores complementarios. Según el (Modelo
aditivo de color), los colores luz opuestos en el círculo cromático 1 son
aquellos que se encuentran uno frente al otro. El amarillo es el color opuesto
al azul. El magenta es el color opuesto al verde. El cian es el color opuesto
al rojo. Según el modelo moderno de mezclas de pigmentos (Modelo sustractivo de
color) existe reciprocidad aproximada entre el modelo de color RGB y el Modelo
de color CMY; por lo tanto, los colores opuestos son: El rojo es el color
opuesto al cian. El verde es el color opuesto al magenta. El azul es el color
opuesto al amarillo. Según el obsoleto modelo de color RYB, utilizado aún en
artes visuales y diseño, 1 los colores pigmento opuestos son: El azul es el
color opuesto al naranja. El rojo es el color opuesto al verde. El amarillo es
el color opuesto al violeta. Y así sucesivamente con todos los colores, como
podría ser el azul verde (verde mar) o el rojo naranja. El blanco y el negro
podrían considerarse opuestos, pero nunca colores y por lo tanto no aparecen en
un círculo cromático, el blanco es la presencia de todos los colores y el negro
es su ausencia total. Sin embargo el negro y el blanco al combinarse forman el
gris el cual también se marca en escalas. Esto forma un círculo propio llamado
"círculo cromático en escala a grises" o "círculo de
grises". Esta tríada de colores no es la generadora de la infinitud de
todos los colores posibles de ser percibidos por el ojo o factibles de usarse en
las artes gráficas, ya que permite una finita cantidad de subdivisiones. De
esta tríada, por ejemplo, no pueden obtenerse los colores llamados
"pasteles" que son los que tienen agregado de blanco en diferentes
proporciones.
APORTADO: Karla Ivonne Paez Martell
http://www.facebook.com/#!/kaarlaaivoonnee.paaeezmaarteell
Modelo de color RGB
Modelo aditivo de colores rojo, verde, azul.
La descripción RGB
(del inglés Red, Green, Blue; "rojo, verde, azul") de un color hace referencia a la composición del color en términos
de la intensidad de los colores primarios con que se forma: el rojo, el verde y el azul. Es un modelo de color basado
en la síntesis aditiva, con el que es posible representar un color mediante la
mezcla por adición de los tres colores luz primarios. El modelo de color RGB no
define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que
los mismos valores RGB pueden mostrar colores notablemente diferentes en
diferentes dispositivos que usen este modelo de color. Aunque utilicen un mismo
modelo de color, sus espacios de color pueden variar considerablemente.
Para indicar con qué proporción mezclamos cada color, se
asigna un valor a cada uno de los colores primarios, de manera, por ejemplo,
que el valor 0 significa que no interviene en la mezcla y, a medida que ese
valor aumenta, se entiende que aporta más intensidad a la mezcla. Aunque el
intervalo de valores podría ser cualquiera (valores reales entre 0 y 1, valores
enteros entre 0 y 37, etc.), es frecuente que cada color primario se codifique
con un byte (8 bits). Así, de manera usual, la intensidad de cada una de las
componentes se mide según una escala que va del 0 al 255.
Cubo RGB.
Por lo tanto, el rojo se obtiene con (255,0,0), el verde
con (0,255,0) y el azul con (0,0,255), obteniendo, en cada caso un color
resultante monocromático. La ausencia de color —lo que nosotros conocemos como
color negro— se obtiene cuando las tres componentes son 0, (0,0,0).
La combinación de dos colores a nivel 255 con un tercero
en nivel 0 da lugar a tres colores intermedios. De esta forma el amarillo es
(255,255,0), el cian (0,255,255) y el magenta (255,0,255).
Obviamente, el color blanco se forma con los tres colores
primarios a su máximo nivel (255,255,255).
El conjunto de todos los colores se puede representar en
forma de cubo. Cada color es un punto de la superficie o del interior de éste.
La escala de grises estaría situada en la diagonal que une al color blanco con
el negro.
El color en las pantallas de computadora
En las pantallas de computadoras, la sensación de color se produce por la
mezcla aditiva de rojo, verde y azul. Hay una serie de puntos minúsculos
llamados píxeles. Cada punto de la pantalla es un píxel y cada píxel es,
en realidad, un conjunto de tres subpíxeles; uno rojo, uno verde y uno azul,
cada uno de los cuales brilla con una determinada intensidad.Al principio, la limitación en la profundidad de color de la mayoría de los monitores condujo a una gama limitada a 216 colores, definidos por el cubo de color. No obstante, el predominio de los monitores de 24-bit, posibilitó el uso de 16,7 millones de colores del espacio de color HTML RGB.
La gama de colores de la Web consiste en 216 combinaciones de rojo, verde y azul, donde cada color puede tomar un valor entre seis diferentes (en hexadecimal): #00, #33, #66, #99, #CC o #FF.
Podemos ver que 63 nos da el número de combinaciones, 216. Estos valores en decimal se corresponden con 0, 51, 102, 153, 204 y 255, que tienen un porcentaje de intensidad de 0%, 20%, 40%, 60%, 80% y 100%, respectivamente. Esto nos permite dividir los 216 colores en un cubo de dimensión 6.
Se procura que los píxeles sean de un color cuanto más saturado mejor, pero nunca se trata de un color absolutamente puro. Por tanto la producción de colores con este sistema tiene una doble limitación:
<!--[if !supportLists]-->·
<!--[endif]-->La derivada del funcionamiento de las mezclas aditivas:
sólo podemos obtener los colores interiores del triángulo formado por las tres
fuentes luminosas.
<!--[if !supportLists]-->·
<!--[endif]-->La derivada del hecho que los colores primarios usados no
son absolutamente monocromáticos.
<!--[if !supportLists]-->·
<!--[endif]-->Además, las diversas pantallas no son iguales
exactamente, además de ser configurables por los usuarios, con lo cual varios
parámetros pueden variar.
Esto implica que las codificaciones de los colores
destinadas a las pantallas se deben interpretar como descripciones relativas, y
entender la precisión de acuerdo con las características de la pantalla.
Codificación hexadecimal del color
Colores de la CIE.
La codificación dodeccadesimal del color permite expresar fácilmente un
color concreto de la escala RGB, utilizando la notación hexadecimal. Se
utiliza, por ejemplo, en el lenguaje HTML y en JavaScript.Este sistema utiliza la combinación de tres códigos de dos dígitos para expresar las diferentes intensidades de los colores primarios RGB (Red, Green, Blue, rojo, verde y azul).
El blanco y el negro
|
||
#000000
|
Los
tres canales están al mínimo 00, 00 y 00
|
|
#FFFFFF
|
Los
tres canales están al máximo FF, FF y FF
|
decimal =
primera cifra hexadecimal * 16 + segunda cifra hexadecimal
La intensidad máxima es ff, que se corresponde con (15*16)+15= 255 en
decimal, y la nula es 00, también 0 en decimal. De esta manera, cualquier color
queda definido por tres pares de dígitos.
Los tres colores básicos
|
||
#ff0000
|
El
canal de rojo está al máximo y los otros dos al mínimo
|
|
#00ff00
|
El
canal del verde está al máximo y los otros dos al mínimo
|
|
#0000ff
|
El
canal del azul está al máximo y los otros dos al mínimo
|
Las combinaciones básicas
|
||
#ffff00
|
Los canales
rojo y verde están al máximo
|
|
#00ffff
|
Los
canales azul y verde están al máximo
|
|
#ff00ff
|
Los
canales rojo y azul están al máximo
|
|
Gris
claro
|
#D0D0D0
|
Los
tres canales tienen la misma intensidad
|
Gris
oscuro
|
#5e5e5e
|
Los
tres canales tienen la misma intensidad
|
Colores definidos por la especificación
HTML 4.01
|
|||||||
Color
|
Hexadecimal
|
Color
|
Hexadecimal
|
Color
|
Hexadecimal
|
Color
|
Hexadecimal
|
cyan
|
#00ffff
|
black
|
#000000
|
blue
|
#0000ff
|
fucsia
|
#ff00ff
|
gray
|
#808080
|
green
|
#008000
|
lime
|
#00ff00
|
marrón
|
#800000
|
navy
|
#000080
|
olive
|
#808000
|
purple
|
#800080
|
red
|
#ff0000
|
silver
|
#c0c0c0
|
teal
|
#008080
|
white
|
#ffffff
|
yellow
|
#ffff00
|
APORTADO: Ilsa Carolina Martinez Rocha
SISTEMA CMYK
El modelo CMYK
(acrónimo de Cyan, Magenta, Yellow y Key) es un
modelo de
color sustractivo que se utiliza en la impresión en colores. Es la versión moderna y más precisa del ya obsoleto Modelo de color RYB, que se utiliza aún en pintura y
bellas artes. Permite representar una gama de color más amplia que este último, y tiene una
mejor adaptación a los medios industriales.
Este modelo se basa en la mezcla de pigmentos de los
siguientes colores para crear otros más:
La mezcla de colores CMY ideales es sustractiva
(puesto que la mezcla de cían, magenta y amarillo en fondo blanco resulta en el color negro). El modelo CMYK se basa en la absorción de la luz. El color que presenta un objeto corresponde a la
parte de la luz que incide sobre éste y que no es absorbida por el objeto.
El cian
es el opuesto al rojo, lo que significa que actúa como un filtro que absorbe dicho color (-R +G
+B). Magenta es el opuesto al verde (+R -G +B) y amarillo
el opuesto al azul (+R +G -B).
Uso de la tinta negra
Por varias razones, el negro generado al mezclar los colores primarios sustractivos no es ideal y por lo tanto, la impresión a cuatro tintas
utiliza el negro además de los colores primarios sustractivos amarillo, magenta
y cían. Entre estas razones destacan:
- Una mezcla de pigmentos amarillo, cian y magenta rara vez produce negro
puro porque es casi imposible crear suficiente cantidad de pigmentos
puros.
- Mezclar las tres tintas sólo para formar el negro puede humedecer al
papel si no se usa un tóner seco, lo que implica un
problema en la impresión en grandes tirajes, en la que el papel debe
secarse lo suficientemente rápido para evitar que se marque la siguiente
hoja. Además el papel de baja calidad, como el utilizado para los
periódicos, se puede romper si se humedece demasiado.
- El texto se imprime, frecuentemente, en negro e incluye detalles finos
si la tipografía es con serif. Para reproducir el texto utilizando tres tintas sin que se
desvanezca o difumine ligeramente el símbolo tipográfico, se requeriría un
registro extremadamente preciso. Esta manera de generar el color negro no
es posible, en la práctica, si se desea una fiel reproducción en la
densidad y contorno de la tipografía (al tener que alinear las tres
imágenes con demasiada exactitud).
- Desde un punto de vista económico, el uso de una unidad de tinta
negra, en vez de tres unidades de tintas de color, puede significar un
gran ahorro, especialmente porque la tinta negra es, por lo general, mucho
más económica que cualquier tinta de color.
Se le llama key al negro, en vez de usar la
letra B, por ser un nombre corto del término key plate utilizado en la
impresión. Esta placa maestra imprimía el detalle artístico de una imagen,
usualmente en tinta negra. El uso de la letra K también ayudó a evitar
confusiones con la letra B utilizada en el acrónimo RGB. La cantidad de negro a utilizar, para reemplazar las cantidades de las
otras tintas, es variable y la elección depende de la tecnología, el tipo de
papel y la clase de tinta usada. Procesos como el undercolor removal, el
undercolor addition y el reemplazo de componente gris, se usan para
decidir la mezcla final, con lo cual diferentes recetas de CMYK se utilizarán
dependiendo de la tarea de impresión. Cuando el negro se mezcla con otros
colores, resulta un negro más negro llamado "negro enriquecido",
o "negro de registro", o "super-negro".
Comparación con el modelo RGB
El uso de la impresión a cuatro tintas genera un buen
resultado con mayor contraste. Sin embargo, el color visto en el monitor de una
computadora seguido es diferente al color del mismo objeto en una impresión, pues los
modelos CMYK y RGB tienen diferentes gamas de colores. Por ejemplo, el azul puro (En 24 y 32 bits= RGB=0,0,255) es imposible de
reproducir en CMYK. El equivalente más cerca en CMYK es un tono azulvioláceo.
Los monitores de ordenador, y otras pantallas, utilizan el modelo RGB, que representa el color de un
objeto como una mezcla aditiva de luz roja, verde y azul (cuya suma es la luz blanca). En los materiales
impresos, esta combinación de luz no puede ser reproducida directamente, por lo
que las imágenes generadas en los ordenadores, cuando se usa un programa de edición, dibujo vectorial, o retoque fotográfico se debe convertir a su
equivalente en el modelo CMYK que es el adecuado cuando se usa un dispositivo
que usa tintas, como una impresora, o una máquina offset.
Conversiones
Foto de referencia impresa mediante un proceso de cuatricromía.
Es interesante reseñar que las conversiones aquí
mencionadas son del tipo nominal. Producirán una conversión irreversible entre
RGB y un subconjunto de CMYK; es decir, se puede escoger un color de la paleta
RGB y convertirlo a ciertos colores CMYK, y de estos colores CMYK obtener los
equivalentes originales en RGB que les corresponden. Sin embargo, la conversión
de colores CMYK a RGB, en general, no es reversible; es decir que un color dado
en CMYK y que es convertido a RGB, no resultará en el color CMYK original
cuando sea reconvertido nuevamente a la paleta CMYK.
Además, los colores CMYK se pueden llegar a imprimir
en tonos muy diferentes a como se aprecian en un monitor. No hay ninguna
"buena" regla de conversión entre RGB y CMYK, porque ninguno de los
modelos representan un espacio de color absoluto.
Conversión entre RGB y CMYK
Imagen comparativa en la que se observan las diferencias en el color entre
el modelo RGB (izquierda) y el modelo CMYK (derecha).
Para convertir entre RGB y CMYK, se utiliza un valor
CMY intermedio. Los valores de color se representan como un vector, pudiendo variar cada uno de ellos entre 0.0 (color inexistente) y 1.0
(color totalmente saturado):
[editar] Conversión CMYK a RGB
Para lograr la conversión, primero se pasa de CMYK a
CMY, y posteriormente a RGB.
Mapeado de RGB a CMYK
Como se puede apreciar, la imagen superior se ha obtenido superponiendo las
cuatro capas de la parte inferior. Obsérvese que cada una de las imágenes
inferiores corresponde a un color básico del modelo CMYK.
Se puede mapear un color RGB dado a uno de los
muchos colores CMYK semi-equivalentes posibles. La mejor opción es aquella que
hace uso de K lo máximo posible, y proporciones restantes de CMY lo menos
posible. Por ejemplo, #808080 (gris, la mitad exacta entre blanco y negro) será mapeado a
(0,0,0,0.5) y no a (0.5,0.5,0.5,0).
Convirtiendo RGB → CMY, con los mismos vectores de
color:
convirtiendo a CMY
y luego a CMYK:
si
<!--[if !vml]--><!--[endif]-->
entonces
de otro modo
Su utilización
en artes gráficas
Su uso generalizado se da en el contexto de las artes gráficas. Las imprentas
offsets imprimen, generalmente, en estos 4 colores más tintas
planas especiales, si se diera el caso (los comúnmente denominados colores Pantone). Es por esto, que antes de
enviar cualquier trabajo a la imprenta deberemos convertir los colores del
documento a CMYK para que los
colores de impresión sean lo más correctos posibles.
APORTADO: Ana Rosa Sanchez Arvizu
Existen
dos formas básicas de componer con el color: por armonía y por contraste.
Armonizar es combinar y coordinar los diferentes valores que el color adquiere en una composición.
Así diremos que una composición es cromáticamente armónica, cuando todos los colores participan en mayor o menor cuantía del resto de los colores intervinientes.
Combinaciones armónicas son aquellas en las que se utilizan modulaciones de un mismo color, pero también la combinación de diferentes colores que en su mezcla mantienen parte de los mismos pigmentos de los restantes.
En todas las armonías cromáticas, se pueden observar tres colores: dominante, tónico y de mediación.
El dominante, es el color más neutro y de mayor extensión (su función es destacar los otros colores que conforman la composición).
El tónico, normalmente en la gama del complementario del dominante, es el color más potente intensidad y valor.
El de mediación, es el color cuya función es actuar de enlace y transición de los anteriores. En el círculo cromático, suele tener una situación próxima a la del color tónico.
La armonía más sencilla es aquella
en la que se conjugan tonos de la misma gama o de una misma parte del círculo,
aunque puede resultar un tanto carente de vivacidad.
Según diversas teorías la sensación de armonía o concordancia suscitada por una composición gráfica tiene su origen exclusivamente en las relaciones y en las proporciones de sus componentes cromáticos.
Relaciones cromáticas armónicas serían las resultantes de yuxtaponer:
- colores equidistantes en el círculo cromático
- colores afines entre sí
- tonos de la misma gama representados en gradaciones constantes
- colores de fuerte contraste entre tonos complementarios
- colores de contrastes más suavizados entre un color saturado y otro no saturado.
Según diversas teorías la sensación de armonía o concordancia suscitada por una composición gráfica tiene su origen exclusivamente en las relaciones y en las proporciones de sus componentes cromáticos.
Relaciones cromáticas armónicas serían las resultantes de yuxtaponer:
- colores equidistantes en el círculo cromático
- colores afines entre sí
- tonos de la misma gama representados en gradaciones constantes
- colores de fuerte contraste entre tonos complementarios
- colores de contrastes más suavizados entre un color saturado y otro no saturado.
Mezclador de colores de Corel Photo-Paint
Programas como Corel PHOTO-PAINT, en su herramienta de selección del color no solo proporciona una gran variedad de "Paletas" y "Modelos", sino que dispone de un "Mezclador de color" que nos permite seleccionar armonías cromáticas a partir de un tono seleccionado como primario. Así, este selector establece el complementario, armonías de tres, cuatro y cinco tonos, y a la vez elegir entre valores más o menos claros, fríos o cálidos, o menos saturados. (Figuras superiores).
Cuando se trabaja con colores y fuentes es igualmente importante cuidar la armonía entre ellos, una condición derivada de la elección de los tonos y de su orden sobre el campo visual, teniendo presente el contraste entre los textos y el tono del fondo.
Se produce cuando en una composición los colores no tienen nada en común. Existen diferentes tipos de contraste:
Contraste de tono. Se produce en la combinación de diversos tonos cromáticos.
Contraste de claro-oscuro hay uno o varios colores más aproximados al blanco y uno o varios colores más cercanos al negro. Los extremos están representados por blancos y negros
Contraste de saturación. Se produce por la modulación de uno o varios tonos puros saturados opuesto a blancos, negros, grises, u otros colores complementarios.
Contraste de cantidad. Contraposición de lo grande y lo pequeño, de tal manera que ningún color tenga preponderancia sobre otro.
Contraste simultáneo el que se produce por la influencia que cada tono ejerce sobre los demás al yuxtaponerse a ellos en una composición.
Contraste entre complementarios. Para lograr algo más armónico conviene que uno de ellos sea un color puro, y el otro esté modulado con blanco o con negro. El tono puro debe ocupar una superficie muy limitada, pues la extensión de un color en una composición debe ser inversamente proporcional a su intensidad). Composiciones
Contraste entre tonos cálidos y fríos. Hay uno o varios colores más próximos a los tonos rojos, naranjas y amarillos frente a otros relacionados con la gama de colores fríos, verdes, azules púrpuras. Composiciones