WEB APPak
Tabla de colores web HTML: códigos HEX, RGB, HSL y CMYK para diseño y desarrollo web
Edukiaren gida azkarra...
Lista completa de códigos de colores web
Los colores en HTML y CSS son esenciales en diseño web, programación y branding digital. Para definir colores en páginas web y gráficos digitales, se utilizan diferentes formatos como HEX, RGB, HSL y CMYK.
En esta guía encontrarás una tabla completa de colores HTML con códigos HEX, RGB, HSL y CMYK, junto con su nombre en HTML y TheColorAPI. Además, ofrecemos una herramienta de selección de colores para obtener automáticamente los valores de cualquier color.
¿Qué son los códigos de colores HTML y para qué sirven?
Los códigos de colores web permiten definir con precisión los tonos en diseño web, CSS y herramientas de edición gráfica. Los formatos más utilizados son:
- Colores HTML y sus nombres estándar: Son los 140 colores con nombres predefinidos en HTML y CSS (red, blue, gold, navy). Tambien conocido como Nombres de color web.
- Código HEX: Formato hexadecimal utilizado en CSS y diseño web. Usado principalmente en HTML y CSS para definir colores de manera precisa (ejemplo: #FF5733).
- Valores RGB (Red, Green, Blue): Combinación de rojo, verde y azul, utilizado en monitores y pantallas, (ejemplo: rgb(255, 87, 51)).
- Conversión a HSL (Hue, Saturation, Lightness): Expresa el color en tono, saturación y luminosidad. Alternativa a RGB, más intuitiva para edición de colores (ejemplo: hsl(11, 100%, 60%)).
- Valores en CMYK (Cyan, Magenta, Yellow, Key): Composición de cian, magenta, amarillo y negro (Key es el color clave en impresión para dar profundidad y evitar desperdicio de tinta de colores). Se usa en impresión, donde los colores se combinan sustrayendo luz (a diferencia de RGB, que es aditivo) (ejemplo: cmyk(0%, 65%, 80%, 10%)).
- Colores según TheColorAPI: Un sistema que asigna nombres descriptivos a los colores, útil en branding y diseño visual, son nombres reconocibles por IA y editores gráficos. Nombre de color basado en una base de datos, útil para identificar colores de forma descriptiva.
Si eres diseñador, programador o simplemente necesitas encontrar un color específico, esta tabla te será de gran utilidad por que podrás consultar los códigos de color más utilizados en diseño web y programación. Cada color incluye su código hexadecimal, RGB, HSL, CMYK, nombre web en HTML, y su nombre en TheColorAPI, facilitando su uso en CSS, HTML y programas de diseño gráfico:
Tabla de colores web
Aquí tienes una tabla completa de colores HTML y sus códigos:
Colores púrpuras
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
Lavender | #E6E6FA | hsl (240, 67%, 94%) | cmyk (6%, 6%, 0%, 2%) | Lavender |
Thistle | #D8BFD8 | hsl (300, 24%, 80%) | cmyk (0%, 9%, 0%, 15%) | Thistle |
Plum | #DDA0DD | hsl (300, 47%, 74%) | cmyk (0%, 21%, 0%, 13%) | Plum |
Violet | #EE82EE | hsl (300, 76%, 72%) | cmyk (0%, 45%, 0%, 7%) | Violet |
Orchid | #DA70D6 | hsl (302, 59%, 64%) | cmyk (0%, 50%, 1%, 15%) | Orchid |
Fuchsia / Magenta | #FF00FF | hsl (300, 100%, 50%) | cmyk (0%, 100%, 0%, 0%) | Fuchsia |
MediumOrchid | #BA55D3 | hsl (288, 59%, 58%) | cmyk (12%, 59%, 0%, 17%) | Medium Orchid |
MediumPurple | #9370DB | hsl (260, 60%, 65%) | cmyk (39%, 50%, 0%, 14%) | Medium Purple |
BlueViolet | #8A2BE2 | hsl (271, 76%, 53%) | cmyk (46%, 82%, 0%, 11%) | Blue Violet |
DarkViolet | #9400D3 | hsl (282, 100%, 41%) | cmyk (29%, 100%, 0%, 17%) | Dark Violet |
DarkOrchid | #9932CC | hsl (280, 61%, 50%) | cmyk (25%, 76%, 0%, 20%) | Dark Orchid |
DarkMagenta | #8B008B | hsl (300, 100%, 27%) | cmyk (0%, 100%, 0%, 45%) | Dark Magenta |
Purple | #800080 | hsl (300, 100%, 25%) | cmyk (0%, 100%, 0%, 50%) | Purple |
Indigo | #4B0082 | hsl (275, 100%, 25%) | cmyk (42%, 100%, 0%, 49%) | Indigo |
SlateBlue | #6A5ACD | hsl (248, 53%, 58%) | cmyk (49%, 56%, 0%, 20%) | Slate Blue |
DarkSlateBlue | #483D8B | hsl (248, 39%, 39%) | cmyk (63%, 66%, 0%, 45%) | Dark Slate Blue |
Colores azules
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
Aqua / Cyan | #00FFFF | hsl (180, 100%, 50%) | cmyk (100%, 0%, 0%, 0%) | Cyan |
LightCyan | #E0FFFF | hsl (180, 100%, 94%) | cmyk (12%, 0%, 0%, 0%) | Light Cyan |
PaleTurquoise | #AFEEEE | hsl (180, 64%, 81%) | cmyk (27%, 0%, 7%, 7%) | Pale Turquoise |
Aquamarine | #7FFFD4 | hsl (160, 100%, 75%) | cmyk (50%, 0%, 17%, 0%) | Aquamarine |
Turquoise | #40E0D0 | hsl (174, 72%, 60%) | cmyk (71%, 0%, 14%, 12%) | Turquoise |
MediumTurquoise | #48D1CC | hsl (178, 59%, 55%) | cmyk (65%, 0%, 5%, 18%) | Medium Turquoise |
DarkTurquoise | #00CED1 | hsl (181, 100%, 41%) | cmyk (100%, 0%, 2%, 18%) | Dark Turquoise |
CadetBlue | #5F9EA0 | hsl (182, 25%, 50%) | cmyk (41%, 2%, 0%, 37%) | Cadet Blue |
SteelBlue | #4682B4 | hsl (207, 44%, 49%) | cmyk (60%, 27%, 0%, 29%) | Steel Blue |
LightSteelBlue | #B0C4DE | hsl (214, 41%, 78%) | cmyk (20%, 9%, 0%, 13%) | Light Steel Blue |
PowderBlue | #B0E0E6 | hsl (187, 52%, 80%) | cmyk (20%, 0%, 5%, 10%) | Powder Blue |
LightBlue | #ADD8E6 | hsl (194, 53%, 79%) | cmyk (24%, 0%, 7%, 10%) | Light Blue |
SkyBlue | #87CEEB | hsl (197, 71%, 73%) | cmyk (41%, 0%, 5%, 8%) | Sky Blue |
DeepSkyBlue | #00BFFF | hsl (195, 100%, 50%) | cmyk (100%, 25%, 0%, 0%) | Deep Sky Blue |
DodgerBlue | #1E90FF | hsl (210, 100%, 56%) | cmyk (88%, 44%, 0%, 0%) | Dodger Blue |
RoyalBlue | #4169E1 | hsl (225, 73%, 57%) | cmyk (71%, 50%, 0%, 12%) | Royal Blue |
Blue | #0000FF | hsl (240, 100%, 50%) | cmyk (100%, 100%, 0%, 0%) | Blue |
MediumBlue | #0000CD | hsl (240, 100%, 40%) | cmyk (100%, 100%, 0%, 20%) | Medium Blue |
DarkBlue | #00008B | hsl (240, 100%, 27%) | cmyk (100%, 100%, 0%, 45%) | Dark Blue |
Navy | #000080 | hsl (240, 100%, 25%) | cmyk (100%, 100%, 0%, 50%) | Navy |
MidnightBlue | #191970 | hsl (240, 64%, 27%) | cmyk (89%, 89%, 0%, 56%) | Midnight Blue |
Colores rojos
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
IndianRed | #CD5C5C | hsl (0, 53%, 58%) | cmyk (0%, 57%, 57%, 20%) | Indian Red |
LightCoral | #F08080 | hsl (0, 79%, 72%) | cmyk (0%, 50%, 50%, 6%) | Light Coral |
Salmon | #FA8072 | hsl (6, 93%, 71%) | cmyk (0%, 47%, 55%, 2%) | Salmon |
DarkSalmon | #E9967A | hsl (15, 72%, 70%) | cmyk (0%, 35%, 50%, 9%) | Dark Salmon |
LightSalmon | #FFA07A | hsl (17, 100%, 74%) | cmyk (0%, 37%, 52%, 0%) | Light Salmon |
Crimson | #DC143C | hsl (348, 83%, 47%) | cmyk (0%, 91%, 72%, 14%) | Crimson |
Red | #FF0000 | hsl (0, 100%, 50%) | cmyk (0%, 100%, 100%, 0%) | Red |
FireBrick | #B22222 | hsl (0, 68%, 42%) | cmyk (0%, 82%, 82%, 30%) | Firebrick |
DarkRed | #8B0000 | hsl (0, 100%, 27%) | cmyk (0%, 100%, 100%, 45%) | Dark Red |
Colores rosas
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
Pink | #FFC0CB | hsl (350, 100%, 88%) | cmyk (0%, 25%, 20%, 0%) | Pink |
LightPink | #FFB6C1 | hsl (351, 100%, 86%) | cmyk (0%, 29%, 24%, 0%) | Light Pink |
HotPink | #FF69B4 | hsl (330, 100%, 71%) | cmyk (0%, 59%, 29%, 0%) | Hot Pink |
DeepPink | #FF1493 | hsl (328, 100%, 53%) | cmyk (0%, 91%, 42%, 0%) | Deep Pink |
MediumVioletRed | #C71585 | hsl (322, 81%, 43%) | cmyk (0%, 88%, 36%, 22%) | Medium Violet Red |
PaleVioletRed | #DB7093 | hsl (340, 60%, 65%) | cmyk (0%, 46%, 32%, 14%) | Pale Violet Red |
Colores naranjas
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
LightSalmon | #FFA07A | hsl (17, 100%, 73%) | cmyk (0%, 37%, 52%, 0%) | Light Salmon |
Coral | #FF7F50 | hsl (16, 100%, 65%) | cmyk (0%, 50%, 69%, 0%) | Coral |
Tomato | #FF6347 | hsl (9, 100%, 64%) | cmyk (0%, 61%, 72%, 0%) | Tomato |
OrangeRed | #FF4500 | hsl (16, 100%, 50%) | cmyk (0%, 73%, 100%, 0%) | Orange Red |
DarkOrange | #FF8C00 | hsl (33, 100%, 50%) | cmyk (0%, 45%, 100%, 0%) | Dark Orange |
Orange | #FFA500 | hsl (39, 100%, 50%) | cmyk (0%, 35%, 100%, 0%) | Orange |
Colores amarillos
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
Yellow | #FFFF00 | hsl (60, 100%, 50%) | cmyk (0%, 0%, 100%, 0%) | Yellow |
LightYellow | #FFFFE0 | hsl (60, 100%, 94%) | cmyk (0%, 0%, 12%, 0%) | Light Yellow |
LemonChiffon | #FFFACD | hsl (54, 100%, 90%) | cmyk (0%, 2%, 20%, 0%) | Lemon Chiffon |
LightGoldenRodYellow | #FAFAD2 | hsl (60, 80%, 90%) | cmyk (2%, 2%, 15%, 0%) | Light Goldenrod Yellow |
PapayaWhip | #FFEFD5 | hsl (37, 100%, 86%) | cmyk (0%, 6%, 20%, 0%) | Papaya Whip |
Moccasin | #FFE4B5 | hsl (38, 100%, 80%) | cmyk (0%, 11%, 29%, 0%) | Moccasin |
PeachPuff | #FFDAB9 | hsl (28, 100%, 86%) | cmyk (0%, 14%, 27%, 0%) | Peach Puff |
Gold | #FFD700 | hsl (51, 100%, 50%) | cmyk (0%, 16%, 100%, 0%) | Gold |
GoldenRod | #DAA520 | hsl (42, 74%, 49%) | cmyk (0%, 21%, 86%, 15%) | Goldenrod |
DarkGoldenRod | #B8860B | hsl (43, 89%, 38%) | cmyk (0%, 24%, 93%, 28%) | Dark Goldenrod |
Colores verdes
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
GreenYellow | #ADFF2F | hsl (84, 100%, 59%) | cmyk (32%, 0%, 82%, 0%) | Green Yellow |
Chartreuse | #7FFF00 | hsl (90, 100%, 50%) | cmyk (50%, 0%, 100%, 0%) | Chartreuse |
LawnGreen | #7CFC00 | hsl (90, 100%, 49%) | cmyk (51%, 0%, 100%, 1%) | Lawn Green |
Lime | #00FF00 | hsl (120, 100%, 50%) | cmyk (100%, 0%, 100%, 0%) | Lime |
LimeGreen | #32CD32 | hsl (120, 61%, 50%) | cmyk (76%, 0%, 76%, 20%) | Lime Green |
PaleGreen | #98FB98 | hsl (120, 93%, 79%) | cmyk (40%, 0%, 40%, 2%) | Pale Green |
LightGreen | #90EE90 | hsl (120, 73%, 74%) | cmyk (44%, 0%, 44%, 7%) | Light Green |
MediumSpringGreen | #00FA9A | hsl (157, 100%, 49%) | cmyk (100%, 0%, 39%, 2%) | Medium Spring Green |
SpringGreen | #00FF7F | hsl (150, 100%, 50%) | cmyk (100%, 0%, 50%, 0%) | Spring Green |
MediumSeaGreen | #3CB371 | hsl (147, 50%, 47%) | cmyk (67%, 0%, 38%, 30%) | Medium Sea Green |
SeaGreen | #2E8B57 | hsl (146, 50%, 36%) | cmyk (67%, 0%, 38%, 45%) | Sea Green |
ForestGreen | #228B22 | hsl (120, 61%, 34%) | cmyk (76%, 0%, 76%, 45%) | Forest Green |
Green | #008000 | hsl (120, 100%, 25%) | cmyk (100%, 0%, 100%, 50%) | Green |
DarkGreen | #006400 | hsl (120, 100%, 20%) | cmyk (100%, 0%, 100%, 60%) | Dark Green |
YellowGreen | #9ACD32 | hsl (79, 61%, 50%) | cmyk (40%, 0%, 76%, 20%) | Yellow Green |
OliveDrab | #6B8E23 | hsl (80, 60%, 35%) | cmyk (46%, 0%, 100%, 57%) | Olive Drab |
Olive | #808000 | hsl (60, 100%, 25%) | cmyk (0%, 0%, 100%, 50%) | Olive |
DarkOliveGreen | #556B2F | hsl (82, 39%, 30%) | cmyk (54%, 0%, 57%, 58%) | Dark Olive Green |
MediumAquamarine | #66CDAA | hsl (160, 51%, 60%) | cmyk (48%, 0%, 19%, 20%) | Medium Aquamarine |
DarkSeaGreen | #8FBC8F | hsl (120, 25%, 65%) | cmyk (25%, 0%, 25%, 26%) | Dark Sea Green |
LightSeaGreen | #20B2AA | hsl (177, 69%, 41%) | cmyk (81%, 0%, 4%, 30%) | Light Sea Green |
Teal | #008080 | hsl (180, 100%, 25%) | cmyk (100%, 0%, 0%, 50%) | Teal |
Colores grises
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
Gainsboro | #DCDCDC | hsl (0, 0%, 86%) | cmyk (0%, 0%, 0%, 14%) | Gainsboro |
LightGrey | #D3D3D3 | hsl (0, 0%, 83%) | cmyk (0%, 0%, 0%, 17%) | Light Gray |
Silver | #C0C0C0 | hsl (0, 0%, 75%) | cmyk (0%, 0%, 0%, 25%) | Silver |
DarkGray | #A9A9A9 | hsl (0, 0%, 66%) | cmyk (0%, 0%, 0%, 34%) | Dark Gray |
Gray | #808080 | hsl (0, 0%, 50%) | cmyk (0%, 0%, 0%, 50%) | Gray |
DimGray | #696969 | hsl (0, 0%, 41%) | cmyk (0%, 0%, 0%, 59%) | Dim Gray |
LightSlateGray | #778899 | hsl (210, 14%, 53%) | cmyk (18%, 10%, 0%, 40%) | Light Slate Gray |
SlateGray | #708090 | hsl (210, 13%, 50%) | cmyk (22%, 11%, 0%, 44%) | Slate Gray |
DarkSlateGray | #2F4F4F | hsl (180, 25%, 25%) | cmyk (38%, 0%, 0%, 69%) | Dark Slate Gray |
Black | #000000 | hsl (0, 0%, 0%) | cmyk (0%, 0%, 0%, 100%) | Black |
Colores blancos
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
White | #FFFFFF | hsl (0, 0%, 100%) | cmyk (0%, 0%, 0%, 0%) | White |
Snow | #FFFAFA | hsl (0, 100%, 99%) | cmyk (0%, 2%, 2%, 0%) | Snow |
Honeydew | #F0FFF0 | hsl (120, 100%, 97%) | cmyk (6%, 0%, 6%, 0%) | Honeydew |
MintCream | #F5FFFA | hsl (150, 100%, 98%) | cmyk (4%, 0%, 2%, 0%) | Mint Cream |
Azure | #F0FFFF | hsl (180, 100%, 97%) | cmyk (6%, 0%, 0%, 0%) | Azure |
AliceBlue | #F0F8FF | hsl (208, 100%, 97%) | cmyk (6%, 3%, 0%, 0%) | Alice Blue |
GhostWhite | #F8F8FF | hsl (240, 100%, 99%) | cmyk (3%, 3%, 0%, 0%) | Ghost White |
WhiteSmoke | #F5F5F5 | hsl (0, 0%, 96%) | cmyk (4%, 4%, 4%, 0%) | White Smoke |
Seashell | #FFF5EE | hsl (25, 100%, 97%) | cmyk (0%, 4%, 7%, 0%) | Seashell |
Beige | #F5F5DC | hsl (60, 56%, 91%) | cmyk (4%, 4%, 14%, 0%) | Beige |
OldLace | #FDF5E6 | hsl (39, 85%, 94%) | cmyk (1%, 4%, 10%, 1%) | Old Lace |
FloralWhite | #FFFAF0 | hsl (39, 100%, 97%) | cmyk (0%, 2%, 6%, 0%) | Floral White |
Ivory | #FFFFF0 | hsl (60, 100%, 97%) | cmyk (0%, 0%, 6%, 0%) | Ivory |
AntiqueWhite | #FAEBD7 | hsl (34, 78%, 91%) | cmyk (2%, 8%, 15%, 2%) | Antique White |
Linen | #FAF0E6 | hsl (30, 67%, 94%) | cmyk (2%, 6%, 10%, 2%) | Linen |
LavenderBlush | #FFF0F5 | hsl (340, 100%, 97%) | cmyk (0%, 6%, 2%, 0%) | Lavender Blush |
MistyRose | #FFE4E1 | hsl (6, 100%, 94%) | cmyk (0%, 11%, 12%, 0%) | Misty Rose |
Colores marrones
Nombre HTML | Código hex | Color HSL | Color CMYK | Color TheColorAPI |
---|---|---|---|---|
Cornsilk | #FFF8DC | hsl (48, 100%, 93%) | cmyk (0%, 3%, 14%, 0%) | Cornsilk |
BlanchedAlmond | #FFEBCD | hsl (36, 100%, 90%) | cmyk (0%, 8%, 20%, 0%) | Blanched Almond |
Bisque | #FFE4C4 | hsl (33, 100%, 86%) | cmyk (0%, 11%, 24%, 0%) | Bisque |
NavajoWhite | #FFDEAD | hsl (36, 100%, 80%) | cmyk (0%, 13%, 32%, 0%) | Navajo White |
Wheat | #F5DEB3 | hsl (39, 77%, 83%) | cmyk (4%, 13%, 29%, 0%) | Wheat |
BurlyWood | #DEB887 | hsl (34, 57%, 70%) | cmyk (0%, 17%, 38%, 13%) | Burly Wood |
Tan | #D2B48C | hsl (34, 44%, 69%) | cmyk (0%, 16%, 34%, 18%) | Tan |
RosyBrown | #BC8F8F | hsl (0, 25%, 65%) | cmyk (0%, 27%, 27%, 26%) | Rosy Brown |
SandyBrown | #F4A460 | hsl (28, 87%, 66%) | cmyk (0%, 34%, 60%, 4%) | Sandy Brown |
Goldenrod | #DAA520 | hsl (43, 74%, 49%) | cmyk (0%, 19%, 84%, 15%) | Goldenrod |
DarkGoldenrod | #B8860B | hsl (43, 89%, 38%) | cmyk (0%, 27%, 94%, 28%) | Dark Goldenrod |
Peru | #CD853F | hsl (30, 59%, 53%) | cmyk (0%, 35%, 69%, 20%) | Peru |
Chocolate | #D2691E | hsl (25, 75%, 47%) | cmyk (0%, 49%, 86%, 18%) | Chocolate |
SaddleBrown | #8B4513 | hsl (25, 76%, 30%) | cmyk (0%, 50%, 85%, 45%) | Saddle Brown |
Sienna | #A0522D | hsl (19, 56%, 40%) | cmyk (0%, 49%, 73%, 37%) | Sienna |
Brown | #A52A2A | hsl (0, 59%, 41%) | cmyk (0%, 75%, 75%, 35%) | Brown |
Maroon | #800000 | hsl (0, 100%, 25%) | cmyk (0%, 100%, 100%, 50%) | Maroon |
Existen 16 777 216 combinaciones distintas (255*255*255=16 777 216).
App herramienta interactiva: Selector de colores online
Además de la tabla de colores web de referencia, te ofrecemos una paleta de colores interactiva con la que puedes seleccionar cualquier color y obtener automáticamente su código en los formatos más utilizados. Convierte cualquier color a HEX, RGB, HSL, nombre web, nombre TheColorAPI y CMYK automáticamente.
Selecciona un color
HEX: #000000
RGB: RGB (0, 0, 0)
HSL: HSL (0, 0%, 0%)
CMYK: CMYK (0%, 0%, 0%, 100%)
Nombre del color según TheColorAPI: Buscando...
Nombre del color web: No hay un color web estándar asociado
Selecciona cualquier color y obtén su código en diferentes formatos
Además de nuestra tabla de referencia, te ofrecemos una herramienta interactiva. Con nuestra paleta de colores online, puedes seleccionar cualquier color y obtener automáticamente su código en los formatos HEX, RGB, HSL, CMYK, HTML y TheColorAPI. Y si tienes un código HEX también puedes convertirlo a RGB, HSL, CMYK, HTML o TheColorAPI.
Ideal para diseñadores web, programadores y creativos que necesitan precisión en los colores.
¿Por qué es importante conocer los códigos de color?
Los códigos de color son esenciales para:
- Crear diseños web con colores exactos en HTML y CSS.
- Usar colores precisos en herramientas como Photoshop, Illustrator y Canva.
- Mantener coherencia visual en branding y marketing digital.
- Asegurar que los colores sean compatibles entre pantallas y medios impresos.
- Optimización SEO en sitios web que dependen de identidad visual y accesibilidad.
¿Cómo usar la tabla de colores HTML y la paleta de colores?
- Explora la tabla de colores HTML para encontrar el tono que necesitas.
- Copia su código HEX, RGB, HSL o CMYK según el uso que vayas a darle.
- Usa la herramienta de selección de color para encontrar el código de cualquier color personalizado.
Compatible con CSS, JavaScript, WordPress, Divi y más.
Encuentra los mejores códigos de colores para tu web, diseño o impresión en segundos.
Explora nuestra tabla de colores ahora y descubre la herramienta definitiva para seleccionar y convertir colores fácilmente.
Los colores en HTML son fundamentales para el diseño web, ya que permiten personalizar la apariencia de cualquier página y mejorar la experiencia visual del usuario. Para definir un color en HTML y CSS, se utilizan distintos formatos como los códigos HEX, RGB y HSL, cada uno con sus propias ventajas y aplicaciones.
Si estás buscando una tabla de colores HTML completa y fácil de usar, aquí encontrarás una referencia esencial con todos los códigos necesarios. Con esta tabla de colores web, podrás copiar y aplicar los colores exactos que necesitas en tu página web sin complicaciones.
¿Por qué es importante conocer los códigos de colores HTML?
Los diseñadores gráficos y desarrolladores web utilizamos los códigos de colores para asegurar coherencia en el branding, mejorar la accesibilidad y garantizar una experiencia de usuario agradable. Algunos de los usos más comunes incluyen:
- Diseño web y CSS: Definir colores exactos para garantizar coherencia visual y facilitar la personalización de paletas de colores en páginas web y aplicaciones. Además, permite crear efectos visuales atractivos mediante combinaciones de colores en CSS.
- Edición gráfica: Usar colores precisos en herramientas como Photoshop, Illustrator y Canva para garantizar que los diseños se vean correctamente en cualquier pantalla o impresión.
- Identidad de marca: Mantener consistencia en branding y marketing digital, asegurando que los colores utilizados sean siempre los mismos en todos los medios y plataformas.
- Accesibilidad web: Optimizar el contraste para mejorar la legibilidad del texto y hacer que los sitios web sean más accesibles para personas con deficiencias visuales.
- Compatibilidad en impresión y pantallas: Asegurar que los colores sean fieles en distintos formatos, evitando diferencias entre lo que se ve en la pantalla y lo que se imprime.
Cómo utilizar la tabla de colores HTML
Esta tabla incluye una amplia variedad de colores web junto con sus respectivos códigos HEX, valores RGB y HSL. Simplemente copia el código del color que necesitas y aplícalo en tu diseño web con una línea de código en CSS:
body {
background-color: #3498db; /* Azul HTML */
}