Colores HTML

Ya cambiaste la apariencia con el atributo style y marcaste el significado con formato y citas. Los colores dan forma al ánimo y a la legibilidad. En este camino de HTML para principiantes practicas valores de color dentro de style: nombres comunes, códigos hex y funciones rgb(). Los sistemas de diseño completos pertenecen más adelante a CSS; aquí aprendes a leer y escribir las formas con corrección, para que una página no solo se vea «de colores» sin que entiendas lo que realmente escribiste. Cuando dominas las tres formas, el paso a hojas de estilo compartidas queda más claro porque ves los mismos valores fuera de atributos largos repetidos.

¿Qué es un valor de color HTML?

Un valor de color indica al navegador qué color usar para una propiedad CSS como color o background-color. Las mismas formas de valor funcionan en style en línea y en hojas de estilo. Quien empieza encuentra primero tres formas prácticas: un nombre legible (tomato), un código hex (#c0392b) y una mezcla rgb() (rgb(192, 57, 43)). Pueden describir el mismo tono con distintas escrituras, algo útil al copiar de una paleta o al ajustar un solo canal. Entender que nombre, hex y rgb a menudo señalan el mismo color evita confusiones al comparar ejemplos de fuentes distintas.

Respuesta directa

Define el texto con color y el área detrás del contenido con background-color. Elige la forma de valor que encaje en el momento: un nombre para demos rápidas, hex al copiar de una paleta, o rgb() cuando piensas en canales rojo/verde/azul de 0 a 255. Mantén un contraste lo bastante fuerte para leer. A medida que crecen los proyectos, mueve los colores compartidos a CSS en lugar de repetir atributos largos en cada página. Ese hábito ahorra tiempo y evita pequeñas diferencias entre páginas cuando cambia la identidad del sitio más adelante.

Formas de valor de un vistazo

Colores con nombres

Los colores con nombre son el punto de partida más amable. Empareja con cuidado el color del texto y el del fondo para que las palabras sigan siendo legibles. El nombre ayuda a probar rápido sin memorizar números, pero no cubre cada tono de un diseño real. Trátalo como puente de aprendizaje y pasa a hex o rgb cuando necesites más precisión o colores de una herramienta de diseño.

Lectura del ejemplo

• El primer párrafo solo cambia el color del texto
• El segundo fija fondo y texto para que el azul marino se vea claro sobre azul claro
• Los nombres no distinguen mayúsculas en CSS, pero minúsculas es un hábito claro
• No toda palabra de color en inglés es un nombre CSS válido — quédate con nombres comunes que hayas comprobado
• Si un color «no hace nada», comprueba primero que el nombre coincida exactamente con CSS y no sea una traducción libre

Colores hex

Un color hex suele empezar con # seguido de seis caracteres de 0–9 y a–f. Los pares significan rojo, verde y azul. #000000 es negro; #ffffff es blanco. No necesitas memorizar un catálogo — elige de una paleta y pega con cuidado. Muchas herramientas de diseño ofrecen hex listo para copiar; tu tarea es conservar el # y seis dígitos válidos para que el navegador no descarte el valor en silencio.

Consejos hex

• Conserva el # — en la forma de esta lección 336699 solo no es lo mismo que #336699
• Usa solo dígitos hex válidos; las letras terminan en f
• Existe hex de tres dígitos en CSS (#333), pero los códigos de seis bastan en esta etapa del curso
• Revisa el copiar/pegar para que un dígito faltante no haga fallar el color sin aviso
• Compara #c0392b con el nombre o rgb equivalente cuando quieras confirmar que pegaste el tono correcto de la paleta

Colores rgb()

La función rgb() mezcla rojo, verde y azul como números de 0 a 255. rgb(255, 0, 0) es rojo puro. Esta forma resulta útil cuando ajustas un canal cada vez, por ejemplo para subir brillo o bajar azul sin recalcular hex a mano. Los tres números van siempre en orden rojo, verde, azul; las comas forman parte de la sintaxis.

Conectar las formas

El mismo tono a menudo se escribe como nombre, hex o rgb. Elige una forma por demo para que tu ojo aprenda la sintaxis. Más adelante en CSS verás otras notaciones; estas tres cubren la práctica temprana de HTML. Cuando una paleta da hex y otra herramienta da rgb, recuerda que pueden ser el mismo color escrito de dos modos. Lo importante es una forma completa y correcta dentro de style.

Contraste y legibilidad

Un color válido aún puede ser una mala elección. Texto amarillo claro sobre blanco puede analizarse bien y seguir siendo difícil de leer. Cuando fijas color y background-color, comprueba que el texto destaque. En sitios reales el contraste es parte de la accesibilidad — empieza el hábito ya en demos pequeñas. El buen contraste no es solo estética; es condición para que quien visita lea el contenido sin esfuerzo, sobre todo en pantallas distintas o con mucha luz ambiental.

Práctica en tu editor

1. Crea tres párrafos cortos bajo un encabezado.
2. Colorea el texto del primero con un nombre (teal o similar).
3. Colorea el texto del segundo con un valor hex.
4. Da al tercero un background-color con rgb() y, si hace falta, un color oscuro para contraste.
5. Guarda y actualiza. Confirma que cada forma funciona.
6. Rompe a propósito un hex (quita un dígito), actualiza y corrígelo — eso entrena la sintaxis cuidadosa.
   Repite el ejercicio con otros colores hasta distinguir con rapidez nombre, hex y rgb sin mirar apuntes cada vez. Vigila también que las comillas envuelvan todo el valor de style; un error pequeño en el atributo puede anular el color por completo.

Errores que ocultan o debilitan los colores

• Confundir color (texto) con background-color (detrás del texto)
• Escribir #33, #gggggg o hex sin # cuando querías un código de seis dígitos
• Combinaciones de bajo contraste que parecen «con estilo» pero son difíciles de leer
• Construir un tema de marca entero solo con estilos en línea repetidos en lugar de aprender CSS compartido a continuación
• Suponer que toda palabra de color en inglés es un nombre CSS válido sin comprobarlo
• Olvidar cerrar las comillas del valor style de modo que el navegador lea el atributo incompleto
  Cada uno de estos errores pierde tiempo o debilita la confianza en el contenido. Lee la página con ojos de visitante: ¿el texto es claro sobre su fondo? ¿Entiendes por qué elegiste esa forma de valor?

Resumen

• Usa color y background-color en style para demos rápidas de color
• Valores: nombres, hex (#RRGGBB) o rgb(r, g, b)
• Los pares hex corresponden a rojo, verde y azul; los canales rgb van de 0 a 255
• Prefiere contraste legible cuando el texto está sobre un fondo de color
• Mueve los colores compartidos a CSS conforme crecen páginas y proyectos
• Comprueba con guardar y actualizar; corrige la sintaxis con cuidado cuando un color «no hace nada»
  En ese orden construyes un hábito claro: elegir la propiedad correcta, escribir un valor completo y proteger la lectura con contraste antes de pasar a estilos compartidos más amplios.