Cómo usar colores hexadecimales para páginas web basadas en HTML5 y CSS3 - dummies

Los colores en HTML5 son algo extraño. La forma "fácil" (nombres de colores) tiene muchos problemas. El método que usan la mayoría de los desarrolladores web realmente suena mucho más difícil, pero no es tan malo como parece al principio. El esquema color hexadecimal utiliza una combinación aparentemente extraña de números y letras para determinar los valores de color. es aqua Es amarillo. Es un esquema que solo un científico informático podría amar.

Los colores hexadecimales funcionan describiendo exactamente lo que está haciendo la computadora, por lo que debe saber un poco más acerca de cómo funcionan las computadoras con el color. Cada punto (o pixel ) en la pantalla se compone de tres pequeños rayos de luz. Cada píxel tiene pequeños rayos rojos, verdes y azules.

Los rayos de luz funcionan como luces de escenario. Imagine un escenario negro con tres focos (rojo, verde y azul) entrenados en el mismo lugar. Si todas las luces están apagadas, el escenario está completamente oscuro. Si enciende solo la luz roja, verá rojo. Puede activar combinaciones para obtener nuevos colores.

Color por número

En un sistema informático, cada una de las pequeñas luces se puede ajustar a varios niveles de brillo. Estos valores miden de 0 a 255. Por lo tanto, podría describir tanto el rojo como el amarillo.

El rango de valores de 0 a 255 parece extraño porque probablemente esté acostumbrado a basar 10 matemáticas. La computadora en realidad almacena valores en notación binaria. La forma en que una computadora lo ve, amarillo es en realidad 111111111111111100000000. ¡Ack! Tiene que haber una manera más fácil de manejar todos esos valores binarios. Es por eso que los desarrolladores usan notación hexadecimal .

Cualquier página que interactúa con el usuario tenderá a usar un lenguaje de programación. No dude en consultar el código, pero no se preocupe si aún no está listo para agregar programación a sus sitios.

Hex education

Todos esos 1s y 0s se vuelven tediosos. A los programadores les gusta convertir a otro formato con el que sea más fácil trabajar. Lo creas o no, es más fácil convertir números binarios a la base 16 que la base 10, así que eso es lo que hacen los programadores. Puede sobrevivir perfectamente sin entender la conversión de base 16 (también llamada hexadecimal ), pero debe comprender algunas características clave, como por ejemplo:

• Cada dígito hexadecimal es una abreviatura de cuatro dígitos de binario. Toda la razón por la que los programadores usan hexadecimal es para simplificar el trabajo con binarios.

• Cada dígito representa un valor entre 0 y 15. Cuatro dígitos del binario representan un valor entre 0 y 15.

• Tenemos que inventar algunos dígitos. Toda la razón por la cual el hexágono se ve tan extraño es la inclusión de personajes.Esto es por una simple razón: ¡no hay suficientes dígitos numéricos para todos!

  Decimal (Base 10)	Hexágono (Base 16)
  0	0
  1	1
  2	2
  3	3 > 4
  4	5
  5	6
  6	7
  7	8
  8	9
  9	10
  A	11
  B	12
  C	13
  D	14
  E	15
  F	Los dígitos ordinarios 0-9 son iguales en hex como en la base 10, pero los valores de 10-15 (base diez) están representados por caracteres alfabéticos en hexadecimal.

Estás muy acostumbrado a ver el valor 10 como igual al número de dedos en ambas manos, pero ese no es siempre el caso cuando comienzas a jugar con los sistemas de numeración como lo hacemos aquí. El número 10 simplemente significa uno de la base actual. Hasta ahora, es posible que nunca haya utilizado ninguna base, sino la base diez, pero todo eso cambia hoy.

El número 10 es diez en la base diez, pero en la base dos, 10 significa dos. En la base ocho, 10 significa ocho y en la base dieciseis, 10 significa dieciséis. Esto es importante porque cuando quieres hablar sobre el número de dígitos en tus manos en hexadecimal, no puedes usar la notación familiar 10 porque en hexadecimal 10 significa dieciséis.

Necesita un valor de un dígito para representar diez, por lo que los informáticos legislaron a sí mismos fuera de este lío tomando prestados cartas. 10 es A, 11 es B y 15 es F.

Si toda esta teoría matemática te está mareando, no te preocupes. Hay algunos accesos directos para crear excelentes colores usando este esquema. Por ahora, sin embargo, esto es lo que necesita saber para usar colores hexadecimales:

Un color requiere seis dígitos de hex.

• Un píxel requiere tres colores, y cada color usa ocho dígitos de binario. Dos dígitos de hex cubren cada color. Dos dígitos representan rojo, dos para verde y finalmente dos para azul. Los valores de color hexadecimal por lo general comienzan con un signo de libra.

• Para advertir al navegador que un valor será en hexadecimal, el valor suele ir precedido de un signo de almohadilla (#). Trabajar con colores en hexadecimal puede parecer realmente loco y difícil, pero tiene algunas ventajas importantes:

Precisión:

• El uso de este sistema le brinda una gran cantidad de colores para trabajar. No hay forma de que puedas inventar tantos nombres de colores por tu cuenta. Bueno, podrías, pero serías muy, muy viejo cuando termines. Objetividad:

• Los valores hexadecimales no son una cuestión de opinión. Podría haber algún argumento sobre qué color es siena quemado, pero el valor hexadecimal no es ambiguo. Portabilidad:

• La mayoría del software de edición gráfica usa el sistema hexadecimal, por lo que puedes elegir cualquier color de una imagen y obtener su valor hexadecimal inmediatamente. Esto haría que sea más fácil encontrar el color de ojos de su gato para ese santuario en línea. Previsibilidad:

• Después de que comprenda cómo funciona, puede tomar cualquier color hexadecimal y convertirlo a un valor que sea un poco más oscuro, un poco más brillante o que tenga un poco más de azul. Esto es difícil de hacer con colores con nombre. Facilidad de uso:

• Puede parecer un estiramiento, pero después de que comprenda la paleta segura para la web, es muy fácil hacerse una idea aproximada de un color y luego modificarlo para que tenga exactamente la forma que usted ' que estas buscando.