2009-07-23 19 views
54

rgb(255,255,255) notación ha estado disponible desde CSS1. Pero #ffffff parece ser mucho más popular.¿Hay alguna buena razón para usar valores hexadecimales sobre los valores de color RGB en CSS?

Obviamente es un poco más compacto. Sé que el hexadecimal está más estrechamente relacionado con los bytes subyacentes, y entiendo que habría ventajas en la realización de la aritmética en esos valores, pero esto no es algo que vayas a hacer con CSS.

Los valores de color suelen ser originados por diseñadores (como yo) que nunca encontrarían la notación hexadecimal en otro lugar, y están mucho más familiarizados con la notación decimal que es la forma principal de especificar el color en las aplicaciones que utilizan - de hecho, he conocido a muchos que no se dan cuenta de cómo un valor hexadecimal dado se descompone en componentes RGB y se supone que no se relaciona directamente con el color, como una referencia del sistema de color Pantone (por ejemplo, PMS432).

Entonces, ¿alguna razón para no usar decimal?

+2

Actualización: muchas gracias por las respuestas. No creo que ninguna razón convincente para usar sea evidente y, por lo tanto, no haya marcado una respuesta. Pero algunos puntos secundarios interesantes, particularmente WCWedin on [decimal que se requiere para RGBA] (http://stackoverflow.com/questions/1171422/are-there-any-good-reasons-for-using-hex-over-decimal-for -rgb-color-values-in-cs/1171543 # 1171543) – e100

+0

Hmm, ¿no estoy seguro de lo que estoy haciendo mal con la sintaxis del enlace de Markdown? – e100

Respuesta

1

ninguna razón válida, que no sea la preferencia personal.

29

valores hexadecimales son más fáciles de copiar y pegar desde el editor de imágenes favorito.

Los valores RGB son más fáciles de manipular con Javascript.

(Mi favorito valor de color hexadecimal es #EDEDED y un sitio que hicimos para un cliente involucrado en los deportes de motor tenía un color de fondo de # F1F1F1 :-)

Ed.

2

Probablemente un toque de velocidad cuando el color es interpretado por un navegador. De lo contrario, algunas personas de antecedentes de diseño pueden saber cómo componer colores de componentes RGB cuando escriben código, y algunos otros de fondo de programación probablemente estén más inclinados a usar valores HEX.

+2

No obtengo el voto negativo. Rgb (255,255,255) es mucho más que #fff. Este es el toque de velocidad del que estaba hablando. –

+1

Un toque de velocidad que es tan poco probable que sea significativo en cualquier situación práctica que apenas vale la pena mencionar, especialmente como la razón principal. –

6

Tradicionalmente HTML siempre ha utilizado colores hexagonales, por lo que ha llevado adelante en CSS. Piense <font color="#ffffff">

4

Varias cosas van a aceptar un único valor hexadecimal en los que pueden tener diferentes formas de introducir tres valores decimales. También está el hecho de que es siempre 6 caracteres (o 3, sin dudas, más el #) lo que hace que sea más fácil escanear una lista de ellos.

Sólo un par de pensamientos al azar para añadir a la mezcla ...

+3

Bueno, generalmente son 6 caracteres. También puede ser de 3 caracteres. – tnyfst

+0

Ooh, buen punto. Editaré –

6

La razón principal es probablemente la compacidad, como usted ha mencionado. #ffffff incluso se puede acortar aún más a la notación abreviada #fff.

Otra posible razón es que hay un incremento en el rendimiento percibido por salvar el navegador el problema de convertir la notación rgb.

+3

¿Hay una diferencia de rendimiento percibida? Tuve una doble revisión de su comentario para verificar si se escribió antes de 1991. ¿Está esto basado en algún dato? – igl

+0

LMAO. Un experimento mental para cualquiera que piense que está "salvando el problema del navegador": ¿Cree que las computadoras consumen de forma nativa valores hexadecimales codificados como ASCII, al igual que los valores decimales? En cualquier caso, el navegador debe convertir las cadenas ASCII a los números de 8 bits que necesita el motor de renderizado. Además, cualquier ventaja de tamaño de los colores hexadecimales no importará en ningún escenario no artificial. –

+0

@underscore_d Actúa como todos los navegadores creados por igual. –

1

Tal vez yo he hecho HTML demasiado tiempo, pero me resulta más fácil pensar en los valores HEX. Gran parte de la paleta de colores predefinida para HTML se correlaciona perfectamente con los valores HEX. Usar el formato abreviado también le da colores automáticos 'seguros para la red', aunque esto no es realmente un problema en los días de las pantallas a color de 32 bits.

+4

El formato abreviado no proporciona automáticamente colores seguros para la web. Debe limitar los valores de los componentes a 0,3,6,9, C y F para obtener los 216 colores seguros para la web. – Guffa

4

CSS fue inventado por los desarrolladores de software, no los diseñadores. Los desarrolladores de software viven y respiran hexadecimal. Desde mis viejos días en C64, todavía puedo leer la mayoría de los números hexadecimales sin pensar. A9, ¿alguien?

+0

169 por supuesto :) – Guffa

+0

No. LDA #x :) –

+0

"número x = 255" es más intuitivo que la forma en que las personas aprenden matemáticas que "número x = #f". y para las personas que ni siquiera están inclinadas matemáticamente "255" es aún más intuitiva. El resumen de la maquinaria tiene la intención de mejorar la percepción humana de lo que está sucediendo. Dicho esto, para mí, #fff es tan intuitivo como rgb (255,255,255). y porque soy perezoso usaré #fff :) – jamiebarrow

17

Vale la pena señalar que si desea ingresar un valor RGBA, la notación hexadecimal no es compatible; es decir, no puede falsificarlo con #FFFFFFff. Como cuestión de hecho, el valor alfa debe ser un número entre 0.0 y 1.0, inclusive. (Salida this page de soporte de los navegadores - como siempre, IE lleva la delantera aquí;.))

HSL y soporte de color HSLA - que es muy diseñador amigable - también se proporciona con una sintaxis similar a la el estilo RGB() Si un diseñador fuera a utilizar ambos tipos de valores de color en la misma hoja de estilo, podría optar por valores decimales sobre códigos hexadecimales por coherencia.

+0

A medida que RGBA se usa más ampliamente (es bastante útil), espero un resurgimiento del uso de la notación decimal. ¡Buen punto! –

+0

Sí, buen punto en RGBA. No estoy seguro si los diseñadores realmente usarán los valores HSL para especificar los valores de color, aunque es un modelo intuitivo cuando se usan para selectores de color, filtros de ajuste de color, etc. – e100

+0

Lo bueno de HSL es que puede hacer fácilmente combinaciones de colores coincidentes sobre la marcha y ten una buena idea de cómo serán antes de actualizar la página. No es necesario abrir Photoshop para seleccionar tres tonos del mismo rojo. Incluso los colores complementarios son fáciles de elegir; Las rotaciones de 120 grados son triviales en RGB, pero no estoy seguro de si se pueden calcular 180 grados tan readoily. – WCWedin

7

Creo que es a lo que estás acostumbrado. Si está acostumbrado a HTML, probablemente use HEX ya que solo se ha usado mucho en HTML. Si tiene antecedentes de diseño, usa Photoshop/Corel/PaintShopPro, etc., entonces probablemente esté acostumbrado a la notación RGB, sin embargo, actualmente muchos programas incorporan un campo de valor HEX.

Como dije, RGBA podría ser una razón para ir con la notación RGB - consistencia.

Aunque, creo que también depende del escenario. Si se siente cómodo con ambos, puede cambiar entre ellos: #fff es mucho más fácil de escribir que rgb(255,255,255).

Otra pregunta es por qué la gente dirá #fff en lugar de White (suponiendo que la mayoría de los navegadores respalden esta palabra clave).

Todo es cuestión de preferencia y legibilidad: si mantiene un gran archivo CSS, puede ver el valor del color y saber de qué color es, es una gran ventaja. Aún más ventajoso es usar algo como LESS o Sass para agregar un tipo de programabilidad a CSS, permitiendo constantes, por ejemplo. Así que en lugar de decir:

#title { color: #abcdef; } 

En su lugar, puede hacer lo siguiente con menos:

@base-color: #abcdef; 

#title { color: @base-color; } 

El mantenimiento de la CSS se convierte en un problema menor.

Si le preocupa el rendimiento del navegador que representa su resultado, ese también podría ser otro factor a su elección.

Así que en resumen, que se reduce a:

  • familiaridad
  • Preferencia
  • mantenibilidad
  • Rendimiento
1

HEX es más común debido a razones históricas.

Antes de que el CSS fuera común en el desarrollo web, los colores se especificaban en etiquetas HTML y la forma más comúnmente utilizada y admitida para especificar un color era usar valores HEX.

5

siempre utiliza hexagonal, pero hoy prefiero establecer mis valores como:

rgb(82, 110, 188) 

en mis archivos CSS, por lo que cada vez que quiero añadir opacidad sólo hay que cambiar el nombre de RGB a RGBA y añadir la opacidad valor. La ventaja es que no tengo que convertir el valor hexadecimal en rgb antes de poder agregar la opacidad:

rgba(82, 110, 188, 0.5) 
+6

En Sass todavía puede usar valores HEX y combinarlos con alfa. Por ejemplo: '.container {background: rgba (# 369, .2); } ' Aquí hay un ** [Demo en JSFiddle] (http://jsfiddle.net/rzea/k1ferbLq/) **. –

+0

agradable, gracias por compartir – chrisweb

Cuestiones relacionadas