[[html|HTML]] | [[css|CSS]]

====== Representación de los colores ======

===== Representación básica =====

El sistema de representación utilizado es el de [[https://es.wikipedia.org/wiki/S%C3%ADntesis_aditiva_de_color|sintesis aditiva]] [[https://es.wikipedia.org/wiki/RGB|RGB]] (//red//, //green//, //blue//; rojo, verde, azul). En él los colores se representan mediante una terna(('t e r n a', 'r' y 'n' pueden juntarse y parecer una 'm'.)) de valores correspondientes a los canales rojo, verde y azul (en función del espacio de color del dispositivo utilizado los colores así representados pueden variar).

Los valores de la terna pueden ser descritos mediante: 
  * **numeración hexadecimal**((0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.)): valores para cada canal entre 00, máxima intensidad del color de ese canal, y FF, mínima intensidad del color de ese canal. Ejemplos: #000000 (o, en versión reducida, #000), #FFFFFF (o #FFF), #FF0000, #00FF00, #0000FF;
  * **numeración decimal**((0, 1, 2, ..., 253, 254, 255.)): valores para cada canal entre 0, máxima intensidad del color de ese canal, y 255, mínima intensidad del color de ese canal. Ejemplos: rgb(0,0,0), rgb(255,255,255), rgb(255,0,0), rgb(0,255,0), rgb(0,0,255).

También se pueden representar **colores** haciendo referencia a su **nombre** concreto (black, #000000; white, #FFFFFF; gray, #808080; silver, #C0C0C0; green, #008000; lime, #00FF00; maroon, #800000; magenta, #FF00FF; purple, #800080; cyan #00FFFF;...).

===== Un paso más =====

**Opacidad**, canal alfa en RGB con valor entre 0, transparente, y 1, opaco (RGB**A**).

Por ejemplo: ''{color: rgba(128,128,128,0.5);}''.

**Modelo de color [[https://es.wikipedia.org/wiki/Modelo_de_color_HSL|HSL]]** (//hue//, //saturacion//, //lightness//; matiz, saturación y luminosidad): matiz puede tomar valores entre 0 y 360 y saturación y luminosidad vienen dados en porcentaje (0% a 100%: 0% de saturación devuelve un valor gris y 100% la máxima saturación para ese color; conforme se acercar la luminosidad al 0% el color se hace más oscuro, hasta llegar al negro en el 0%, y conforme se acercar la luminosidad al 100% el color se hace más claro, hasta llegar al blanco en el 100%, el punto de inflexión se encuentra en el 50% de luminosidad).

Por ejemplo: ''{color: hsl(100,50%,50%);}''  (para HSL), ''{color: hsla(100,50%,50%,0.5);}'' (para HSL**A**).

Ir a [[html|HTML]] | [[css|CSS]].