Códigos de Colores HTML

Esta página enumera palabras clave especiales que pueden utilizarse para identificar colores concretos en sitios web y en lenguajes de desarrollo como HTMLCSSJavaScript y otros.

En las primeras especificaciones del W3C sólo se definían 16 colores clave. En especificaciones posterioresse han definido otros 130 nombres de colores diferentes. La siguiente tabla contiene los nombres y los colores de muestra asociados a ellos.

Tabla de Colores HTML

Los nombres de colores HTML no distinguen entre mayúsculas y minúsculasy pueden escribirse de cualquier forma.

También hay que señalar quecon 147 palabras clave diferentes (17 antiguas y 130 nuevas)no todos los colores de esta lista son únicos. Algunos nombres corresponden al mismo color. Asípor ejemplotanto Grey como Gray representan el color #808080mientras que Magenta es sólo un sinónimo del color HTML Fuchsiay se refiere al código de color hexadecimal #FF00FF.

<>.color-table-container { display: flex; flex-wrap: nowrap; width: 100%; gap: 20px; } .color-table { border-collapse: collapse; width: 50%; margin-bottom: 20px; } @media (max-width: 768px) { .color-table-container { flex-wrap: wrap; } .color-table { width: 100%; } } .color-scheme { margin-bottom: 10px; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr.color-scheme td { font-weight: bold; font-size: 1.2em; } tr.color-element { font-size: 0.9rem; font-weight: 600; } /* tr:nth-child(even) { background-color: #f2f2f2; } */ .copy-button { background-color: white; border: none; border-radius: 10px; color: black; padding: 10px 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; } /* Dropdown button */ .dropdown { position: relative; display: inline-block; } /* Dropdown button styling */ .dropbtn { background-color: white; border: none; border-radius: 10px; color: black; padding: 10px 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; } /* Dropdown content */ .dropdown-content { display: none; position: absolute; z-index: 100; background-color: #ffffff; box-shadow: 0px 8px 16px 0px rgba(0000.2); } /* Dropdown content links */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; width: 120px; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { background-color: #f2f2f2; } <>.color-picker { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; justify-content: center; gap: 3rem; } @media (max-width: 640px) { .color-picker { flex-direction: column; align-items: center; } } #information { display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin-bottom: 20px; width: min-content; } #information-color-panel { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; } #information-color-box { width: 100px; height: 100px; border: 1px solid #ccc; } #information-color-panel div { margin-bottom: 5px; } #color-details { display: flex; flex-direction: column; justify-content: space-around; align-items: left; } #information-color-panel--color_name { font-size: 1.5rem; font-weight: 700; align-items: flex-start; } .color-picker input { border: 1px; border-color: #ccc; padding: 4px; font-weight: 700; font-size: 1.1rem; } #color-name-input { font-size: 1.5rem; width: 100%; text-align: center; }

R:

G:

B:

H:

S:

L:

HEX:

RGB:

HSL:

HSV:

HWB:

CMYK:

¿Qué es un Código de Color HTML?

Un código de color HTML es un identificador utilizado para representar un color en la web y en otros activos digitales. Los códigos de color más comunes son: un nombre de palabra claveun valor hexadecimalun triplete RGB (RedGreenBlue) (rojoverdeazul) o un triplete HSL (HueAaturationLightness) (tonosaturaciónluminosidad). Los distintos valores permiten elegir 16.777.216 colores potenciales.

Por ejemploel color rojo puede identificarse utilizando los siguientes formatos:

red (palabra clave en inglés)
#ff0000 (HEX)
(255,0,0) (RGB)
(0100%50%) (HSL)

Dado que hay tantos colores entre los que elegirse han creado herramientas para simplificar la tarea de selección. Un selector de color permite al usuario seleccionar un color haciendo clic en una gama visual de color para señalar un código exacto. Una tabla de colores ofrece una lista de colores comunes para una selección rápida.

Para utilizar un código de color seleccionado dentro de su página webpodrías colocar el siguiente atributo dentro de un elemento dado para cambiar su color de fondo a rojo:

="background-color: #ff0000;"

¿Para qué Sirven los Códigos de Color HTML?

Los códigos de color HTML se utilizan en HTML y CSS para crear esquemas de color de diseño web. Los utilizan principalmente diseñadores webdiseñadores gráficosprogramadores informáticos e ilustradores digitales. Elegir los colores web correctos puede ser agotadorpero es una gran habilidad que hay que tenerespecialmente con fines de marketing.

Para saber más sobre colores htmlWikipedia tiene un buen recurso sobre colores web: https://es.wikipedia.org/wiki/Colores_web.