martes, 19 de mayo de 2015

Adobe Muse

Adobe Muse es un producto de Adobe Systems . El software se centra en lo que permite a los diseñadores crear sitios web sin tener que escribir ningún código. Esta aplicación está disponible a través de Adobe Creative Cloud .

Adobe Dreamweaver

Adobe Dreamweaver es una aplicación en programa de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es uno de los programas más utilizados en el sector del diseño y la programación web por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium.
Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es de código abierto) y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de Macromedia por parte de Adobe. Las letras CS significan Creative Suite
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización, puesto que en este programa sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que sea un programa muy fluido y todo ello permite que programadores y editores web hagan extensiones para su programa y lo pongan a su gusto.
Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.
Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.
Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.
Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.

Adobe Dreamweaver es una aplicación en forma de suite (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, videos y aplicaciones Web basados en estándares. Permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Cuando utilizamos Dreamweaver para crear una página Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico.

Ventajas:

· La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias.
· Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
· Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación.

Adobe Dreamweaver te brindará acceso rápido a los mismos:
- Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET
- Diseño de páginas Webs con un interfaz completamente gráfico
- Barra de herramientas de programación, que facilita las operaciones de programación más usuales
- Contracción del código, para centrarse solo en el que se está utilizando
- Barra de herramientas de reproducción de estilos, con la que se puede ver el resultado final
- Comparar archivos para ver qué ha cambiado
- Facilidad para añadir vídeos Flash
- Notificación y registro de eventos
- Se integra en Microsoft Word, Flash, Adobe Photoshop y otras
- Optimiza las páginas para las diferentes versiones de los navegadores….

Adobe Dreamweaver en la educación:

Este programa le ayuda al estudiante a aprender a crear un sitio web, mejora su creatividad y su curiosidad por emplear todas las herramientas de este diseñador web, pero más que todo les sirve para poder diseñar su propio sitio web con todo lo que deseen ponerle. Quizás el profesor no les pueda enseñar a utilizar todas las herramientas de esta aplicación, pero internet es una gran ayuda, existen tutoriales donde enseñan a crear un sitio web y a utilizar las otras aplicaciones de Adobe que se pueden añadir a nuestro website.

Características:

: Ofrece la posibilidad de crear botones flash, formularios, JavaScripts, y más, es de gran ayuda. Además de poder insertar elementos web, encontramos una gran precisión en la importación de información de Word y Excel, con las funciones de copiar y pegar.

: Dreamweaver es conocido por ofrecer herramientas avanzadas en el desarrollo de sitios web, y si bien se trata del producto de mayores características del mercado, su uso está limitado a usuarios con experiencia, ya que de no ser así, uno se encuentra con la dificultad de no saber por dónde comenzar.

Desventajas

Aunque muchos usuarios afirmen en los foros de DW que no tiene desventajas, tampoco se puede decir que Dreamweaver lo puede utilizar cualquiera, al ser tan avanzado el único inconveniente es que puede resultar difícil su manejo para usuarios menos experimentados en el diseño de páginas web, ya que quien lo utiliza tiene que tener un conocimiento básico de este programa.

Bien entonces una vez que ya hemos analizado la definición, su características y sus ventajas ya tenemos una idea de lo que se trata Adobe Dreamweaver qué es lo que nos ofrece y en qué nos puede servir. Pues quizás los estudiantes no le veamos la importancia de utilizar este programa, a lo mejor no nos sirva ahora, pero cuando ya nos involucremos en el campo laboral ya sabremos cómo se utilizan los programas de Adobe, además con esta práctica ya tenemos una idea de lo que será nuestro website, ese es el objetivo de estudiar ese diseñador web

lunes, 11 de mayo de 2015

uso de las clases e id´s

Selectores

Cualquier elemento HTML es un posible selector CSS1. El selector es simplemente el elemento que está conectado a un estilo particular. Por ejemplo, el selector en:

P { text-indent: 3em }

es P.

Selectores de clase

Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar el código en un color diferente dependiendo del idioma:

code.html { color: #191970 }
code.css  { color: #4b0082 }

El ejemplo de arriba ha creado dos clases, css y html para usar con el elemento CODE de HTML. El atributo CLASS se usa en HTML para indicar la clase de un elemento, por ejemplo,

<P CLASS=advertencia>Solo se permite una clase por selector.
Por ejemplo, code.html.proprietario no es válida.</p>

Las clases también pueden ser declaradas sin elementos asociados:

.nota { font-size: small }

En este caso, la clase nota puede usarse con cualquier elemento.

Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase nota del ejemplo de arriba pudo haber sido llamada pequeña (small), pero este nombre perdería todo significado si el autor decidiera cambiar el estilo de la clase de tal modo que ya no tuviera una fuente pequeña.

Selectores ID

Los selectores ID son asignados individualmente con el propósito de una definición en términos 'por elemento'. Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podría asignarse así:

#svp94O { text-indent: 3em }

Esto sería referenciado en HTML por el atributo ID:

<P ID=svp94O>Texto con sangría 3em</P>

Selectores de contexto

Los selectores de contexto son simples cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrán precedencia sobre selectores simples. Por ejemplo, el selector de contexto en:

P EM { background: yellow }

es P EM. Esta regla dice que el texto con énfasis dentro del párrafo debería tener un fondo amarillo; el texto con énfasis en un encabezado no sería afectado.

Declaraciones

Propiedades

Se asigna una propiedad a un selector a fin de manipular su estilo. Ejemplos de propiedades incluyen color, margin, y font.

Valores

El valor de declaración es la asignación que recibe la propiedad. Por ejemplo, la propiedad color podría recibir el valor red (rojo).

Agrupamiento

A fin de disminuir declaraciones repetitivas dentro de hojas de estilo, se permite el agrupamiento de selectores y declaraciones. Por ejemplo, todos los encabezados en un documento podrían tener idénticas declaraciones mediante un agrupamiento:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

Herencia

Prácticamente todos los selectores que estén anidados dentro de selectores, heredarán los valores de propiedades asignados al selector exterior, salvo que se modifiquen de otra manera. Por ejemplo, un color definido por BODY también será aplicado al texto en un párrafo.

Hay algunos casos donde el selector interior no hereda los valores del selector exterior, pero éstos deberían ser evidentes. Por ejemplo, la propiedad margin-top no es heredada; intuitivamente, un párrafo no tendría que tener el mismo margen superior del cuerpo del documento.

Comentarios

Los comentarios se indican dentro de hojas de estilo con las mismas convenciones usadas en la programación C. Una muestra de comentario CSS1 tendría el siguiente formato:

/* LOS COMENTARIOS NO PUEDEN ANIDARSE */

Seudo-clases y seudo-elementos

Las seudo-clases y los seudo-elementos son "clases" y "elementos" especiales reconocidos automáticamente por los navegadores que soportan CSS. Las seudo-clases distinguen entre los diferentes tipos de elementos (por ej., los enlaces visitados y los enlaces activos representan dos tipos de anclas). Los seudo-elementos se refieren a sub partes de elementos, como la primera letra de un párrafo.

Las reglas con seudo-clases o seudo-elementos toman la forma

selector:seudo-clase { propiedad: valor }

selector:seudo-elemento { propiedad: valor }

Las seudo-clases y seudo-elementos no deberían especificarse con el atributo CLASS de HTML. Las clases normales pueden usarse con seudo-clases y seudo-elementos de la siguiente manera:

selector.clase:seudo-clase { propiedad: valor }

selector.clase:seudo-elemento { propiedad: valor }

Seudo-clases Ancla (Anchor)

Las seudo-clases puede asignarse al elemento A para mostrar enlaces, enlaces visitados y enlaces activos en forma diferente. El elemento ancla puede asignar a la seudo-clase link (enlace), el estado de visitada, o activa. Un enlace visitado puede definirse para representar un color diferente e inclusive un diferente tamaño y estilo de fuente.

Un efecto interesante podría ser tener un enlace actualmente seleccionado (o "activo") mostrado en un tamaño de fuente ligeramente más grande y de un color diferente. Entonces, cuando la página se vuelva a seleccionar, el enlace visitado podría mostrarse en un tamaño de fuente más pequeño y con un color diferente. La hoja de estilo de muestra podría lucir así:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

Seudo-elemento Primera línea

Con frecuencia, en artículos de periódicos, como los del Wall Street Journal, la primera línea de texto de un artículo se muestra en negrita y con todas las letras en mayúsculas. CSS1 ha incluido esta capacidad como un seudo-elemento. Un seudo-elemento first-line puede usarse en cualquier elemento de nivel de bloque (como P, H1, etc.). Un ejemplo de un seudo-elemento first-line sería:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

Seudo-elemento First letter

El seudo-elemento first-letter se emplea para crear letras capitales y otros efectos. La primera letra de texto dentro de un selector asignado se representará de acuerdo al valor asignado. Un seudo-elemento first-letter puede usarse en cualquier elemento de nivel de bloque. Por ejemplo:

P:first-letter { font-size: 300%; float: left }

crearía una letra capital tres veces mayor que el tamaño normal de fuente.

Orden de Cascada

Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. En estas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalecerá. Las siguientes características determinarán el resultado de hojas de estilo que se contraponen.

! importantPuede establecerse una regla como importante al especificar ! important. Un estilo designado como importante prevalecerá sobre estilos contradictorios de similar nivel. Asimismo, ya que tanto el autor y el lector pueden especificar reglas importantes, la regla del autor primará sobre la regla del lector en casos de importancia. Una muestra del uso de la sentencia ! important:
```
BODY { background: url(bar.gif) white;
       background-repeat: repeat-x ! important}
```
Origen de las reglas (del autor frente a las del lector)Como ya se mencionó, tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo. Cuando hay un conflicto entre reglas, las reglas del autor prevalecerán sobre las reglas del lector de similar peso. Tanto las hojas de estilo del autor como las del lector primarán sobre las hojas de estilo incorporadas del navegador.
Los autores deberían ser cautelosos con el empleo de reglas ! important ya que primarán sobre las reglas ! important del lector. Un usuario puede, por ejemplo, necesitar de grandes tamaños de fuentes o colores especiales debido a problemas de visión, y tal usuario querrá declarar que ciertas reglas de estilo sean! important, ya que algunos estilos son vitales para que pueda leer una página. Cualquier regla ! important prevalecerá sobre las reglas normales, por lo que se aconseja a los autores usar reglas normales casi exclusivamente para asegurar que los usuarios con necesidades especiales de estilos puedan leer la página.
Reglas de selector: Calculando especificidadLas hojas de estilo también pueden primar sobre hojas de estilo en conflicto basándose en su nivel de especificidad, donde un estilo más específico siempre prevalecerá sobre uno menos específico. Simplemente es cuestión de contar para calcular la especificidad de un selector.
1. Cuente el número de atributos ID en el selector.
2. Cuente el número de atributos CLASS en el selector.
3. Cuente el número nombres de etiquetas HTML en el selector.
Finalmente, escriba los tres números en orden exacto sin espacios ni comas para obtener un número de tres dígitos. (Nota: puede necesitar convertir los números a una base mayor para terminar con tres dígitos.) La lista final de números que corresponden a selectores determinará fácilmente la especificidad, donde los números más altos priman sobre los más bajos. La siguiente es una lista de selectores ordenados por especificidad:
```
#id1         {xxx} /* a=1 b=0 c=0 --> especificidad = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> especificidad = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> especificidad = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> especificidad = 001 */
```

sábado, 2 de mayo de 2015

Colores hexadecimales

Los colores en HTML se representan mediante un número hexadecimal.

Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9, sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F.

Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF.

Existen 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.

También podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dígitos que forman parte del número hexadecimal.

A continuación se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo necesites.

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#660033	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

Se puede crear un amplio rango de colores mediante pigmentos de colores primarios (cian (C), magenta (M), amarillo (Y), y negro (K)). Esos colores definen un espacio de color específico. Para crear una representación tridimensional de un espacio de color, se puede asignar la cantidad de magenta al eje X de la representación, la cantidad de cian a su eje Y, y la cantidad de amarillo a su eje Z. El espacio 3D resultante proporciona una única posición por cada color posible que puede ser creado combinando estos tres pigmentos.

Sin embargo, este no es el único espacio de color posible. Por ejemplo, cuando se muestran los colores en un monitor de ordenador, normalmente se definen en el espacio de color RGB (rojo, verde y azul). Esta es otra forma de crear básicamente los mismos colores (limitado por el medio de reproducción, como el fósforo (CRT) o filtros y luz de fondo (LCD)), y el rojo, el verde y el azul pueden considerarse como los ejes X, Y y Z. Otra manera de crear los mismos colores es usando su matiz (eje X), su saturación (eje Y), y subrillo (eje Z). A esto se le llama modelo de color HSV. Muchos espacios de color se pueden representar como valores tridimensionales (X, Y, Z) de esta manera, pero algunos tienen más o menos dimensiones, y algunos como Pantone, no se pueden representar de esta forma.

El espacio de color RGB utiliza una mezcla de colores aditivos, porque describe qué tipo de luz necesita ser emitida para producir un color dado. RGB almacena valores individuales para el rojo, el verde y el azul. El espacio de color RGBA es RGB con un canal adicional alfa para indicar transparencia.

Entre los espacios de color basados en RGB se incluye sRGB, Adobe RGB y ProPhoto RGB.

CMYK utiliza síntesis sustractiva de color utilizada en el proceso de impresión, porque describe qué clase de tinta necesita aplicarse para que la luz reflejada desde el sustrato y a través de la tinta produzca un color dado. Se empieza con un sustrato blanco (lienzo, página, etc.), y se utiliza la tinta para sustraer el color del blanco para crear una imagen. CMYK almacena valores de tinta para cian, magenta, amarillo y negro. Hay muchos espacios de color CMYK para diferentes conjuntos de tintas, sustratos, etc. (los cuales cambian la ganancia del punto o la función de transferencia para cada tinta y, de esa forma, cambiar la apariencia).

YIQ se utilizaba en las emisiones de televisión en formato NTSC (Norte América, Japón) por razones históricas. Este sistema almacena un valor de luminancia con dos valores de crominancia, correspondientes a las cantidades de azul y rojo. Es similar al esquema YUV utilizado en la mayoría de sistemas de captura de vídeo² y en el sistema PAL (Australia, Europa, excepto Francia, que usa SECAM), excepto que el espacio de color YIQ se rota 33° con respecto al espacio de color YUV. El esquema YDbDr usado por SECAM se rota de otra forma.

YPbPr es una versión escalada de YUV. Es bastante común en su forma digital, YCbCr, usado ampliamente en compresión de vídeo y esquemas de compresión de imagen como MPEG y JPEG.

xvColor es un nuevo espacio de color de vídeo digital internacional estándar publicado por la Comisión Electrotécnica Internacional (IEC 61966-2-4). Se basa en los estándares ITU BT.601 y BT.709 pero extiende la gama más allá de los R/G/B primarios especificados en esos estándares.

HSV (hue, saturation, value), también conocido como HSB(hue, saturation, brightness) es usado a menudo por artistas porque es más natural pensar sobre un color en términos de matiz y saturación que en términos de componentes de color aditivos o sustractivos. HSV es una transformación de un espacio de color RGB, y sus componentes y colorimetría son relativos al espacio de color RGB del que deriva.

HSL (hue, saturation, lightness/luminance), también conocido como HLS o HSI (hue, saturation, intensity) es bastante similar a HSV, con la "claridad" reemplazando el "brillo". La diferencia es que el "brillo" de un color puro es igual al brillo del blanco, mientras que la claridad de un color puro es igual a la claridad de un gris medio.