HTML Color

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="html color, codes html color, colors, colour, colours, background color, chart, font, text, table, link, tag, names, hex, hexadecimal, hexidecimal, codes, style, rgb, hue, wheel, css, red, white, black, yellow, blue, green, grey, gray, div, web, gold, orange, pink, brown, silver, light, reference, web safe, map, numbers, pallet, palette, pallete, pallette, transparent, color effects, html codes for text, affects, cool, color codes, text code, area, table, input, image, css, link, style, field, wrap, free html codes, copy and paste, myspace, my space, text, color, background, layout, generator, kodlar, kodlari, codici"> <meta name="Description" content="Need some HTML color code? Check out this list of free HTML color codes - just copy/paste them into your website or blog! All sorts of color effects!"> <link rel="canonical" href="https://www.quackit.com/html/codes/color/"> <title>HTML Color</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML Color</h1> <div class="ad ad-top">  <div data-fuse="23059883638"></div> </div> <p class="lead">HTML color codes that you can apply to websites, blogs, or emails.</p> <p>There are literally millions of different HTML color combinations that you can apply to your website. <strong>16,777,216</strong> colors to be exact! These range from simple, name-based colors such as <code>red</code> or <code>white</code>, to more advanced color definitions such as <code>#ff0000</code>. </p> <p>Here, you will find links to copy/paste codes, as well as tutorials that explain HTML color in more detail.</p> <div class="cards"> <article class="card card-unbordered"> <a class="wrapper" href="/html/codes/color/html_color_chart.cfm"> <img src="/pix/html/codes/color_chart.png" alt="Color chart thumbnail"> <div class="card-body"> <h2>HTML Color Chart</h2> </div> </a> </article> <article class="card card-unbordered"> <a class="wrapper" href="/css/color/tools/css_color_picker.cfm"> <img src="/pix/html/codes/color/html_color_picker.png" alt="Color picker thumbnail"> <div class="card-body"> <h2>HTML Color Picker</h2> </div> </a> </article> <article class="card card-unbordered"> <a class="wrapper" href="/css/css3/gradients/"> <img src="/pix/html/codes/color/gradient_codes.png" alt="Color gradient example"> <div class="card-body"> <h2>Color Gradients</h2> </div> </a> </article> <article class="card card-unbordered"> <a class="wrapper" href="/html/codes/html_background_codes.cfm"> <img src="/pix/html/codes/background_codes.png" alt="Background color thumbnail"> <div class="card-body"> <h2>Background Color</h2> </div> </a> </article> <article class="card card-unbordered"> <a class="wrapper" href="/html/codes/html_borders.cfm"> <img src="/pix/html/codes/color/border_codes.png" alt="Border color thumbnail"> <div class="card-body"> <h2>Border Colors</h2> </div> </a> </article> <article class="card card-unbordered"> <a class="wrapper" href="/html/codes/html_font_color_code.cfm"> <img src="/pix/html/codes/text_codes.png" alt="Color text example"> <div class="card-body"> <h2>Text Color</h2> </div> </a> </article> <article class="card card-unbordered"> <a class="wrapper" href="/html/codes/tables/html_table_color.cfm"> <img src="/pix/html/codes/tables/html_table_color.png" alt="Color table thumbnail"> <div class="card-body"> <h2>HTML Table Color</h2> </div> </a> </article> <article class="card card-unbordered"> <a class="wrapper" href="/html/codes/tables/html_table_border.cfm"> <img src="/pix/html/codes/tables/html_table_border.png" alt="Table borders thumbnail"> <div class="card-body"> <h2>HTML Table Borders</h2> </div> </a> </article> <article class="card card-unbordered"> <a class="wrapper" href="/html/codes/comment_box_colors.cfm"> <img src="/pix/html/codes/color/comment_box_color.png" alt="Comment box thumbnail"> <div class="card-body"> <h2>Comment Box Color</h2> </div> </a> </article> </div> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/html/html_color_codes.cfm" title="Choose your background color with the color picker and color chart">HTML Color Codes</a></li> <li><a href="/css/css3/gradients/" title="">Gradients</a></li> <li><a href="/html/codes/color/color-tester.cfm" title="">Website Color Tester</a></li> <li><a href="/html/codes/color/web_safe_color_palette.cfm" title="">Websafe Color Palette</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/html/codes/">HTML Codes</a></h3> <ul> <li><a href="/html/codes/html_background_codes.cfm" title="Set background properties on any HTML element.">HTML Background Code</a></li> <li><a href="/html/codes/bold/" title="Specify bold text in your HTML code.">HTML Bold</a></li> <li><a href="/html/codes/color/" title="Add color to your HTML code.">HTML Color</a></li> <li><a href="/html/html_color_codes.cfm" title="Hexadecimal color codes">HTML Color Codes</a></li> <li><a href="/html/codes/comment_box_code.cfm" title="Create a comment box within your HTML codes.">HTML Comment Box Code</a></li> <li><a href="/html/codes/html_scroll_box.cfm" title="Create a scroll box within your HTML codes.">HTML Scrollbox Code</a></li> <li><a href="/html/codes/tables/" title="Add an HTML table to your web page or blog.">HTML Tables</a></li> <li><a href="/html/codes/text/" title="Specify font family, size, color and more within your HTML code.">HTML Text Code</a></li> <li><a href="/html/codes/html_picture_codes.cfm" title="Embed pictures within your HTML code.">HTML Image Code</a></li> <li><a href="/html/codes/link/" title="Create hyperlinks between web pages and other documents.">HTML Link Code</a></li> <li><a href="/html/codes/html_marquee_code.cfm">HTML Marquee Code</a></li> <li><a href="/html/html_music_code.cfm">HTML Music Code</a></li> <li><a href="/html/codes/html_video_codes.cfm">HTML Video Code</a></li> <li><a href="/html/codes/html_form_code.cfm">HTML Form Code</a></li> <li><a href="/html/codes/html_frames_code.cfm">HTML Frames Code</a></li> <li><a href="/html/html_special_characters.cfm" title="ISO-8859-1">HTML Entities</a></li> <li><a href="/html/examples/" title="Copy/paste examples">HTML Examples</a></li> <li><a href="/html/html_help.cfm" title="HTML help with tables, forms, fonts, color, image maps, hyperlinks and more.">HTML Help/Cheat Sheet</a></li> <li><a href="/html/templates/" title="Thousands of pre-built websites">HTML Templates</a></li> <li><a style="padding-left:60px;font-style:italic;" href="/html/codes/">More Codes...</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059883641"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059511718"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

HTML Color