{"id":181,"date":"2026-10-03T06:12:52","date_gmt":"2026-10-03T03:12:52","guid":{"rendered":"https:\/\/wpcalc.com\/es\/?p=181"},"modified":"2026-10-03T06:12:52","modified_gmt":"2026-10-03T03:12:52","slug":"conversor-de-colores","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/es\/herramientas-web\/conversor-de-colores\/","title":{"rendered":"Conversor de colores"},"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 colores HEX \u21c4 RGB \u21c4 HSL<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"181\" data-favorite-title=\"Conversor de colores\" data-favorite-url=\"https:\/\/wpcalc.com\/es\/herramientas-web\/conversor-de-colores\/\" data-favorite-excerpt=\"Introduce un nombre o c\u00f3digo de color CSS para ver sus valores RGB, HEX, HSL, HWB, CMYK y NCol, junto con una vista previa del color.\" aria-label=\"A\u00f1adir a 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\/es\/herramientas-web\/conversor-de-colores\/\" method=\"POST\" class=\"calculator\" id=\"calculator-181\" data-post=\"181\"><fieldset class=\"fieldset-input\"><legend class=\"sr-only\">Campos de entrada<\/legend><div class=\"field is-single\" id=\"input-1\"><label for=\"field-1\">Color<\/label><input type=\"text\" name=\"color\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"p. ej., red, #f00, rgb(255,0,0)\" step=\"any\" value=\"skyblue\"\/><small id=\"calc-info-1\">Introduce un nombre de color o cualquier c\u00f3digo de color CSS.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Recalcular\" id=\"calculate-button\" data-post=\"181\">Calcular<\/button><button type=\"reset\">Restablecer<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Calcular autom\u00e1ticamente<\/label><small>Si est\u00e1 activado, el resultado se actualizar\u00e1 autom\u00e1ticamente al cambiar cualquier 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> Tus resultados<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Nombre<\/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>Color<\/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 enlace a 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>Dejar un comentario<\/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=\"181\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">\u00bfQu\u00e9 te ha parecido este 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\">Me gusta <\/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\">Inexacto <\/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 del conversor de colores<\/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>Donde:<\/strong><\/p>\n<ul>\n<li>\\(h_1,\\ldots,h_6\\) \u2014 los seis d\u00edgitos de un color HEX, le\u00eddos como valores de 0 a 15; las letras de la A a la F representan del 10 al 15.<\/li>\n<li>\\(R\\), \\(G\\) y \\(B\\) \u2014 los valores de los canales rojo, verde y azul, cada uno de 0 a 255.<\/li>\n<\/ul>\n<p>Esta f\u00f3rmula convierte un color HEX de seis d\u00edgitos a RGB. La calculadora tambi\u00e9n acepta otros formatos de color compatibles y realiza conversiones entre ellos.<\/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 colores \u2013 Ejemplo de c\u00e1lculo<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Ejemplo:<\/strong> la entrada predeterminada es <code>skyblue<\/code>. Este color con nombre corresponde a <code>#87CEEB<\/code>, por lo que sus pares de d\u00edgitos HEX pueden convertirse a 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> tiene el valor HEX <code>#87CEEB<\/code> y el valor RGB <code>rgb(135, 206, 235)<\/code>. Sus valores HSL son aproximadamente 197\u00b0 de tono, 71&nbsp;% de saturaci\u00f3n y 73&nbsp;% de luminosidad.<\/p>\n<p>\n\r\n<\/section>\n<h2>C\u00f3mo usar el conversor de colores<\/h2>\n<ol>\n<li>Introduce un color en el campo <strong>Color<\/strong>. Puedes empezar con el valor predeterminado <code>skyblue<\/code>, escribir un nombre de color CSS como <code>red<\/code>, o introducir un c\u00f3digo como <code>#f00<\/code> o <code>rgb(255, 0, 0)<\/code>.<\/li>\n<li>Comprueba el resultado de <strong>Color<\/strong> para ver una vista previa de la entrada interpretada.<\/li>\n<li>Copia el formato que necesites de <strong>Nombre<\/strong>, <strong>RGB<\/strong>, <strong>HEX<\/strong>, <strong>HSL<\/strong>, <strong>HWB<\/strong>, <strong>CMYK<\/strong> o <strong>NCol<\/strong>.<\/li>\n<\/ol>\n<p>Si en <strong>Nombre<\/strong> aparece \u00absin nombre\u00bb, el color no tiene un nombre coincidente en la lista de colores con nombre del conversor. Los resultados num\u00e9ricos pueden seguir representando un color v\u00e1lido.<\/p>\n<h2>Qu\u00e9 significan los formatos de color<\/h2>\n<p>Un color digital puede describirse de varias maneras sin cambiar su apariencia. <strong>HEX<\/strong> escribe el rojo, el verde y el azul como pares de d\u00edgitos hexadecimales: <code>#87CEEB<\/code> significa rojo 87, verde CE y azul EB en base 16. <strong>RGB<\/strong> expresa esos mismos canales como n\u00fameros decimales de 0 a 255. Si quieres resolver por separado la aritm\u00e9tica en base 16, usa el <a href=\"https:\/\/wpcalc.com\/es\/herramientas-web\/convertidor-hexadecimal\/\">Conversor hexadecimal<\/a>; convierte n\u00fameros, no valores completos de color CSS.<\/p>\n<p><strong>HSL<\/strong> describe el tono, la saturaci\u00f3n y la luminosidad. El tono es una posici\u00f3n en la rueda de color, normalmente expresada en grados; la saturaci\u00f3n describe la intensidad del color, y la luminosidad va del negro hacia el blanco. <strong>HWB<\/strong> utiliza en su lugar tono, blancura y negrura. Estos formatos pueden ser m\u00e1s f\u00e1ciles de leer cuando comparas tonalidades o ajustas un color a ojo. RGB y HEX suelen ser m\u00e1s pr\u00e1cticos cuando una especificaci\u00f3n exige valores exactos de canal.<\/p>\n<p><strong>CMYK<\/strong> proporciona valores de cian, magenta, amarillo y negro derivados del color de pantalla. <strong>NCol<\/strong> es una notaci\u00f3n basada en el tono que ofrece el conversor; no se usa tanto en CSS como HEX, RGB o HSL. El formato de salida cambia c\u00f3mo se escribe un color, no el color subyacente elegido. Peque\u00f1as diferencias en los porcentajes mostrados pueden deberse al redondeo.<\/p>\n<h2>L\u00edmites pr\u00e1cticos y consejos<\/h2>\n<p>El conversor necesita una entrada que su analizador de colores reconozca. Los nombres de color CSS est\u00e1ndar y los c\u00f3digos de color CSS habituales son buenos puntos de partida. Un c\u00f3digo HEX de tres d\u00edgitos es una abreviatura: por ejemplo, <code>#f00<\/code> se expande a <code>#ff0000<\/code>. Las letras HEX no distinguen may\u00fasculas de min\u00fasculas, as\u00ed que <code>#87ceeb<\/code> y <code>#87CEEB<\/code> representan el mismo color.<\/p>\n<p>Algunas entradas incluyen un valor alfa, que controla la transparencia. Para las entradas reconocidas con alfa, los resultados RGB, HSL, HWB y NCol usan formas con alfa. Comprueba cada resultado antes de copiarlo en otra aplicaci\u00f3n: no todos los formatos enumerados describen la transparencia de la misma manera. La vista previa tambi\u00e9n puede verse diferente sobre otro fondo cuando un color es parcialmente transparente.<\/p>\n<p>El CMYK de aqu\u00ed es una conversi\u00f3n matem\u00e1tica a partir de un color digital, no una conversi\u00f3n con perfil de impresi\u00f3n. La apariencia impresa depende de la impresora, las tintas, el papel y los ajustes de gesti\u00f3n del color, as\u00ed que usa un flujo de trabajo de impresi\u00f3n adecuado cuando el color exacto de producci\u00f3n sea importante. Asimismo, la apariencia de un color en pantalla depende del monitor y de sus ajustes; la coincidencia de valores num\u00e9ricos por s\u00ed sola no puede garantizar una apariencia id\u00e9ntica en todos los dispositivos.<\/p>\n<p>Si colocas un color HEX en un par\u00e1metro de consulta de una URL, recuerda que <code>#<\/code> tiene un significado especial en las URL. Usa el <a href=\"https:\/\/wpcalc.com\/es\/herramientas-web\/codificador-de-url\/\">Codificador de URL<\/a> para codificar el valor cuando sea necesario.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduce un nombre o c\u00f3digo de color CSS para ver sus valores RGB, HEX, HSL, HWB, CMYK y NCol, junto con una vista previa del color.<\/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":[37],"tags":[38],"class_list":["post-181","post","type-post","status-publish","format-standard","hentry","category-herramientas-web","tag-herramientas-conversion"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/posts\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":5,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":5826,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/posts\/181\/revisions\/5826"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/es\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}