HTML - HEX

Estructura de los Códigos de Color HEX

Los códigos de color HEX utilizan un formato hexadecimal de 6 dígitos, que consta de letras (A-F) y números (0-9). El código va precedido por un signo de numeral (#) y no distingue entre mayúsculas y minúsculas. El código de 6 dígitos se divide en tres pares, cada uno representando un componente de color: rojo (R), verde (G) y azul (B).

#FF0000

Cada par de dígitos en un código de color HEX puede variar de 00 a FF, siendo 00 la intensidad más baja y FF la intensidad más alta de ese componente de color en particular. Al variar los valores de los componentes rojo, verde y azul, se pueden crear muchos colores.

Cómo Funcionan los Códigos de Color HEX

Los códigos de color HEX funcionan especificando la intensidad de los componentes rojo, verde y azul que componen un color. Cada componente está representado por un valor hexadecimal que va de 00 a FF. La relación entre los valores hexadecimales y los colores RGB es directa.

#000000

#FFFFFF

Al usar diferentes combinaciones de valores hexadecimales para estos componentes, puedes representar más de 16 millones de colores posibles. Esto permite a los desarrolladores web y diseñadores especificar colores precisos para varios elementos en una página web, como texto o fondos.

Aplicación de colores HEX a elementos HTML

Los códigos de color HEX se pueden aplicar a elementos HTML usando el atributo style. El atributo style permite especificar estilos CSS en línea para un elemento, incluyendo las propiedades color y background-color.

Para establecer el color del texto de un elemento usando un código de color HEX, use la propiedad color dentro del atributo style:

<p style="color: #FF0000;">Este texto es rojo.</p>

De manera similar, para establecer el color de fondo de un elemento, use la propiedad background-color:

<div style="background-color: #00FF00;">Este div tiene un fondo verde.</div>

También puede aplicar códigos de color HEX a bordes usando la propiedad border:

<p style="border: 2px solid #0000FF;">Este párrafo tiene un borde azul.</p>

Al usar el atributo style con estas propiedades, puede aplicar códigos de color HEX a varios elementos HTML y controlar su apariencia.

Códigos de color HEX en CSS

Además de los estilos en línea, los códigos de color HEX se pueden definir en hojas de estilo CSS. Esto permite separar los estilos de presentación de la estructura HTML y aplicar colores usando selectores y clases CSS.

Para definir un código de color HEX en una hoja de estilo CSS, use esta sintaxis:

.texto-rojo {
  color: #FF0000;
}

.fondo-verde {
  background-color: #00FF00;
}

.borde-azul {
  border: 2px solid #0000FF;
}

Definimos tres clases CSS: .texto-rojo, .fondo-verde, y .borde-azul. Cada clase especifica un código de color HEX diferente para su respectiva propiedad.

Para aplicar estas clases a elementos HTML, use el atributo class:

<p class="texto-rojo">Este texto es rojo.</p>
<div class="fondo-verde">Este div tiene un fondo verde.</div>
<p class="borde-azul">Este párrafo tiene un borde azul.</p>

Al definir códigos de color HEX en hojas de estilo CSS y usar selectores y clases, puede aplicar colores consistentes en toda su página web. Este enfoque promueve la reutilización del código y facilita la actualización de estilos visuales en su sitio web.

Colores Pastel

• #FFC8DD (Rosa)
• #FFAFCC (Rosa Claro)
• #BDE0FE (Azul Claro)
• #A2D2FF (Azul Cielo)
• #CDB4DB (Lavanda)

Tonos Cálidos de Tierra

• #E76F51 (Siena Tostado)
• #F4A261 (Marrón Arenoso)
• #E9C46A (Caqui Oscuro)
• #2A9D8F (Verde Selva)
• #264653 (Carbón)

Vibrantes y Audaces

• #FF4136 (Rojo Brillante)
• #FF851B (Naranja)
• #FFDC00 (Amarillo)
• #2ECC40 (Verde)

Estas paletas de colores muestran cómo se pueden combinar diferentes colores para crear diseños visualmente atractivos. Al seleccionar colores para un sitio web, considera factores como la armonía, el contraste y el estado de ánimo o sensación general que quieres transmitir.

Muchos sitios web y herramientas ayudan a los diseñadores a crear y explorar paletas de colores, como Adobe Color, Coolors y Paletton. Estas herramientas te permiten generar esquemas basados en diferentes principios como colores complementarios o análogos.

Al usar códigos de color HEX comunes y paletas bien diseñadas, los diseñadores web pueden crear sitios web atractivos que comuniquen claramente su mensaje previsto.

Generadores o selectores de códigos de color HEX en línea

Estos sitios web te permiten seleccionar visualmente un color usando una rueda de color o ajustando deslizadores para el tono, la saturación y la luminosidad. Algunos selectores de color en línea populares incluyen:

• ColorPicker.com: Un selector de color simple e intuitivo que muestra los valores HEX, RGB y HSL del color seleccionado.
• Adobe Color: Una herramienta que te permite crear paletas de colores basadas en diferentes reglas como colores monocromáticos o complementarios.
• Coolors.co: Un generador que te ayuda a crear y guardar paletas de colores para tus proyectos.

Estas herramientas son útiles cuando necesitas encontrar un color específico o crear una nueva paleta.

Extensiones y complementos de navegador

Algunas extensiones populares incluyen:

• ColorZilla: Una extensión para Firefox y Chrome que te permite seleccionar colores de páginas web.
• Eye Dropper: Una extensión de Chrome que te permite seleccionar colores de páginas web y copiar sus valores HEX, RGB o HSL.
• Color Picker: Un complemento de Firefox que te permite seleccionar colores de cualquier página web.

Estas extensiones facilitan la selección rápida de colores de sitios web existentes.

Conversión entre diferentes formatos de color

También puedes necesitar convertir entre diferentes formatos como HEX, RGB (Rojo Verde Azul) y HSL (Tono Saturación Luminosidad).

#FF0000

Un código de 6 dígitos que representa un color donde cada par de dígitos corresponde a la intensidad de rojo, verde y azul (por ejemplo, #FF0000 para rojo).

rgb(255, 0, 0)

Especifica la intensidad de rojo, verde y azul como valores individuales entre 0 y 255.

hsl(0, 100%, 50%)

Representa colores usando valores de tono (0-360 grados), saturación (0-100%) y luminosidad (0-100%).

Muchas herramientas en línea como RapidTables ofrecen convertidores que permiten la entrada en un formato con salida en otro. Esto puede ser útil cuando se trabaja con diferentes sistemas.