{"id":185,"date":"2026-10-03T17:27:56","date_gmt":"2026-10-03T16:27:56","guid":{"rendered":"https:\/\/wpcalc.com\/pt\/conversor-de-cores\/"},"modified":"2026-10-03T17:27:56","modified_gmt":"2026-10-03T16:27:56","slug":"conversor-de-cores","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/pt\/ferramentas-web\/conversor-de-cores\/","title":{"rendered":"Conversor de Cores"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">Conversor de Cores HEX \u21c4 RGB \u21c4 HSL<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"185\" data-favorite-title=\"Conversor de Cores\" data-favorite-url=\"https:\/\/wpcalc.com\/pt\/ferramentas-web\/conversor-de-cores\/\" data-favorite-excerpt=\"Introduza um nome ou c\u00f3digo de cor CSS para ver os seus valores RGB, HEX, HSL, HWB, CMYK e NCol, juntamente com uma pr\u00e9-visualiza\u00e7\u00e3o da cor.\" aria-label=\"Adicionar aos favoritos\" data-favorite-icon=\"icon icon-conversion\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/pt\/ferramentas-web\/conversor-de-cores\/\" method=\"POST\" class=\"calculator\" id=\"calculator-185\" data-post=\"185\"><fieldset class=\"fieldset-input\"><legend class=\"sr-only\">Campos de entrada<\/legend><div class=\"field is-single\" id=\"input-1\"><label for=\"field-1\">Cor<\/label><input type=\"text\" name=\"cor\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"ex.: red, #f00, rgb(255,0,0)\" step=\"any\" value=\"skyblue\"\/><small id=\"calc-info-1\">Insira um nome de cor ou qualquer c\u00f3digo de cor CSS.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Recalcular\" id=\"calculate-button\" data-post=\"185\">Calcular<\/button><button type=\"reset\">Redefinir<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Calcular automaticamente<\/label><small>Se ativado, o resultado \u00e9 atualizado automaticamente quando voc\u00ea altera qualquer valor.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> Seus resultados<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Nome<\/span><\/span><span class=\"field-value\" id=\"result-1\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>RGB<\/span><\/span><span class=\"field-value\" id=\"result-2\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>HEX<\/span><\/span><span class=\"field-value\" id=\"result-3\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>HSL<\/span><\/span><span class=\"field-value\" id=\"result-4\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>HWB<\/span><\/span><span class=\"field-value\" id=\"result-5\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>CMYK<\/span><\/span><span class=\"field-value\" id=\"result-6\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-7\"><span class=\"field-title\"><span>NCol<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-8\"><span class=\"field-title\"><span>Cor<\/span><\/span><span class=\"field-value\" id=\"result-8\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copiar resultado\" aria-label=\"Copiar resultado\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">Copiar link para este c\u00e1lculo<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>Deixar um coment\u00e1rio<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"185\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">O que voc\u00ea achou deste resultado?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">Curti <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">\u00datil <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">Confuso <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">Decepcionado <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">Impreciso <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>F\u00f3rmula do Conversor de Cores<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">F\u00f3rmula<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[R=16h_1+h_2,\\qquad G=16h_3+h_4,\\qquad B=16h_5+h_6\\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>Onde:<\/strong><\/p>\n<ul>\n<li>\\(h_1,\\ldots,h_6\\) \u2014 os seis d\u00edgitos de uma cor HEX, lidos como valores de 0 a 15; A at\u00e9 F representam 10 at\u00e9 15.<\/li>\n<li>\\(R\\), \\(G\\) e \\(B\\) \u2014 os valores dos canais vermelho, verde e azul, cada um de 0 a 255.<\/li>\n<\/ul>\n<p>Esta f\u00f3rmula converte uma cor HEX de seis d\u00edgitos para RGB. A calculadora tamb\u00e9m aceita outros formatos de cor suportados e faz a convers\u00e3o entre eles.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-2\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>Conversor de Cores \u2013 Exemplo de C\u00e1lculo<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Exemplo:<\/strong> a entrada predefinida \u00e9 <code>skyblue<\/code>. Esta cor nomeada corresponde a <code>#87CEEB<\/code>, portanto os seus pares de d\u00edgitos HEX podem ser convertidos para RGB.<\/p>\n<p>\\[R=8(16)+7=135,\\qquad G=12(16)+14=206,\\qquad B=14(16)+11=235\\]<\/p>\n<p><strong>Resultado:<\/strong> <code>skyblue<\/code> tem o valor HEX <code>#87CEEB<\/code> e o valor RGB <code>rgb(135, 206, 235)<\/code>. Os seus valores HSL s\u00e3o aproximadamente 197\u00b0 de matiz, 71% de satura\u00e7\u00e3o e 73% de luminosidade.<\/p>\n<p>\n\r\n<\/section>\n<h2>Como usar o Conversor de Cores<\/h2>\n<ol>\n<li>Introduza uma cor no campo <strong>Cor<\/strong>. Pode come\u00e7ar com a predefini\u00e7\u00e3o <code>skyblue<\/code>, escrever um nome de cor CSS como <code>red<\/code>, ou introduzir um c\u00f3digo como <code>#f00<\/code> ou <code>rgb(255,0,0)<\/code>.<\/li>\n<li>Verifique o resultado <strong>Cor<\/strong> para obter uma pr\u00e9-visualiza\u00e7\u00e3o visual da entrada interpretada.<\/li>\n<li>Copie o formato de que necessita em <strong>Nome<\/strong>, <strong>RGB<\/strong>, <strong>HEX<\/strong>, <strong>HSL<\/strong>, <strong>HWB<\/strong>, <strong>CMYK<\/strong> ou <strong>NCol<\/strong>.<\/li>\n<\/ol>\n<p>Se <strong>Nome<\/strong> indicar \u201csem nome\u201d, a cor n\u00e3o tem um nome correspondente na lista de cores nomeadas do conversor. Os resultados num\u00e9ricos ainda podem representar uma cor v\u00e1lida.<\/p>\n<h2>O que significam os formatos de cor<\/h2>\n<p>Uma cor digital pode ser descrita de v\u00e1rias formas sem alterar o seu aspecto. O <strong>HEX<\/strong> escreve o vermelho, o verde e o azul como pares de d\u00edgitos hexadecimais: <code>#87CEEB<\/code> significa vermelho 87, verde CE e azul EB na base 16. O <strong>RGB<\/strong> expressa esses mesmos canais como n\u00fameros decimais de 0 a 255. Se quiser resolver separadamente a aritm\u00e9tica na base 16, use o <a href=\"https:\/\/wpcalc.com\/pt\/ferramentas-web\/conversor-de-hexadecimal\/\">Conversor Hexadecimal<\/a>; ele converte n\u00fameros, n\u00e3o valores completos de cor CSS.<\/p>\n<p>O <strong>HSL<\/strong> descreve o matiz, a satura\u00e7\u00e3o e a luminosidade. O matiz \u00e9 uma posi\u00e7\u00e3o numa roda de cores, normalmente expressa em graus; a satura\u00e7\u00e3o descreve a intensidade da cor, e a luminosidade vai do preto para o branco. O <strong>HWB<\/strong> usa, em vez disso, matiz, brancura e negrura. Estes formatos podem ser mais f\u00e1ceis de ler quando se comparam tons ou se ajusta uma cor a olho. O RGB e o HEX s\u00e3o muitas vezes mais pr\u00e1ticos quando uma especifica\u00e7\u00e3o exige valores exatos dos canais.<\/p>\n<p>O <strong>CMYK<\/strong> fornece valores de ciano, magenta, amarelo e preto derivados da cor na tela. O <strong>NCol<\/strong> \u00e9 uma nota\u00e7\u00e3o baseado no matiz fornecido pelo conversor; n\u00e3o \u00e9 t\u00e3o comum em CSS como o HEX, o RGB ou o HSL. O formato de sa\u00edda altera a forma como uma cor \u00e9 escrita, n\u00e3o a cor subjacente escolhida. Pequenas diferen\u00e7as nas percentagens apresentadas podem resultar de arredondamentos.<\/p>\n<h2>Limita\u00e7\u00f5es pr\u00e1ticas e dicas<\/h2>\n<p>O conversor necessita de uma entrada que o seu analisador de cores reconhe\u00e7a. Os nomes de cores CSS padr\u00e3o e os c\u00f3digos de cor comuns em estilo CSS s\u00e3o bons pontos de partida. Um c\u00f3digo HEX de tr\u00eas d\u00edgitos \u00e9 uma abreviatura: por exemplo, <code>#f00<\/code> expande-se para <code>#ff0000<\/code>. Os c\u00f3digos HEX n\u00e3o distinguem mai\u00fasculas de min\u00fasculas, pelo que <code>#87ceeb<\/code> e <code>#87CEEB<\/code> representam a mesma cor.<\/p>\n<p>Algumas entradas incluem um valor alfa, que controla a transpar\u00eancia. Para entradas reconhecidas com alfa, os resultados RGB, HSL, HWB e NCol usam formas com alfa. Verifique cada resultado antes de o copiar para outra aplica\u00e7\u00e3o: nem todos os formatos listados descrevem a transpar\u00eancia da mesma forma. A pr\u00e9-visualiza\u00e7\u00e3o tamb\u00e9m pode parecer diferente sobre um fundo diferente quando uma cor \u00e9 parcialmente transparente.<\/p>\n<p>O CMYK aqui \u00e9 uma convers\u00e3o matem\u00e1tica a partir de uma cor digital, n\u00e3o uma convers\u00e3o de perfil de impress\u00e3o. O aspeto impresso depende da impressora, das tintas, do papel e das defini\u00e7\u00f5es de gest\u00e3o de cor, por isso use um fluxo de trabalho de impress\u00e3o adequado quando a exatid\u00e3o da cor na produ\u00e7\u00e3o \u00e9 importante. Da mesma forma, o aspecto de uma cor na tela depende do monitor e das suas defini\u00e7\u00f5es; a correspond\u00eancia de valores num\u00e9ricos por si s\u00f3 n\u00e3o pode garantir um aspecto id\u00eantico em todos os dispositivos.<\/p>\n<p>Se colocar uma cor HEX num par\u00e2metro de consulta de URL, lembre-se de que <code>#<\/code> tem um significado especial nos URLs. Use o <a href=\"https:\/\/wpcalc.com\/pt\/ferramentas-web\/codificador-de-url\/\">Codificador de URL<\/a> para codificar o valor quando necess\u00e1rio.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduza um nome ou c\u00f3digo de cor CSS para ver os seus valores RGB, HEX, HSL, HWB, CMYK e NCol, juntamente com uma pr\u00e9-visualiza\u00e7\u00e3o da cor.<\/p>\n","protected":false},"author":3168,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[28],"class_list":["post-185","post","type-post","status-publish","format-standard","hentry","category-ferramentas-web","tag-ferramentas-de-conversao"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/posts\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":2,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":2898,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/posts\/185\/revisions\/2898"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/pt\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}