WEB APPS
HTML web color chart: HEX, RGB, HSL, and CMYK codes for web design and development
Quick guide to the content...
Complete list of web color codes
Colors in HTML and CSS are essential for web design, programming, and digital branding. To define colors in websites and digital graphics, different formats such as HEX, RGB, HSL, and CMYK are used.
This guide provides a complete HTML color chart featuring HEX, RGB, HSL, and CMYK codes, along with HTML color names and TheColorAPI names. Additionally, we offer a color picker tool that allows you to instantly retrieve the color codes of any selected color.
What Are HTML Color Codes and How Are They Used?
Web color codes allow for precise color definition in web design, CSS, and graphic editing tools. The most commonly used formats are:
- HTML colors and standard names: A set of 140 predefined colors in HTML and CSS (e.g., red, blue, gold, navy). Also known as Web color names.
- HEX code: A hexadecimal format used in CSS and web design for precise color definition (e.g., #FF5733).
- RGB values (Red, Green, Blue): A color model based on red, green, and blue light, commonly used in screens and digital displays (e.g., rgb(255, 87, 51)).
- HSL conversion (Hue, Saturation, Lightness): Represents color in terms of hue, saturation, and lightness. A more intuitive alternative to RGB for color adjustments (e.g., hsl(11, 100%, 60%)).
- CMYK values (Cyan, Magenta, Yellow, Key): Used in printing, where colors are created by subtracting light. CMYK defines the ink composition in printing processes (e.g., cmyk(0%, 65%, 80%, 10%)).
- Colors According to TheColorAPI: This system assigns descriptive names to colors, useful for branding and visual design. It provides AI-recognized color names used in graphic editors, making color identification easier.
If you’re a designer, developer, or need to find a specific color, this chart is an essential tool. It provides a comprehensive reference for commonly used web colors, displaying HEX, RGB, HSL, CMYK, HTML web names, and TheColorAPI names—allowing easy application in CSS, HTML, and graphic design software.
Web color chart
Below is a complete HTML color table with color names, HEX codes, RGB, HSL, and CMYK values.
Purple colors
| 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 |
Blue colors
| 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 |
Red colors
| 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 |
Pink colors
| 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 |
Orange colors
| 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 |
Yellow colors
| 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 |
Green colors
| 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 |
Gray colors
| 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 |
White colors
| 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 |
Brown colors
| 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 |
There are 16,777,216 different combinations (255*255*255=16 777 216).
Interactive Tool: Online Color Picker
In addition to our HTML color chart, we offer a color picker tool where you can select any color and instantly retrieve its HEX, RGB, HSL, CMYK, HTML name, and TheColorAPI name.
Pick a Color
HEX: #000000
RGB: RGB (0, 0, 0)
HSL: HSL (0, 0%, 0%)
CMYK: CMYK (0%, 0%, 0%, 100%)
Color name according to TheColorAPI: Searching...
Web Color Name: There is no standard web color associated
Interactive tool: Online color picker
In addition to our HTML color chart, we offer a color picker tool where you can select any color and instantly retrieve its HEX, RGB, HSL, CMYK, HTML name, and TheColorAPI name.
Convert any color code
Our online color converter allows you to enter a HEX code and convert it into RGB, HSL, CMYK, HTML Name, or TheColorAPI name instantly.
Ideal for web designers, developers, and creatives who need accurate color data.
Why are color codes important?
Understanding color codes is essential for:
- Web design & CSS: Defining precise colors ensures visual consistency and allows designers to create custom color palettes for websites and applications. It also helps create eye-catching visual effects with CSS.
- Graphic editing: Ensuring accurate colors in Photoshop, Illustrator, Canva, and other design tools, avoiding mismatches in digital and printed materials.
- Brand identity: Keeping colors consistent in branding and digital marketing, ensuring that logos and assets maintain their original tones across different platforms.
- Web accessibility: Optimizing contrast to enhance text readability, making websites more accessible to visually impaired users.
- Print & screen compatibility: Ensuring colors remain faithful across different formats, minimizing differences between screen display and print output.
How to Use the HTML Color Chart and Color Picker?
- Browse the HTML color chart to find the shade you need.
- Copy its HEX, RGB, HSL, or CMYK code depending on your requirements.
- Use the color selection tool to get the code for any custom color.
- Apply colors in CSS, JavaScript, WordPress, Divi, and more.
Find the perfect color for your website, design, or print projects in seconds.
Explore our HTML color chart and try our color picker today!
HTML colors: Essential for web design
Colors in HTML are crucial for web design, allowing designers to customize the look and feel of any page while enhancing user experience. To define colors in HTML and CSS, different formats such as HEX, RGB, and HSL are used, each with its own advantages and applications.
If you’re looking for a complete HTML color chart, this is your ultimate reference guide. Copy and apply the exact colors you need in your web design projects effortlessly.
How to use the HTML color chart in CSS
The table includes a wide range of web colors along with their respective HEX, RGB, and HSL values. Simply copy the color code and use it in your website’s CSS:
body {
background-color: #3498db; /* HTML blue */
}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 */
}