{"id":3515,"date":"2023-06-10T18:04:49","date_gmt":"2023-06-10T21:04:49","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3515"},"modified":"2026-10-06T17:42:15","modified_gmt":"2026-10-06T20:42:15","slug":"tabela-de-cores-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/","title":{"rendered":"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Durante o desenvolvimento de um website, existem diversos fatores que interferem diretamente na qualidade dele e em como o usu\u00e1rio receber\u00e1 as informa\u00e7\u00f5es do conte\u00fado. Uma das coisas mais importantes para a cria\u00e7\u00e3o de um layout \u00e9 a escolha certa das cores a utilizar. Por esta raz\u00e3o, ter \u00e0 m\u00e3o ferramentas que facilitem o processo, como uma tabela de cores HTML, \u00e9 essencial.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Atrav\u00e9s das linhas de c\u00f3digo <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-css\/\">HTML e CSS<\/a>, podemos aplicar cores tanto para fontes como para seus elementos. Podemos at\u00e9 mesmo aplicar cores \u00e0s bordas ou sombreamentos. S\u00e3o muitas possibilidades que nos permitem criar layouts mais complexos e com diversas caracter\u00edsticas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com os diversos tipos de display, grids, flexbox, floats, \u00e9 poss\u00edvel criar in\u00fameras possibilidades visuais s\u00f3 utilizando o HTML e CSS, assim como aplicar diversos backgrounds, anima\u00e7\u00f5es e at\u00e9 mesmo vetores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, \u00e9 importante entender quais s\u00e3o os padr\u00f5es de cores que o HTML suporta, e como s\u00e3o formados. Ap\u00f3s compreender esse tema, voc\u00ea poder\u00e1 ent\u00e3o come\u00e7ar a aplicar as cores atrav\u00e9s do <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilos em HTML<\/a> e CSS. \u00a0Para tanto, disponibilizamos uma tabela de cores HTML, com os nomes das cores, o c\u00f3digo hexadecimal e o valor RGB prontos para usar diretamente no seu estilo!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#Conversor_de_cores_HTML_e_verificador_de_contraste\" title=\"Conversor de cores HTML e verificador de contraste\">Conversor de cores HTML e verificador de contraste<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#Tabela_de_cores_HTML\" title=\"Tabela de cores HTML\">Tabela de cores HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#Ja_imaginou_como_seria_um_website_apenas_com_cores_preto_e_branco_e_sem_a_insercao_de_multimidia\" title=\"J\u00e1 imaginou como seria um website apenas com cores preto e branco e sem a&nbsp;inser\u00e7\u00e3o de multim\u00eddia?\">J\u00e1 imaginou como seria um website apenas com cores preto e branco e sem a&nbsp;inser\u00e7\u00e3o de multim\u00eddia?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#As_cores_no_HTML_e_CSS\" title=\"As cores no HTML e CSS\">As cores no HTML e CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#Cores_Hexadecimais\" title=\"Cores Hexadecimais\">Cores Hexadecimais<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#RGB\" title=\"RGB\">RGB<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#RGBA\" title=\"RGBA\">RGBA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#HSL\" title=\"HSL\">HSL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#HSLA\" title=\"HSLA\">HSLA<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#Aplicando_cores_nos_elementos_HTML\" title=\"Aplicando cores nos elementos HTML\">Aplicando cores nos elementos HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#Modificando_as_cores_inline_das_tags_HTML\" title=\"Modificando as cores inline das tags HTML\">Modificando as cores inline das tags HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#Modificando_as_cores_atraves_de_uma_folha_de_estilos_CSS\" title=\"Modificando as cores atrav\u00e9s de uma folha de estilos CSS\">Modificando as cores atrav\u00e9s de uma folha de estilos CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#Ferramentas_para_utilizar_em_conjunto_com_a_tabela_de_Cores_HTML_e_CSS\" title=\"Ferramentas para utilizar em conjunto com a tabela de Cores HTML e CSS\">Ferramentas para utilizar em conjunto com a tabela de Cores HTML e CSS<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conversor_de_cores_HTML_e_verificador_de_contraste\"><\/span>Conversor de cores HTML e verificador de contraste<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Escolha uma cor no seletor, digite o c\u00f3digo em qualquer formato \u2014 HEX, RGB, HSL ou o nome em ingl\u00eas \u2014 ou clique numa das 148 cores com nome do CSS. A ferramenta mostra os tr\u00eas c\u00f3digos, testa se o texto fica leg\u00edvel sobre o fundo e gera o c\u00f3digo pronto para colar na tag.<\/p>\n\n\n\n<div class=\"hh-cor\" style=\"max-width:780px;margin:28px auto;border:1px solid #c9d6ea;border-radius:14px;padding:22px 24px;background:#f7faff;font-family:Arial,Helvetica,sans-serif;color:#16243d;font-size:15px;\">\n<div style=\"font-weight:800;font-size:19px;color:#0b3d91;margin-bottom:4px;\">Conversor de cores HTML e verificador de contraste<\/div>\n<p style=\"margin:0 0 12px;line-height:1.5;font-size:14.5px;\">Escolha uma cor ou digite em qualquer formato \u2014 #1a73e8, rgb(26,115,232), hsl(214,81%,51%) ou um nome como tomato. Veja os c\u00f3digos, teste se o texto fica leg\u00edvel e copie o c\u00f3digo pronto.<\/p>\n<div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;\">\n<div><label for=\"hh-cor-pick\" style=\"display:block;font-weight:700;font-size:13.5px;margin-bottom:4px;\">Seletor<\/label><input type=\"color\" id=\"hh-cor-pick\" value=\"#1a73e8\" style=\"width:64px;height:40px;border:1px solid #9db4d6;border-radius:8px;padding:2px;background:#ffffff;cursor:pointer;\"><\/div>\n<div style=\"flex:1;min-width:220px;\"><label for=\"hh-cor-in\" style=\"display:block;font-weight:700;font-size:13.5px;margin-bottom:4px;\">Ou digite a cor<\/label><input type=\"text\" id=\"hh-cor-in\" value=\"#1a73e8\" style=\"width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #9db4d6;border-radius:8px;font-family:Consolas,Menlo,monospace;font-size:15px;\"><\/div>\n<\/div>\n<div id=\"hh-cor-msg\" style=\"margin-top:6px;font-size:13.5px;\"><\/div>\n<div id=\"hh-cor-vals\" style=\"margin-top:12px;\"><\/div>\n<div style=\"font-weight:700;margin-top:16px;\">Varia\u00e7\u00f5es (clique para usar)<\/div>\n<div id=\"hh-cor-var\" style=\"display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;\"><\/div>\n<div style=\"margin-top:18px;padding:14px 16px;background:#ffffff;border:1px solid #dbe4f2;border-radius:10px;\">\n<div style=\"font-weight:800;color:#0b3d91;\">Contraste: o texto fica leg\u00edvel?<\/div>\n<div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:8px;\">\n<div><label for=\"hh-cor-bg\" style=\"display:block;font-size:13.5px;font-weight:700;margin-bottom:4px;\">Cor do fundo<\/label><input type=\"text\" id=\"hh-cor-bg\" value=\"#ffffff\" style=\"width:140px;padding:8px 10px;border:1px solid #9db4d6;border-radius:8px;font-family:Consolas,Menlo,monospace;\"><\/div>\n<button type=\"button\" id=\"hh-cor-swap\" style=\"padding:8px 12px;border:1px solid #0b3d91;background:#ffffff;color:#0b3d91;border-radius:8px;cursor:pointer;font-weight:700;\">Inverter texto e fundo<\/button>\n<\/div>\n<div id=\"hh-cor-con\" style=\"margin-top:10px;\"><\/div>\n<\/div>\n<div style=\"margin-top:18px;padding:14px 16px;background:#ffffff;border:1px solid #dbe4f2;border-radius:10px;\">\n<div style=\"font-weight:800;color:#0b3d91;\">C\u00f3digo pronto para a tag<\/div>\n<div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:14px;\">\n<label>Tag <select id=\"hh-cor-tag\" style=\"padding:6px 8px;border:1px solid #9db4d6;border-radius:6px;\"><option value=\"p\">p<\/option><option value=\"h1\">h1<\/option><option value=\"h2\">h2<\/option><option value=\"a\">a<\/option><option value=\"span\">span<\/option><option value=\"div\">div<\/option><option value=\"button\">button<\/option><\/select><\/label>\n<label><input type=\"checkbox\" id=\"hh-cor-usebg\"> Aplicar tamb\u00e9m a cor de fundo<\/label>\n<label>Formato <select id=\"hh-cor-fmt\" style=\"padding:6px 8px;border:1px solid #9db4d6;border-radius:6px;\"><option value=\"hex\">HEX<\/option><option value=\"rgb\">RGB<\/option><option value=\"hsl\">HSL<\/option><\/select><\/label>\n<\/div>\n<div id=\"hh-cor-code\" style=\"margin-top:8px;\"><\/div>\n<\/div>\n<div style=\"margin-top:18px;\">\n<div style=\"font-weight:800;color:#0b3d91;\">As 148 cores com nome no CSS<\/div>\n<input type=\"text\" id=\"hh-cor-find\" placeholder=\"Buscar por nome, como blue ou green\" style=\"width:100%;box-sizing:border-box;margin-top:6px;padding:8px 10px;border:1px solid #9db4d6;border-radius:8px;\">\n<div id=\"hh-cor-grid\" style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:8px;max-height:420px;overflow-y:auto;padding-right:4px;\"><\/div>\n<\/div>\n<p style=\"margin:12px 0 0;font-size:12.5px;color:#3a4a63;line-height:1.5;\">Nomes e valores conforme a especifica\u00e7\u00e3o do CSS. Contraste calculado pela f\u00f3rmula das diretrizes de acessibilidade WCAG 2. Fonte: homehost.com.br<\/p>\n<\/div>\n<script>(function () { var RAW=\"aliceblue:f0f8ff,antiquewhite:faebd7,aqua:00ffff,aquamarine:7fffd4,azure:f0ffff,beige:f5f5dc,bisque:ffe4c4,black:000000,blanchedalmond:ffebcd,blue:0000ff,blueviolet:8a2be2,brown:a52a2a,burlywood:deb887,cadetblue:5f9ea0,chartreuse:7fff00,chocolate:d2691e,coral:ff7f50,cornflowerblue:6495ed,cornsilk:fff8dc,crimson:dc143c,cyan:00ffff,darkblue:00008b,darkcyan:008b8b,darkgoldenrod:b8860b,darkgray:a9a9a9,darkgreen:006400,darkgrey:a9a9a9,darkkhaki:bdb76b,darkmagenta:8b008b,darkolivegreen:556b2f,darkorange:ff8c00,darkorchid:9932cc,darkred:8b0000,darksalmon:e9967a,darkseagreen:8fbc8f,darkslateblue:483d8b,darkslategray:2f4f4f,darkslategrey:2f4f4f,darkturquoise:00ced1,darkviolet:9400d3,deeppink:ff1493,deepskyblue:00bfff,dimgray:696969,dimgrey:696969,dodgerblue:1e90ff,firebrick:b22222,floralwhite:fffaf0,forestgreen:228b22,fuchsia:ff00ff,gainsboro:dcdcdc,ghostwhite:f8f8ff,gold:ffd700,goldenrod:daa520,gray:808080,green:008000,greenyellow:adff2f,grey:808080,honeydew:f0fff0,hotpink:ff69b4,indianred:cd5c5c,indigo:4b0082,ivory:fffff0,khaki:f0e68c,lavender:e6e6fa,lavenderblush:fff0f5,lawngreen:7cfc00,lemonchiffon:fffacd,lightblue:add8e6,lightcoral:f08080,lightcyan:e0ffff,lightgoldenrodyellow:fafad2,lightgray:d3d3d3,lightgreen:90ee90,lightgrey:d3d3d3,lightpink:ffb6c1,lightsalmon:ffa07a,lightseagreen:20b2aa,lightskyblue:87cefa,lightslategray:778899,lightslategrey:778899,lightsteelblue:b0c4de,lightyellow:ffffe0,lime:00ff00,limegreen:32cd32,linen:faf0e6,magenta:ff00ff,maroon:800000,mediumaquamarine:66cdaa,mediumblue:0000cd,mediumorchid:ba55d3,mediumpurple:9370db,mediumseagreen:3cb371,mediumslateblue:7b68ee,mediumspringgreen:00fa9a,mediumturquoise:48d1cc,mediumvioletred:c71585,midnightblue:191970,mintcream:f5fffa,mistyrose:ffe4e1,moccasin:ffe4b5,navajowhite:ffdead,navy:000080,oldlace:fdf5e6,olive:808000,olivedrab:6b8e23,orange:ffa500,orangered:ff4500,orchid:da70d6,palegoldenrod:eee8aa,palegreen:98fb98,paleturquoise:afeeee,palevioletred:db7093,papayawhip:ffefd5,peachpuff:ffdab9,peru:cd853f,pink:ffc0cb,plum:dda0dd,powderblue:b0e0e6,purple:800080,rebeccapurple:663399,red:ff0000,rosybrown:bc8f8f,royalblue:4169e1,saddlebrown:8b4513,salmon:fa8072,sandybrown:f4a460,seagreen:2e8b57,seashell:fff5ee,sienna:a0522d,silver:c0c0c0,skyblue:87ceeb,slateblue:6a5acd,slategray:708090,slategrey:708090,snow:fffafa,springgreen:00ff7f,steelblue:4682b4,tan:d2b48c,teal:008080,thistle:d8bfd8,tomato:ff6347,turquoise:40e0d0,violet:ee82ee,wheat:f5deb3,white:ffffff,whitesmoke:f5f5f5,yellow:ffff00,yellowgreen:9acd32\"; var LT=String.fromCharCode(60);var GT=String.fromCharCode(62);var QU=String.fromCharCode(34);var NL=String.fromCharCode(10); var NAMES=[];var BYNAME={};var parts=RAW.split(\",\");for(var i=0;i!==parts.length;i++){var kv=parts[i].split(\":\");NAMES.push([kv[0],kv[1]]);BYNAME[kv[0]]=kv[1];} function el(id){return document.getElementById(id);} function add(p,tag,text,style){var n=document.createElement(tag);if(text){n.textContent=text;}if(style){n.setAttribute(\"style\",style);}p.appendChild(n);return n;} function clamp(x,a,b){return Math.max(a,Math.min(b,x));} function hx(n){var s=Math.round(n).toString(16);return s.length===1?\"0\"+s:s;} function toHex(c){return \"#\"+hx(c[0])+hx(c[1])+hx(c[2]);} function isHex(s){if(s.length===0){return false;}for(var i=0;i!==s.length;i++){if(\"0123456789abcdef\".indexOf(s.charAt(i))===-1){return false;}}return true;} function parse(input){var s=String(input||\"\").trim().toLowerCase();if(s===\"\"){return null;}var note=\"\"; if(s.charAt(0)===\"#\"){s=s.slice(1);} if(isHex(s)){if(s.length===3||s.length===4){if(s.length===4){note=\"O quarto d\u00edgito (transpar\u00eancia) foi ignorado.\";}return {c:[parseInt(s.charAt(0)+s.charAt(0),16),parseInt(s.charAt(1)+s.charAt(1),16),parseInt(s.charAt(2)+s.charAt(2),16)],note:note};}if(s.length===6||s.length===8){if(s.length===8){note=\"Os dois \u00faltimos d\u00edgitos (transpar\u00eancia) foram ignorados.\";}return {c:[parseInt(s.slice(0,2),16),parseInt(s.slice(2,4),16),parseInt(s.slice(4,6),16)],note:note};}} var nm=s.split(\" \").join(\"\");if(BYNAME[nm]){var h=BYNAME[nm];return {c:[parseInt(h.slice(0,2),16),parseInt(h.slice(2,4),16),parseInt(h.slice(4,6),16)],note:\"\",name:nm};} var o=s.indexOf(\"(\");var e=s.lastIndexOf(\")\");if(o===-1||e===-1){return null;}var fn=s.slice(0,o).trim();var inner=s.slice(o+1,e).split(\"\/\").join(\" \").split(\",\").join(\" \").split(\" \").filter(function(x){return x!==\"\";}); if(inner.length!==3){if(inner.length!==4){return null;}note=\"A transpar\u00eancia (alfa) foi ignorada nos c\u00e1lculos.\";} var nums=[];var pct=[];for(var i=0;i!==3;i++){var t=inner[i];var p=t.charAt(t.length-1)===\"%\";t=t.split(\"%\").join(\"\").split(\"deg\").join(\"\");var v=Number(t);if(t===\"\"||!isFinite(v)){return null;}nums.push(v);pct.push(p);} if(fn===\"rgb\"||fn===\"rgba\"){var c=[];for(var j=0;j!==3;j++){var x=pct[j]?nums[j]*2.55:nums[j];if(Math.max(x,0)!==x||Math.min(x,255)!==x){return {err:\"Os valores de RGB v\u00e3o de 0 a 255.\"};}c.push(Math.round(x));}return {c:c,note:note};} if(fn===\"hsl\"||fn===\"hsla\"){var hh=((nums[0]%360)+360)%360;var ss=nums[1],ll=nums[2];if(Math.max(ss,0)!==ss||Math.min(ss,100)!==ss||Math.max(ll,0)!==ll||Math.min(ll,100)!==ll){return {err:\"Satura\u00e7\u00e3o e luminosidade v\u00e3o de 0% a 100%.\"};}return {c:hslToRgb(hh,ss,ll),note:note};} return null;} function rgbToHsl(c){var r=c[0]\/255,g=c[1]\/255,b=c[2]\/255;var mx=Math.max(r,g,b),mn=Math.min(r,g,b);var l=(mx+mn)\/2;var h=0,s=0;var d=mx-mn;if(d!==0){s=l===0||l===1?0:d\/(1-Math.abs(2*l-1));if(mx===r){h=60*(((g-b)\/d)%6);}else if(mx===g){h=60*((b-r)\/d+2);}else{h=60*((r-g)\/d+4);}}if(Math.min(h,0)===h){if(h!==0){h+=360;}}return [Math.round(h)%360,Math.round(s*100),Math.round(l*100)];} function hslToRgb(h,s,l){s=s\/100;l=l\/100;var c=(1-Math.abs(2*l-1))*s;var x=c*(1-Math.abs(((h\/60)%2)-1));var m=l-c\/2;var r=0,g=0,b=0;var k=Math.floor(h\/60)%6;if(k===0){r=c;g=x;}else if(k===1){r=x;g=c;}else if(k===2){g=c;b=x;}else if(k===3){g=x;b=c;}else if(k===4){r=x;b=c;}else{r=c;b=x;}return [Math.round((r+m)*255),Math.round((g+m)*255),Math.round((b+m)*255)];} function lin(v){v=v\/255;return Math.max(v,0.03928)===0.03928?v\/12.92:Math.pow((v+0.055)\/1.055,2.4);} function lum(c){return 0.2126*lin(c[0])+0.7152*lin(c[1])+0.0722*lin(c[2]);} function ratio(a,b){var l1=lum(a),l2=lum(b);var hi=Math.max(l1,l2),lo=Math.min(l1,l2);return (hi+0.05)\/(lo+0.05);} function fmt2(x){return (Math.floor(x*100)\/100).toFixed(2).split(\".\").join(\",\");} function nearest(c){var best=null,bd=1e9;for(var i=0;i!==NAMES.length;i++){var h=NAMES[i][1];var d=Math.pow(parseInt(h.slice(0,2),16)-c[0],2)+Math.pow(parseInt(h.slice(2,4),16)-c[1],2)+Math.pow(parseInt(h.slice(4,6),16)-c[2],2);if(Math.min(d,bd)===d){if(d!==bd||best===null){bd=d;best=NAMES[i][0];}}}return [best,bd];} function suggest(fg,bg,target){var hsl=rgbToHsl(fg);var best=null;for(var step=1;step!==101;step++){var opts=[hsl[2]-step,hsl[2]+step];for(var k=0;k!==2;k++){var L=opts[k];if(L===clamp(L,0,100)){var c=hslToRgb(hsl[0],hsl[1],L);if(Math.max(ratio(c,bg),target)===ratio(c,bg)){return c;}}}}return best;} var cur=[26,115,232]; function strOf(c,f){if(f===\"rgb\"){return \"rgb(\"+c[0]+\", \"+c[1]+\", \"+c[2]+\")\";}if(f===\"hsl\"){var h=rgbToHsl(c);return \"hsl(\"+h[0]+\", \"+h[1]+\"%, \"+h[2]+\"%)\";}return toHex(c);} function copyBtn(parent,text){var b=add(parent,\"button\",\"Copiar\",\"margin-left:8px;padding:4px 10px;border:1px solid #0b3d91;background:#ffffff;color:#0b3d91;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:700;\");b.setAttribute(\"type\",\"button\");b.addEventListener(\"click\",function(){var self=b;var done=function(){self.textContent=\"Copiado!\";setTimeout(function(){self.textContent=\"Copiar\";},1500);};if(navigator.clipboard){if(navigator.clipboard.writeText){navigator.clipboard.writeText(text).then(done,function(){});return;}}});} function set(c,fromPicker){cur=c;if(!fromPicker){el(\"hh-cor-pick\").value=toHex(c);}render();} function render(){var v=el(\"hh-cor-vals\");while(v.firstChild){v.removeChild(v.firstChild);} var row=add(v,\"div\",null,\"display:flex;gap:14px;flex-wrap:wrap;align-items:stretch;\");add(row,\"div\",null,\"width:110px;min-height:110px;border-radius:10px;border:1px solid #9db4d6;background:\"+toHex(cur)+\";\"); var list=add(row,\"div\",null,\"flex:1;min-width:240px;\");var F=[[\"HEX\",strOf(cur,\"hex\")],[\"RGB\",strOf(cur,\"rgb\")],[\"HSL\",strOf(cur,\"hsl\")]]; for(var i=0;i!==F.length;i++){var r=add(list,\"div\",null,\"display:flex;align-items:center;margin:4px 0;\");add(r,\"span\",F[i][0],\"width:46px;font-weight:700;color:#3a4a63;font-size:13px;\");add(r,\"span\",F[i][1],\"font-family:Consolas,Menlo,monospace;font-weight:700;\");copyBtn(r,F[i][1]);} var nn=nearest(cur);add(list,\"div\",nn[1]===0?\"Nome no CSS: \"+nn[0]:\"Nome mais pr\u00f3ximo no CSS: \"+nn[0]+\" (#\"+BYNAME[nn[0]]+\")\",\"font-size:13.5px;color:#3a4a63;margin-top:6px;\"); var va=el(\"hh-cor-var\");while(va.firstChild){va.removeChild(va.firstChild);}var hsl=rgbToHsl(cur);var Ls=[95,85,75,65,55,45,35,25,15];for(var k=0;k!==Ls.length;k++){(function(L){var c=hslToRgb(hsl[0],hsl[1],L);var b=add(va,\"button\",toHex(c),\"padding:18px 6px 4px;min-width:72px;border:1px solid #9db4d6;border-radius:6px;cursor:pointer;font-family:Consolas,Menlo,monospace;font-size:11.5px;background:\"+toHex(c)+\";color:\"+(Math.max(ratio(c,[0,0,0]),ratio(c,[255,255,255]))===ratio(c,[0,0,0])?\"#000000\":\"#ffffff\")+\";\");b.setAttribute(\"type\",\"button\");b.addEventListener(\"click\",function(){el(\"hh-cor-in\").value=toHex(c);set(c,false);});})(Ls[k]);} renderContrast();renderCode();} function renderContrast(){var box=el(\"hh-cor-con\");while(box.firstChild){box.removeChild(box.firstChild);}var p=parse(el(\"hh-cor-bg\").value);if(!p||!p.c){add(box,\"div\",\"Digite uma cor de fundo v\u00e1lida.\",\"color:#8f1f12;font-weight:700;\");return;}var bg=p.c;var r=ratio(cur,bg); var prev=add(box,\"div\",null,\"padding:14px 16px;border-radius:8px;border:1px solid #dbe4f2;background:\"+toHex(bg)+\";color:\"+toHex(cur)+\";\");add(prev,\"div\",\"Texto de exemplo em tamanho normal\",\"font-size:16px;\");add(prev,\"div\",\"T\u00edtulo grande\",\"font-size:24px;font-weight:700;margin-top:4px;\"); add(box,\"div\",\"Contraste: \"+fmt2(r)+\" : 1\",\"font-weight:800;font-size:18px;margin-top:10px;\"); var T=[[\"Texto normal \u2014 n\u00edvel AA (m\u00ednimo recomendado)\",4.5],[\"Texto grande ou negrito \u2014 n\u00edvel AA\",3],[\"Texto normal \u2014 n\u00edvel AAA\",7],[\"Texto grande ou negrito \u2014 n\u00edvel AAA\",4.5]];var g=add(box,\"div\",null,\"margin-top:4px;\"); for(var i=0;i!==T.length;i++){var ok=Math.max(r,T[i][1])===r;add(g,\"div\",(ok?\"\u2713 \":\"\u2717 \")+T[i][0],\"font-size:14px;margin-top:2px;color:\"+(ok?\"#155e2c\":\"#8f1f12\")+\";font-weight:700;\");} if(Math.max(r,4.5)!==r){var s=suggest(cur,bg,4.5);if(s){var sg=add(box,\"div\",null,\"margin-top:8px;padding:8px 10px;background:#fff6e5;border-radius:7px;font-size:14px;color:#6b3d00;\");add(sg,\"span\",\"Para passar no n\u00edvel AA, use o texto em \"+toHex(s)+\" \u2014 o mesmo tom, mais \"+(lum(s)===Math.min(lum(s),lum(cur))?\"escuro\":\"claro\")+\". \");var u=add(sg,\"button\",\"Usar esta cor\",\"padding:3px 9px;border:1px solid #6b3d00;background:#ffffff;color:#6b3d00;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:700;\");u.setAttribute(\"type\",\"button\");u.addEventListener(\"click\",function(){el(\"hh-cor-in\").value=toHex(s);set(s,false);});}}} function renderCode(){var box=el(\"hh-cor-code\");while(box.firstChild){box.removeChild(box.firstChild);}var tag=el(\"hh-cor-tag\").value;var f=el(\"hh-cor-fmt\").value;var useBg=el(\"hh-cor-usebg\").checked;var bgp=parse(el(\"hh-cor-bg\").value);var bg=bgp?bgp.c:null; var props=\"color: \"+strOf(cur,f)+\";\"+(useBg?(bg?\" background-color: \"+strOf(bg,f)+\";\":\"\"):\"\");var attr=tag===\"a\"?\" href=\"+QU+\"#\"+QU:\"\"; var inline=LT+tag+attr+\" style=\"+QU+props+QU+GT+\"Seu texto\"+LT+\"\/\"+tag+GT; var css=\".\"+\"destaque {\"+NL+\"  color: \"+strOf(cur,f)+\";\"+(useBg?(bg?NL+\"  background-color: \"+strOf(bg,f)+\";\":\"\"):\"\")+NL+\"}\";var html=LT+tag+attr+\" class=\"+QU+\"destaque\"+QU+GT+\"Seu texto\"+LT+\"\/\"+tag+GT; var blocks=[[\"Direto na tag (inline)\",inline],[\"Com uma classe CSS \u2014 no arquivo .css ou dentro de \"+LT+\"style\"+GT,css],[\"E na tag\",html]]; for(var i=0;i!==blocks.length;i++){var hd=add(box,\"div\",null,\"display:flex;align-items:center;margin-top:8px;\");add(hd,\"span\",blocks[i][0],\"font-size:13px;font-weight:700;color:#3a4a63;\");copyBtn(hd,blocks[i][1]);add(box,\"div\",blocks[i][1],\"font-family:Consolas,Menlo,monospace;font-size:13px;background:#0f172a;color:#f1f5f9;padding:9px 11px;border-radius:7px;white-space:pre-wrap;word-break:break-all;margin-top:4px;\");}} function grid(){var g=el(\"hh-cor-grid\");while(g.firstChild){g.removeChild(g.firstChild);}var q=String(el(\"hh-cor-find\").value||\"\").trim().toLowerCase().split(\" \").join(\"\");var shown=0; for(var i=0;i!==NAMES.length;i++){(function(n,h){if(q!==\"\"){if(n.indexOf(q)===-1){if(h.indexOf(q.split(\"#\").join(\"\"))===-1){return;}}}shown++;var c=[parseInt(h.slice(0,2),16),parseInt(h.slice(2,4),16),parseInt(h.slice(4,6),16)];var b=add(g,\"button\",null,\"display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #dbe4f2;border-radius:7px;background:#ffffff;cursor:pointer;text-align:left;\");b.setAttribute(\"type\",\"button\");b.setAttribute(\"title\",\"Usar \"+n);add(b,\"span\",null,\"flex:0 0 26px;height:26px;border-radius:5px;border:1px solid #c9d6ea;background:#\"+h+\";\");var t=add(b,\"span\",null,\"min-width:0;\");add(t,\"span\",n,\"display:block;font-size:12.5px;font-weight:700;color:#16243d;word-break:break-all;\");add(t,\"span\",\"#\"+h,\"display:block;font-size:12px;font-family:Consolas,Menlo,monospace;color:#3a4a63;\");b.addEventListener(\"click\",function(){el(\"hh-cor-in\").value=n;set(c,false);});})(NAMES[i][0],NAMES[i][1]);} if(shown===0){add(g,\"div\",\"Nenhuma cor com esse nome. Os nomes s\u00e3o em ingl\u00eas, como red, blue ou green.\",\"grid-column:1\/-1;font-size:13.5px;color:#3a4a63;\");}} function fromText(){var m=el(\"hh-cor-msg\");while(m.firstChild){m.removeChild(m.firstChild);}var p=parse(el(\"hh-cor-in\").value);if(!p){add(m,\"div\",\"Formato n\u00e3o reconhecido. Use #1a73e8, rgb(26,115,232), hsl(214,81%,51%) ou um nome em ingl\u00eas, como tomato.\",\"color:#8f1f12;font-weight:700;\");return;}if(p.err){add(m,\"div\",p.err,\"color:#8f1f12;font-weight:700;\");return;}if(p.note){add(m,\"div\",p.note,\"color:#6b3d00;\");}set(p.c,false);} function init(){var i=el(\"hh-cor-in\");if(!i){return;}if(i.getAttribute(\"data-hh-ready\")===\"1\"){return;}i.setAttribute(\"data-hh-ready\",\"1\"); i.addEventListener(\"input\",fromText);el(\"hh-cor-pick\").addEventListener(\"input\",function(){var p=parse(el(\"hh-cor-pick\").value);el(\"hh-cor-in\").value=el(\"hh-cor-pick\").value;var m=el(\"hh-cor-msg\");while(m.firstChild){m.removeChild(m.firstChild);}set(p.c,true);}); el(\"hh-cor-bg\").addEventListener(\"input\",function(){renderContrast();renderCode();});el(\"hh-cor-swap\").addEventListener(\"click\",function(){var bg=parse(el(\"hh-cor-bg\").value);if(!bg||!bg.c){return;}el(\"hh-cor-bg\").value=toHex(cur);el(\"hh-cor-in\").value=toHex(bg.c);set(bg.c,false);}); el(\"hh-cor-tag\").addEventListener(\"change\",renderCode);el(\"hh-cor-fmt\").addEventListener(\"change\",renderCode);el(\"hh-cor-usebg\").addEventListener(\"change\",renderCode);el(\"hh-cor-find\").addEventListener(\"input\",grid); fromText();grid();} if(document.readyState===\"loading\"){document.addEventListener(\"DOMContentLoaded\",init);}else{init();} })();<\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tabela_de_cores_HTML\"><\/span>Tabela de cores HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Na tabela de cores HTML, voc\u00ea poder\u00e1 encontrar diversos exemplos de cores com seu c\u00f3digo hexadecimal, assim como o nome em ingl\u00eas e o c\u00f3digo RGB, j\u00e1 prontos para copiar diretamente para o seu c\u00f3digo HTML\/CSS:<\/p>\n\n\n\n<div style=\"font-size: 12px;\">\n<table class=\"table table-bordered aligncenter\">\n<thead>\n<tr>\n<th style=\"text-align: left;\">Nome da Cor<\/th>\n<th>C\u00f3digo hexadecimal<\/th>\n<th>C\u00f3digo RGB<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"background-color: #000000;\"><span style=\"color: #ffffff;\">Black<\/span><\/td>\n<td style=\"background-color: #000000;\"><span style=\"color: #ffffff;\">#000000<\/span><\/td>\n<td style=\"background-color: #000000;\"><span style=\"color: #ffffff;\">(0,0,0)<\/span><\/td>\n<\/tr>\n\n<tr>\n<td style=\"background-color: #696969;\">DimGray<\/td>\n<td style=\"background-color: #696969;\">#696969<\/td>\n<td style=\"background-color: #696969;\">(105,105,105)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #808080;\">Gray<\/td>\n<td style=\"background-color: #808080;\">#808080<\/td>\n<td style=\"background-color: #808080;\">(128,128,128)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #a9a9a9;\">DarkGray<\/td>\n<td style=\"background-color: #a9a9a9;\">#A9A9A9<\/td>\n<td style=\"background-color: #a9a9a9;\">(169,169,169)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #c0c0c0;\">Silver<\/td>\n<td style=\"background-color: #c0c0c0;\">#C0C0C0<\/td>\n<td style=\"background-color: #c0c0c0;\">(192,192,192)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #d3d3d3;\">LightGrey<\/td>\n<td style=\"background-color: #d3d3d3;\">#D3D3D3<\/td>\n<td style=\"background-color: #d3d3d3;\">(211,211,211)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #dcdcdc;\">Gainsboro<\/td>\n<td style=\"background-color: #dcdcdc;\">#DCDCDC<\/td>\n<td style=\"background-color: #dcdcdc;\">(220,220,220)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #6a5acd;\"><span style=\"color: #ffffff;\">SlateBlue<\/span><\/td>\n<td style=\"background-color: #6a5acd;\"><span style=\"color: #ffffff;\">#6A5ACD<\/span><\/td>\n<td style=\"background-color: #6a5acd;\"><span style=\"color: #ffffff;\">(106,90,205)<\/span><\/td>\n<\/tr>\n\n\n<tr>\n<td style=\"background-color: #483d8b;\"><span style=\"color: #ffffff;\">DarkSlateBlue<\/span><\/td>\n<td style=\"background-color: #483d8b;\"><span style=\"color: #ffffff;\">#483D8B<\/span><\/td>\n<td style=\"background-color: #483d8b;\"><span style=\"color: #ffffff;\">(72,61,139)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #191970;\"><span style=\"color: #ffffff;\">MidnightBlue<\/span><\/td>\n<td style=\"background-color: #191970;\"><span style=\"color: #ffffff;\">#191970<\/span><\/td>\n<td style=\"background-color: #191970;\"><span style=\"color: #ffffff;\">(25,25,112)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #000080;\"><span style=\"color: #ffffff;\">Navy<\/span><\/td>\n<td style=\"background-color: #000080;\"><span style=\"color: #ffffff;\">#000080<\/span><\/td>\n<td style=\"background-color: #000080;\"><span style=\"color: #ffffff;\">(0,0,128)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #00008b;\"><span style=\"color: #ffffff;\">DarkBlue<\/span><\/td>\n<td style=\"background-color: #00008b;\"><span style=\"color: #ffffff;\">#00008B<\/span><\/td>\n<td style=\"background-color: #00008b;\"><span style=\"color: #ffffff;\">(0,0,139)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #0000cd;\"><span style=\"color: #ffffff;\">MediumBlue<\/span><\/td>\n<td style=\"background-color: #0000cd;\"><span style=\"color: #ffffff;\">#0000CD<\/span><\/td>\n<td style=\"background-color: #0000cd;\"><span style=\"color: #ffffff;\">(0,0,205)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #0000ff;\"><span style=\"color: #ffffff;\">Blue<\/span><\/td>\n<td style=\"background-color: #0000ff;\"><span style=\"color: #ffffff;\">#0000FF<\/span><\/td>\n<td style=\"background-color: #0000ff;\"><span style=\"color: #ffffff;\">(0,0,255)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #6495ed;\">CornflowerBlue<\/td>\n<td style=\"background-color: #6495ed;\">#6495ED<\/td>\n<td style=\"background-color: #6495ed;\">(100,149,237)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #4169e1;\">RoyalBlue<\/td>\n<td style=\"background-color: #4169e1;\">#4169E1<\/td>\n<td style=\"background-color: #4169e1;\">(65,105,225)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #1e90ff;\">DodgerBlue<\/td>\n<td style=\"background-color: #1e90ff;\">#1E90FF<\/td>\n<td style=\"background-color: #1e90ff;\">(30,144,255)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #00bfff;\">DeepSkyBlue<\/td>\n<td style=\"background-color: #00bfff;\">#00BFFF<\/td>\n<td style=\"background-color: #00bfff;\">(0,191,255)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #87cefa;\">LightSkyBlue<\/td>\n<td style=\"background-color: #87cefa;\">#87CEFA<\/td>\n<td style=\"background-color: #87cefa;\">(135,206,250)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #87ceeb;\">SkyBlue<\/td>\n<td style=\"background-color: #87ceeb;\">#87CEEB<\/td>\n<td style=\"background-color: #87ceeb;\">(135,206,235)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #add8e6;\">LightBlue<\/td>\n<td style=\"background-color: #add8e6;\">#ADD8E6<\/td>\n<td style=\"background-color: #add8e6;\">(173,216,230)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #4682b4;\">SteelBlue<\/td>\n<td style=\"background-color: #4682b4;\">#4682B4<\/td>\n<td style=\"background-color: #4682b4;\">(70,130,180)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #b0c4de;\">LightSteelBlue<\/td>\n<td style=\"background-color: #b0c4de;\">#B0C4DE<\/td>\n<td style=\"background-color: #b0c4de;\">(176,196,222)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #708090;\">SlateGray<\/td>\n<td style=\"background-color: #708090;\">#708090<\/td>\n<td style=\"background-color: #708090;\">(112,128,144)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #778899;\">LightSlateGray<\/td>\n<td style=\"background-color: #778899;\">#778899<\/td>\n<td style=\"background-color: #778899;\">(119,136,153)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #00ffff;\">Aqua \/ Cyan<\/td>\n<td style=\"background-color: #00ffff;\">#00FFFF<\/td>\n<td style=\"background-color: #00ffff;\">(0,255,255)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #00ced1;\">DarkTurquoise<\/td>\n<td style=\"background-color: #00ced1;\">#00CED1<\/td>\n<td style=\"background-color: #00ced1;\">(0,206,209)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #40e0d0;\">Turquoise<\/td>\n<td style=\"background-color: #40e0d0;\">#40E0D0<\/td>\n<td style=\"background-color: #40e0d0;\">(64,224,208)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #48d1cc;\">MediumTurquoise<\/td>\n<td style=\"background-color: #48d1cc;\">#48D1CC<\/td>\n<td style=\"background-color: #48d1cc;\">(72,209,204)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #20b2aa;\">LightSeaGreen<\/td>\n<td style=\"background-color: #20b2aa;\">#20B2AA<\/td>\n<td style=\"background-color: #20b2aa;\">(32,178,170)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #008b8b;\">DarkCyan<\/td>\n<td style=\"background-color: #008b8b;\">#008B8B<\/td>\n<td style=\"background-color: #008b8b;\">(0,139,139)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #008080;\">Teal<\/td>\n<td style=\"background-color: #008080;\">#008080<\/td>\n<td style=\"background-color: #008080;\">(0,128,128)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #7fffd4;\">Aquamarine<\/td>\n<td style=\"background-color: #7fffd4;\">#7FFFD4<\/td>\n<td style=\"background-color: #7fffd4;\">(127,255,212)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #66cdaa;\">MediumAquamarine<\/td>\n<td style=\"background-color: #66cdaa;\">#66CDAA<\/td>\n<td style=\"background-color: #66cdaa;\">(102,205,170)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #5f9ea0;\">CadetBlue<\/td>\n<td style=\"background-color: #5f9ea0;\">#5F9EA0<\/td>\n<td style=\"background-color: #5f9ea0;\">(95,158,160)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #2f4f4f;\"><span style=\"color: #ffffff;\">DarkSlateGray<\/span><\/td>\n<td style=\"background-color: #2f4f4f;\"><span style=\"color: #ffffff;\">#2F4F4F<\/span><\/td>\n<td style=\"background-color: #2f4f4f;\"><span style=\"color: #ffffff;\">(47,79,79)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #00fa9a;\">MediumSpringGreen<\/td>\n<td style=\"background-color: #00fa9a;\">#00FA9A<\/td>\n<td style=\"background-color: #00fa9a;\">(0,250,154)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #00ff7f;\">SpringGreen<\/td>\n<td style=\"background-color: #00ff7f;\">#00FF7F<\/td>\n<td style=\"background-color: #00ff7f;\">(0,255,127)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #98fb98;\">PaleGreen<\/td>\n<td style=\"background-color: #98fb98;\">#98FB98<\/td>\n<td style=\"background-color: #98fb98;\">(152,251,152)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #90ee90;\">LightGreen<\/td>\n<td style=\"background-color: #90ee90;\">#90EE90<\/td>\n<td style=\"background-color: #90ee90;\">(144,238,144)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #8fbc8f;\">DarkSeaGreen<\/td>\n<td style=\"background-color: #8fbc8f;\">#8FBC8F<\/td>\n<td style=\"background-color: #8fbc8f;\">(143,188,143)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #3cb371;\">MediumSeaGreen<\/td>\n<td style=\"background-color: #3cb371;\">#3CB371<\/td>\n<td style=\"background-color: #3cb371;\">(60,179,113)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #2e8b57;\">SeaGreen<\/td>\n<td style=\"background-color: #2e8b57;\">#2E8B57<\/td>\n<td style=\"background-color: #2e8b57;\">(46,139,87)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #006400;\">DarkGreen<\/td>\n<td style=\"background-color: #006400;\">#006400<\/td>\n<td style=\"background-color: #006400;\">(0,100,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #008000;\">Green<\/td>\n<td style=\"background-color: #008000;\">#008000<\/td>\n<td style=\"background-color: #008000;\">(0,128,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #228b22;\">ForestGreen<\/td>\n<td style=\"background-color: #228b22;\">#228B22<\/td>\n<td style=\"background-color: #228b22;\">(34,139,34)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #32cd32;\">LimeGreen<\/td>\n<td style=\"background-color: #32cd32;\">#32CD32<\/td>\n<td style=\"background-color: #32cd32;\">(50,205,50)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #00ff00;\">Lime<\/td>\n<td style=\"background-color: #00ff00;\">#00FF00<\/td>\n<td style=\"background-color: #00ff00;\">(0,255,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #7cfc00;\">LawnGreen<\/td>\n<td style=\"background-color: #7cfc00;\">#7CFC00<\/td>\n<td style=\"background-color: #7cfc00;\">(124,252,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #7fff00;\">Chartreuse<\/td>\n<td style=\"background-color: #7fff00;\">#7FFF00<\/td>\n<td style=\"background-color: #7fff00;\">(127,255,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #adff2f;\">GreenYellow<\/td>\n<td style=\"background-color: #adff2f;\">#ADFF2F<\/td>\n<td style=\"background-color: #adff2f;\">(173,255,47)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #9acd32;\">YellowGreen<\/td>\n<td style=\"background-color: #9acd32;\">#9ACD32<\/td>\n<td style=\"background-color: #9acd32;\">(154,205,50)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #6b8e23;\">OliveDrab<\/td>\n<td style=\"background-color: #6b8e23;\">#6B8E23<\/td>\n<td style=\"background-color: #6b8e23;\">(107,142,35)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #556b2f;\">DarkOliveGreen<\/td>\n<td style=\"background-color: #556b2f;\">#556B2F<\/td>\n<td style=\"background-color: #556b2f;\">(85,107,47)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #808000;\">Olive<\/td>\n<td style=\"background-color: #808000;\">#808000<\/td>\n<td style=\"background-color: #808000;\">(128,128,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #bdb76b;\">DarkKhaki<\/td>\n<td style=\"background-color: #bdb76b;\">#BDB76B<\/td>\n<td style=\"background-color: #bdb76b;\">(189,183,107)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #daa520;\">Goldenrod<\/td>\n<td style=\"background-color: #daa520;\">#DAA520<\/td>\n<td style=\"background-color: #daa520;\">(218,165,32)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #b8860b;\">DarkGoldenrod<\/td>\n<td style=\"background-color: #b8860b;\">#B8860B<\/td>\n<td style=\"background-color: #b8860b;\">(184,134,11)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #8b4513;\">SaddleBrown<\/td>\n<td style=\"background-color: #8b4513;\">#8B4513<\/td>\n<td style=\"background-color: #8b4513;\">(139,69,19)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #a0522d;\">Sienna<\/td>\n<td style=\"background-color: #a0522d;\">#A0522D<\/td>\n<td style=\"background-color: #a0522d;\">(160,82,45)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #bc8f8f;\">RosyBrown<\/td>\n<td style=\"background-color: #bc8f8f;\">#BC8F8F<\/td>\n<td style=\"background-color: #bc8f8f;\">(188,143,143)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #cd853f;\">Peru<\/td>\n<td style=\"background-color: #cd853f;\">#CD853F<\/td>\n<td style=\"background-color: #cd853f;\">(205,133,63)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #d2691e;\">Chocolate<\/td>\n<td style=\"background-color: #d2691e;\">#D2691E<\/td>\n<td style=\"background-color: #d2691e;\">(210,105,30)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f4a460;\">SandyBrown<\/td>\n<td style=\"background-color: #f4a460;\">#F4A460<\/td>\n<td style=\"background-color: #f4a460;\">(244,164,96)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffdead;\">NavajoWhite<\/td>\n<td style=\"background-color: #ffdead;\">#FFDEAD<\/td>\n<td style=\"background-color: #ffdead;\">(255,222,173)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f5deb3;\">Wheat<\/td>\n<td style=\"background-color: #f5deb3;\">#F5DEB3<\/td>\n<td style=\"background-color: #f5deb3;\">(245,222,179)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #deb887;\">BurlyWood<\/td>\n<td style=\"background-color: #deb887;\">#DEB887<\/td>\n<td style=\"background-color: #deb887;\">(222,184,135)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #d2b48c;\">Tan<\/td>\n<td style=\"background-color: #d2b48c;\">#D2B48C<\/td>\n<td style=\"background-color: #d2b48c;\">(210,180,140)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #7b68ee;\">MediumSlateBlue<\/td>\n<td style=\"background-color: #7b68ee;\">#7B68EE<\/td>\n<td style=\"background-color: #7b68ee;\">(123,104,238)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #9370db;\">MediumPurple<\/td>\n<td style=\"background-color: #9370db;\">#9370DB<\/td>\n<td style=\"background-color: #9370db;\">(147,112,219)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #8a2be2;\">BlueViolet<\/td>\n<td style=\"background-color: #8a2be2;\">#8A2BE2<\/td>\n<td style=\"background-color: #8a2be2;\">(138,43,226)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #4b0082;\"><span style=\"color: #ffffff;\">Indigo<\/span><\/td>\n<td style=\"background-color: #4b0082;\"><span style=\"color: #ffffff;\">#4B0082<\/span><\/td>\n<td style=\"background-color: #4b0082;\"><span style=\"color: #ffffff;\">(75,0,130)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #9400d3;\">DarkViolet<\/td>\n<td style=\"background-color: #9400d3;\">#9400D3<\/td>\n<td style=\"background-color: #9400d3;\">(148,0,211)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #9932cc;\">DarkOrchid<\/td>\n<td style=\"background-color: #9932cc;\">#9932CC<\/td>\n<td style=\"background-color: #9932cc;\">(153,50,204)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ba55d3;\">MediumOrchid<\/td>\n<td style=\"background-color: #ba55d3;\">#BA55D3<\/td>\n<td style=\"background-color: #ba55d3;\">(186,85,211)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #800080;\"><span style=\"color: #ffffff;\">Purple<\/span><\/td>\n<td style=\"background-color: #800080;\"><span style=\"color: #ffffff;\">#800080<\/span><\/td>\n<td style=\"background-color: #800080;\"><span style=\"color: #ffffff;\">(128,0,128)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #8b008b;\"><span style=\"color: #ffffff;\">DarkMagenta<\/span><\/td>\n<td style=\"background-color: #8b008b;\"><span style=\"color: #ffffff;\">#8B008B<\/span><\/td>\n<td style=\"background-color: #8b008b;\"><span style=\"color: #ffffff;\">(139,0,139)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ff00ff;\">Fuchsia \/ Magenta<\/td>\n<td style=\"background-color: #ff00ff;\">#FF00FF<\/td>\n<td style=\"background-color: #ff00ff;\">(255,0,255)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ee82ee;\">Violet<\/td>\n<td style=\"background-color: #ee82ee;\">#EE82EE<\/td>\n<td style=\"background-color: #ee82ee;\">(238,130,238)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #da70d6;\">Orchid<\/td>\n<td style=\"background-color: #da70d6;\">#DA70D6<\/td>\n<td style=\"background-color: #da70d6;\">(218,112,214)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #dda0dd;\">Plum<\/td>\n<td style=\"background-color: #dda0dd;\">#DDA0DD<\/td>\n<td style=\"background-color: #dda0dd;\">(221,160,221)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #c71585;\">MediumVioletRed<\/td>\n<td style=\"background-color: #c71585;\">#C71585<\/td>\n<td style=\"background-color: #c71585;\">(199,21,133)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ff1493;\">DeepPink<\/td>\n<td style=\"background-color: #ff1493;\">#FF1493<\/td>\n<td style=\"background-color: #ff1493;\">(255,20,147)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ff69b4;\">HotPink<\/td>\n<td style=\"background-color: #ff69b4;\">#FF69B4<\/td>\n<td style=\"background-color: #ff69b4;\">(255,105,180)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #db7093;\">PaleVioletRed<\/td>\n<td style=\"background-color: #db7093;\">#DB7093<\/td>\n<td style=\"background-color: #db7093;\">(219,112,147)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffb6c1;\">LightPink<\/td>\n<td style=\"background-color: #ffb6c1;\">#FFB6C1<\/td>\n<td style=\"background-color: #ffb6c1;\">(255,182,193)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffc0cb;\">Pink<\/td>\n<td style=\"background-color: #ffc0cb;\">#FFC0CB<\/td>\n<td style=\"background-color: #ffc0cb;\">(255,192,203)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f08080;\">LightCoral<\/td>\n<td style=\"background-color: #f08080;\">#F08080<\/td>\n<td style=\"background-color: #f08080;\">(240,128,128)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #cd5c5c;\">IndianRed<\/td>\n<td style=\"background-color: #cd5c5c;\">#CD5C5C<\/td>\n<td style=\"background-color: #cd5c5c;\">(205,92,92)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #dc143c;\">Crimson<\/td>\n<td style=\"background-color: #dc143c;\">#DC143C<\/td>\n<td style=\"background-color: #dc143c;\">(220,20,60)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #800000;\"><span style=\"color: #ffffff;\">Maroon<\/span><\/td>\n<td style=\"background-color: #800000;\"><span style=\"color: #ffffff;\">#800000<\/span><\/td>\n<td style=\"background-color: #800000;\"><span style=\"color: #ffffff;\">(128,0,0)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #8b0000;\"><span style=\"color: #ffffff;\">DarkRed<\/span><\/td>\n<td style=\"background-color: #8b0000;\"><span style=\"color: #ffffff;\">#8B0000<\/span><\/td>\n<td style=\"background-color: #8b0000;\"><span style=\"color: #ffffff;\">(139,0,0)<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #b22222;\">FireBrick<\/td>\n<td style=\"background-color: #b22222;\">#B22222<\/td>\n<td style=\"background-color: #b22222;\">(178,34,34)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #a52a2a;\">Brown<\/td>\n<td style=\"background-color: #a52a2a;\">#A52A2A<\/td>\n<td style=\"background-color: #a52a2a;\">(165,42,42)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fa8072;\">Salmon<\/td>\n<td style=\"background-color: #fa8072;\">#FA8072<\/td>\n<td style=\"background-color: #fa8072;\">(250,128,114)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e9967a;\">DarkSalmon<\/td>\n<td style=\"background-color: #e9967a;\">#E9967A<\/td>\n<td style=\"background-color: #e9967a;\">(233,150,122)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffa07a;\">LightSalmon<\/td>\n<td style=\"background-color: #ffa07a;\">#FFA07A<\/td>\n<td style=\"background-color: #ffa07a;\">(255,160,122)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ff7f50;\">Coral<\/td>\n<td style=\"background-color: #ff7f50;\">#FF7F50<\/td>\n<td style=\"background-color: #ff7f50;\">(255,127,80)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ff6347;\">Tomato<\/td>\n<td style=\"background-color: #ff6347;\">#FF6347<\/td>\n<td style=\"background-color: #ff6347;\">(255,99,71)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ff0000;\">Red<\/td>\n<td style=\"background-color: #ff0000;\">#FF0000<\/td>\n<td style=\"background-color: #ff0000;\">(255,0,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ff4500;\">OrangeRed<\/td>\n<td style=\"background-color: #ff4500;\">#FF4500<\/td>\n<td style=\"background-color: #ff4500;\">(255,69,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ff8c00;\">DarkOrange<\/td>\n<td style=\"background-color: #ff8c00;\">#FF8C00<\/td>\n<td style=\"background-color: #ff8c00;\">(255,140,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffa500;\">Orange<\/td>\n<td style=\"background-color: #ffa500;\">#FFA500<\/td>\n<td style=\"background-color: #ffa500;\">(255,165,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffd700;\">Gold<\/td>\n<td style=\"background-color: #ffd700;\">#FFD700<\/td>\n<td style=\"background-color: #ffd700;\">(255,215,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffff00;\">Yellow<\/td>\n<td style=\"background-color: #ffff00;\">#FFFF00<\/td>\n<td style=\"background-color: #ffff00;\">(255,255,0)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f0e68c;\">Khaki<\/td>\n<td style=\"background-color: #f0e68c;\">#F0E68C<\/td>\n<td style=\"background-color: #f0e68c;\">(240,230,140)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f0f8ff;\">AliceBlue<\/td>\n<td style=\"background-color: #f0f8ff;\">#F0F8FF<\/td>\n<td style=\"background-color: #f0f8ff;\">(240,248,255)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f8f8ff;\">GhostWhite<\/td>\n<td style=\"background-color: #f8f8ff;\">#F8F8FF<\/td>\n<td style=\"background-color: #f8f8ff;\">(248,248,255)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fffafa;\">Snow<\/td>\n<td style=\"background-color: #fffafa;\">#FFFAFA<\/td>\n<td style=\"background-color: #fffafa;\">(255,250,250)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fff5ee;\">Seashell<\/td>\n<td style=\"background-color: #fff5ee;\">#FFF5EE<\/td>\n<td style=\"background-color: #fff5ee;\">(255,245,238)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fffaf0;\">FloralWhite<\/td>\n<td style=\"background-color: #fffaf0;\">#FFFAF0<\/td>\n<td style=\"background-color: #fffaf0;\">(255,250,240)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f5f5f5;\">WhiteSmoke<\/td>\n<td style=\"background-color: #f5f5f5;\">#F5F5F5<\/td>\n<td style=\"background-color: #f5f5f5;\">(245,245,245)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f5f5dc;\">Beige<\/td>\n<td style=\"background-color: #f5f5dc;\">#F5F5DC<\/td>\n<td style=\"background-color: #f5f5dc;\">(245,245,220)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fdf5e6;\">OldLace<\/td>\n<td style=\"background-color: #fdf5e6;\">#FDF5E6<\/td>\n<td style=\"background-color: #fdf5e6;\">(253,245,230)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fffff0;\">Ivory<\/td>\n<td style=\"background-color: #fffff0;\">#FFFFF0<\/td>\n<td style=\"background-color: #fffff0;\">(255,255,240)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #faf0e6;\">Linen<\/td>\n<td style=\"background-color: #faf0e6;\">#FAF0E6<\/td>\n<td style=\"background-color: #faf0e6;\">(250,240,230)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fff8dc;\">Cornsilk<\/td>\n<td style=\"background-color: #fff8dc;\">#FFF8DC<\/td>\n<td style=\"background-color: #fff8dc;\">(255,248,220)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #faebd7;\">AntiqueWhite<\/td>\n<td style=\"background-color: #faebd7;\">#FAEBD7<\/td>\n<td style=\"background-color: #faebd7;\">(250,235,215)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffebcd;\">BlanchedAlmond<\/td>\n<td style=\"background-color: #ffebcd;\">#FFEBCD<\/td>\n<td style=\"background-color: #ffebcd;\">(255,235,205)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffe4c4;\">Bisque<\/td>\n<td style=\"background-color: #ffe4c4;\">#FFE4C4<\/td>\n<td style=\"background-color: #ffe4c4;\">(255,228,196)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffffe0;\">LightYellow<\/td>\n<td style=\"background-color: #ffffe0;\">#FFFFE0<\/td>\n<td style=\"background-color: #ffffe0;\">(255,255,224)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fffacd;\">LemonChiffon<\/td>\n<td style=\"background-color: #fffacd;\">#FFFACD<\/td>\n<td style=\"background-color: #fffacd;\">(255,250,205)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fafad2;\">LightGoldenrodYellow<\/td>\n<td style=\"background-color: #fafad2;\">#FAFAD2<\/td>\n<td style=\"background-color: #fafad2;\">(250,250,210)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffefd5;\">PapayaWhip<\/td>\n<td style=\"background-color: #ffefd5;\">#FFEFD5<\/td>\n<td style=\"background-color: #ffefd5;\">(255,239,213)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffdab9;\">PeachPuff<\/td>\n<td style=\"background-color: #ffdab9;\">#FFDAB9<\/td>\n<td style=\"background-color: #ffdab9;\">(255,218,185)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffe4b5;\">Moccasin<\/td>\n<td style=\"background-color: #ffe4b5;\">#FFE4B5<\/td>\n<td style=\"background-color: #ffe4b5;\">(255,228,181)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #eee8aa;\">PaleGoldenrod<\/td>\n<td style=\"background-color: #eee8aa;\">#EEE8AA<\/td>\n<td style=\"background-color: #eee8aa;\">(238,232,170)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffe4e1;\">MistyRose<\/td>\n<td style=\"background-color: #ffe4e1;\">#FFE4E1<\/td>\n<td style=\"background-color: #ffe4e1;\">(255,228,225)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #fff0f5;\">LavenderBlush<\/td>\n<td style=\"background-color: #fff0f5;\">#FFF0F5<\/td>\n<td style=\"background-color: #fff0f5;\">(255,240,245)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e6e6fa;\">Lavender<\/td>\n<td style=\"background-color: #e6e6fa;\">#E6E6FA<\/td>\n<td style=\"background-color: #e6e6fa;\">(230,230,250)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #d8bfd8;\">Thistle<\/td>\n<td style=\"background-color: #d8bfd8;\">#D8BFD8<\/td>\n<td style=\"background-color: #d8bfd8;\">(216,191,216)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f0ffff;\">Azure<\/td>\n<td style=\"background-color: #f0ffff;\">#F0FFFF<\/td>\n<td style=\"background-color: #f0ffff;\">(240,255,255)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e0ffff;\">LightCyan<\/td>\n<td style=\"background-color: #e0ffff;\">#E0FFFF<\/td>\n<td style=\"background-color: #e0ffff;\">(224,255,255)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #b0e0e6;\">PowderBlue<\/td>\n<td style=\"background-color: #b0e0e6;\">#B0E0E6<\/td>\n<td style=\"background-color: #b0e0e6;\">(176,224,230)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #AFEEEE;\">PaleTurquoise<\/td>\n<td style=\"background-color: #AFEEEE;\">#AFEEEE<\/td>\n<td style=\"background-color: #AFEEEE;\">(175,238,238)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f0fff0;\">Honeydew<\/td>\n<td style=\"background-color: #f0fff0;\">#F0FFF0<\/td>\n<td style=\"background-color: #f0fff0;\">(240,255,240)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f5fffa;\">MintCream<\/td>\n<td style=\"background-color: #f5fffa;\">#F5FFFA<\/td>\n<td style=\"background-color: #f5fffa;\">(245,255,250)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ja_imaginou_como_seria_um_website_apenas_com_cores_preto_e_branco_e_sem_a_insercao_de_multimidia\"><\/span>J\u00e1 imaginou como seria um website apenas com cores preto e branco e sem a&nbsp;inser\u00e7\u00e3o de multim\u00eddia?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Antes do surgimento do protocolo <a href=\"https:\/\/www.homehost.com.br\/blog\/internet\/o-que-e-http\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTTP<\/a> e da linguagem HTML, a navega\u00e7\u00e3o de sites era apresentada atrav\u00e9s\u00a0de uma tela similar \u00e0 do terminal, com fundo preto e fonte branca ou verde, em que a navega\u00e7\u00e3o era feita por meio do teclado. Um \u00f3timo exemplo disso \u00e9 o The Gopher Project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em 1989, o\u00a0brit\u00e2nico <a href=\"https:\/\/www.internethalloffame.org\/\/official-biography-tim-berners-lee\" target=\"_blank\" rel=\"noopener noreferrer\">Tim Berners-Lee<\/a> dava in\u00edcio a um projeto que mais tarde seria conhecido como HyperText\u00a0Markup Language, o HTML, a principal linguagem quando o assunto \u00e9 desenvolvimento web. Em 1991 surge o primeiro <a href=\"http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html\">website<\/a>, que ainda est\u00e1 online.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com o HTML, passou a ser poss\u00edvel a inser\u00e7\u00e3o de multim\u00eddia e uma melhor manipula\u00e7\u00e3o de fontes, cores e posicionamento de elementos. Por consequ\u00eancia, conforme foram lan\u00e7ando novas vers\u00f5es, o HTML foi recebendo novas funcionalidades, at\u00e9 chegar ao que conhecemos hoje, o <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\">HTML5<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-3517 size-full\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher.png\" alt=\"Tela inicial do The Gopher Project em Cores Preto e Branco, sem uso de HTML\" class=\"wp-image-3517\" width=\"444\" height=\"300\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher.png 444w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher-300x203.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher-1x1.png 1w\" sizes=\"(max-width: 444px) 100vw, 444px\" \/><figcaption class=\"wp-element-caption\">Tela inicial do The Gopher Project<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"As_cores_no_HTML_e_CSS\"><\/span>As cores no HTML e CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">No HTML e CSS, as cores podem ser definidas atrav\u00e9s de seu nome (em ingl\u00eas), atrav\u00e9s do c\u00f3digo hexadecimal ou atrav\u00e9s do seu valor RGB. Com as novas vers\u00f5es do CSS, \u00e9 poss\u00edvel tamb\u00e9m utilizar os valores RGBA, HSL e HSLA. Esses valores s\u00e3o intensidades de cores ou propriedades (como satura\u00e7\u00e3o e opacidade) que, juntos, formam uma outra cor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ent\u00e3o, ap\u00f3s compreender como as cores funcionam, \u00e9 interessante estar sempre com a tabela de cores HTML com f\u00e1cil acesso para consultar sempre que precisar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cores_Hexadecimais\"><\/span>Cores Hexadecimais<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O c\u00f3digo hexadecimal para cores consiste em seis letras ou n\u00fameros precedidos do \u201c#\u201d. Os dois primeiros elementos representam a intensidade de vermelho, o terceiro e quarto elementos representam a intensidade de verde e os dois \u00faltimos a intensidade de azul. Desta forma, o resultado final ser\u00e1 a combina\u00e7\u00e3o dessas tr\u00eas cores em diferentes intensidades, formando a cor desejada. Os valores variam entre 00 (mais escuro) at\u00e9 FF (mais claro). Por exemplo, temos o c\u00f3digo #FFFFFF, que representa a cor branca, pois tem a intensidade m\u00e1xima das tr\u00eas cores. Do mesmo modo, #FF0000 representa a cor vermelha, com intensidade m\u00e1xima de vermelho e nenhuma intensidade para verde e azul. Na tabela de cores HTML, \u00e9 poss\u00edvel encontrar mais de 100 c\u00f3digos hexadecimais das cores mais utilizadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"RGB\"><\/span>RGB<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Do mesmo modo, valor RGB significa <strong>R<\/strong>ed, <strong>G<\/strong>reen, <strong>B<\/strong>lue (vermelho, verde, azul) e sua teoria \u00e9 a mesma: a intensidade dessas tr\u00eas cores formar\u00e1 a cor final. Os RGB s\u00e3o declarados com tr\u00eas valores com escala entre 0 e 255. Dessa forma, temos o c\u00f3digo rgb(255,255,255) para a cor branca, rgb(255,0,0) para a cor vermelha e rgb(0,0,0) para a cor preta. Na tabela de cores HTML, \u00e9 poss\u00edvel encontrar mais de 100 valores RGB das cores mais utilizadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"RGBA\"><\/span>RGBA<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No sistema RGBA, \u00e9 utilizado o mesmo c\u00f3digo do sistema RGB por\u00e9m acrescenta-se um novo valor, o <strong>A<\/strong>lpha. O valor alpha significa a opacidade da cor, que varia em uma escala entre decimais de 0.0 (transparente) e 1.0 (opaco). \u00c9 muito utilizado para a sobreposi\u00e7\u00e3o de elementos, sem perder a visibilidade do elemento inferior, dando a sensa\u00e7\u00e3o de transpar\u00eancia. Por exemplo: para a cor preta com 50% de opacidade, utilizamos o rgba(0,0,0,0.5).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HSL\"><\/span>HSL<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Diferentemente, o sistema HSL representa <strong>H<\/strong>ue (tom), <strong>S<\/strong>aturation (satura\u00e7\u00e3o) e <strong>L<\/strong>ightness (luminosidade). O valor do tom \u00e9 medido em \u00e2ngulos expressos em graus. O valor de satura\u00e7\u00e3o \u00e9 medido em porcentagem, sendo 0% um tom de cinza, sem cor, e 100% a cor mais viva poss\u00edvel. O valor de luminosidade tamb\u00e9m \u00e9 expresso em porcentagem. Por exemplo: um valor igual a 100% resulta em cor branca e 0 em cor preta, sendo 50% o valor mais usual.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HSLA\"><\/span>HSLA<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Assim como no RGBA, no sistema HSLA segue o mesmo padr\u00e3o do HSL, acrescentando o valor Alpha, que representa a opacidade. Tamb\u00e9m varia numa escala entre 0.0 e 1.0.<br>\n<a name=\"topico4\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Aplicando_cores_nos_elementos_HTML\"><\/span>Aplicando cores nos elementos HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">No HTML, podemos customizar as cores nos elementos atrav\u00e9s do seu estilo, podendo ser feito na pr\u00f3pria tag, com a utiliza\u00e7\u00e3o da propriedade `style`, ou atrav\u00e9s de uma folha de estilo, seja ela interna ou externa. Ap\u00f3s a leitura, realize testes pr\u00e1ticos, utilize a tabela de cores HTML do in\u00edcio deste artigo e aplique em seus elementos.<br> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modificando_as_cores_inline_das_tags_HTML\"><\/span>Modificando as cores inline das tags HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para modificar o estilo de um elemento inline, basta acrescentar dentro da tag do elemento o atributo style e assim realizar as modifica\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo: se tivermos um elemento p e queremos alterar sua fonte para a cor azul, bastaria utilizar o c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"color: blue;\">Azul&lt;\/p><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Como resultado, teremos:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #0000ff;\">Azul<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas e se quisermos modificar tamb\u00e9m o background do elemento? Ent\u00e3o podemos utilizar a propriedade background-color para isso!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, vamos aplicar ao nosso elemento p um fundo vermelho:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"color: blue; background-color: red;\">Azul&lt;\/p><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Funciona, mas teste no verificador de contraste: azul sobre vermelho tem contraste de 2,14 : 1 \u2014 muito abaixo do m\u00ednimo de 4,5 para ser lido com conforto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Como resultado, teremos:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #0000ff; background-color: red;\">Azul<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00e1cil, n\u00e3o \u00e9?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Escolha algumas cores, atrav\u00e9s da tabela de cores HTML, e pratique!<br>\n<a name=\"topico6\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modificando_as_cores_atraves_de_uma_folha_de_estilos_CSS\"><\/span>Modificando as cores atrav\u00e9s de uma folha de estilos CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Atrav\u00e9s das tags <code>&lt;style><\/code> e <code>&lt;\/style><\/code>, podemos inserir um c\u00f3digo CSS dentro dela, ou podemos tamb\u00e9m aplicar um estilo externo. Dessa forma, fica muito mais f\u00e1cil alterar os estilos dos elementos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo, vejamos a seguinte estrutura em HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n    &lt;p&gt;Ol\u00e1 mundo&lt;\/p&gt;\n    &lt;p&gt;Ol\u00e1 mundo&lt;\/p&gt;\n    &lt;p class=\"vermelho\"&gt;Eu sou vermelho&lt;\/p&gt;\n    &lt;p class=\"azul\"&gt;Eu sou Azul&lt;\/p&gt;\n    &lt;p class=\"bgciano\"&gt;Eu tenho um Background ciano!&lt;\/p&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Como resultado inicial, teremos:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ol\u00e1 mundo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ol\u00e1 mundo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eu sou vermelho<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eu sou Azul<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eu tenho um Background ciano!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Repare que nada aconteceu, pois ainda n\u00e3o aplicamos nenhum estilo. Mas, se quisermos\u00a0aplicar a cor p\u00farpura a todos os elementos p, basta utilizar o CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p{ \n    color: #ff00ff; \n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado ser\u00e1:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff00ff;\">Ol\u00e1 mundo<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff00ff;\">Ol\u00e1 mundo<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff00ff;\">Eu sou vermelho<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff00ff;\">Eu sou Azul<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff00ff;\">Eu tenho um Background ciano!<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aplicando agora o estilo para as classes, teremos um novo resultado.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p{\n  color: #FF00FF; \n}\np.vermelho{\n  color:red;\n} \n.azul{\n  color:rgb(0,0,255);\n}\n.bgciano{\n  background-color: #00FFFF;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff00ff;\">Ol\u00e1 mundo<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff00ff;\">Ol\u00e1 mundo<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff0000;\">Eu sou vermelho<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #0000ff;\">Eu sou Azul<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"color: #ff00ff; background-color: #00ffff;\">Eu tenho um Background ciano!<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Da mesma forma, voc\u00ea tamb\u00e9m pode aplicar essa t\u00e9cnica para diversos elementos e propriedades, gerando cores para os textos e background do seu site. Contudo, para criar um layout bonito, \u00e9&nbsp;importante entender como as cores funcionam e interagem entre si. Mas se voc\u00ea n\u00e3o puder se aprofundar no estudo da Teoria das Cores, h\u00e1 ferramentas que podem auxiliar.<br>\n<a name=\"topico7\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ferramentas_para_utilizar_em_conjunto_com_a_tabela_de_Cores_HTML_e_CSS\"><\/span>Ferramentas para utilizar em conjunto com a tabela de Cores HTML e CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para converter c\u00f3digos, testar o contraste e gerar o c\u00f3digo pronto, use o conversor no in\u00edcio deste artigo. Vale a pena utilizar algumas paletas de cores; veja abaixo algumas sugest\u00f5es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.materialui.co\/colors\">Material UI Colors<\/a>: Neste site \u00e9 poss\u00edvel encontrar as cores padr\u00e3o mais utilizadas no Material Design. S\u00e3o vibrantes, por\u00e9m sofisticadas e modernas, muito utilizadas para produ\u00e7\u00e3o de websites hoje em dia. Ao clicar em cima da cor, a ferramenta j\u00e1 copia o c\u00f3digo hexadecimal automaticamente para voc\u00ea, podendo colar diretamente no arquivo HTML e CSS! Vale a pena dar uma olhada;<\/li>\n\n\n\n<li><a href=\"https:\/\/colorhunt.co\/\">Color Hunt:<\/a> neste site, \u00e9 poss\u00edvel encontrar diversas paletas de cores, feitas tanto por profissionais como por amadores. Voc\u00ea pode selecionar as que mais te agradem e utilizar.<\/li>\n\n\n\n<li><a href=\"https:\/\/color.adobe.com\/pt\/create\/color-wheel\/\">Adobe Color<\/a>: esta ferramenta pertence \u00e0 Adobe, \u00e9 muito \u00fatil para gerar combina\u00e7\u00f5es de cores. Ao clicar em uma cor, ela j\u00e1 seleciona as cores que se enquadram nela. Vale muito a pena utilizar essa ferramenta!<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ap\u00f3s escolher as cores com a ajuda das ferramentas acima, voc\u00ea pode utilizar a nossa tabela de cores HTML para copiar o c\u00f3digo hexadecimal, nome ou valores RGB diretamente para seu c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Durante o desenvolvimento de um website, existem diversos fatores que interferem diretamente na qualidade dele e em como o usu\u00e1rio receber\u00e1 as informa\u00e7\u00f5es do conte\u00fado. Uma das coisas mais importantes para a cria\u00e7\u00e3o de um layout \u00e9 a escolha certa das cores a utilizar. Por esta raz\u00e3o, ter \u00e0 m\u00e3o ferramentas que facilitem o processo, [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[203,6],"tags":[2622,2624,252,2621,2623,241],"class_list":["post-3515","post","type-post","status-publish","format-standard","hentry","category-internet","category-tutoriais","tag-cores","tag-css","tag-desenvolvimento","tag-html","tag-tabeladecores","tag-tutoriais"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores | Homehost<\/title>\n<meta name=\"description\" content=\"As 148 cores com nome do HTML e CSS, com c\u00f3digos HEX e RGB corretos \u2014 e um conversor que testa o contraste e gera o c\u00f3digo pronto para a tag.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores | Homehost\" \/>\n<meta property=\"og:description\" content=\"As 148 cores com nome do HTML e CSS, com c\u00f3digos HEX e RGB corretos \u2014 e um conversor que testa o contraste e gera o c\u00f3digo pronto para a tag.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-10T21:04:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-06T20:42:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher.png\" \/>\n\t<meta property=\"og:image:width\" content=\"444\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/\"},\"author\":{\"name\":\"Rafael Marques\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"headline\":\"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores\",\"datePublished\":\"2023-06-10T21:04:49+00:00\",\"dateModified\":\"2026-10-06T20:42:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/\"},\"wordCount\":2091,\"publisher\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/gopher.png\",\"keywords\":[\"cores\",\"css\",\"desenvolvimento\",\"html\",\"tabeladecores\",\"tutoriais\"],\"articleSection\":[\"Internet\",\"Tutoriais\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/\",\"name\":\"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores | Homehost\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/gopher.png\",\"datePublished\":\"2023-06-10T21:04:49+00:00\",\"dateModified\":\"2026-10-06T20:42:15+00:00\",\"description\":\"As 148 cores com nome do HTML e CSS, com c\u00f3digos HEX e RGB corretos \u2014 e um conversor que testa o contraste e gera o c\u00f3digo pronto para a tag.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/gopher.png\",\"contentUrl\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/gopher.png\",\"width\":444,\"height\":300,\"caption\":\"Tela inicial do The Gropher Project\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/tabela-de-cores-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\",\"name\":\"Homehost\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/logo-detalhes.png\",\"contentUrl\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/logo-detalhes.png\",\"width\":150,\"height\":48,\"caption\":\"Homehost\"},\"image\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Homehost\\\/\",\"https:\\\/\\\/x.com\\\/Homehost\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/rafamarquesrmb\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/rafamarquesrmb\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores | Homehost","description":"As 148 cores com nome do HTML e CSS, com c\u00f3digos HEX e RGB corretos \u2014 e um conversor que testa o contraste e gera o c\u00f3digo pronto para a tag.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores | Homehost","og_description":"As 148 cores com nome do HTML e CSS, com c\u00f3digos HEX e RGB corretos \u2014 e um conversor que testa o contraste e gera o c\u00f3digo pronto para a tag.","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-06-10T21:04:49+00:00","article_modified_time":"2026-10-06T20:42:15+00:00","og_image":[{"width":444,"height":300,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher.png","type":"image\/png"}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Rafael Marques","Est. tempo de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#article","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/"},"author":{"name":"Rafael Marques","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"headline":"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores","datePublished":"2023-06-10T21:04:49+00:00","dateModified":"2026-10-06T20:42:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/"},"wordCount":2091,"publisher":{"@id":"https:\/\/www.homehost.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher.png","keywords":["cores","css","desenvolvimento","html","tabeladecores","tutoriais"],"articleSection":["Internet","Tutoriais"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/","name":"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher.png","datePublished":"2023-06-10T21:04:49+00:00","dateModified":"2026-10-06T20:42:15+00:00","description":"As 148 cores com nome do HTML e CSS, com c\u00f3digos HEX e RGB corretos \u2014 e um conversor que testa o contraste e gera o c\u00f3digo pronto para a tag.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/gopher.png","width":444,"height":300,"caption":"Tela inicial do The Gropher Project"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Tabela de cores HTML: c\u00f3digos HEX, RGB e conversor de cores"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","publisher":{"@id":"https:\/\/www.homehost.com.br\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.homehost.com.br\/blog\/#organization","name":"Homehost","url":"https:\/\/www.homehost.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2022\/10\/logo-detalhes.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2022\/10\/logo-detalhes.png","width":150,"height":48,"caption":"Homehost"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Homehost\/","https:\/\/x.com\/Homehost"]},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3515"}],"version-history":[{"count":44,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3515\/revisions"}],"predecessor-version":[{"id":18419,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3515\/revisions\/18419"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}