{"id":78897,"date":"2019-12-18T19:41:04","date_gmt":"2019-12-18T18:41:04","guid":{"rendered":"https:\/\/ignaciosantiago.com\/?p=78897"},"modified":"2022-05-24T14:15:09","modified_gmt":"2022-05-24T12:15:09","slug":"convertir-codigos-de-colores","status":"publish","type":"post","link":"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/","title":{"rendered":"21 Recursos para CONVERTIR C\u00f3digos de COLORES"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><p>\u00bfEst\u00e1s eligiendo la <a href=\"https:\/\/ignaciosantiago.com\/combinacion-paletas-de-colores\/\" target=\"_blank\" rel=\"noopener noreferrer\">paleta de colores<\/a> de tu sitio web o <a href=\"https:\/\/ignaciosantiago.com\/servicios\/diseno-logotipos-personalizados\" target=\"_blank\" rel=\"noopener noreferrer\">logotipo<\/a> y te han dado un <strong>c\u00f3digo de color<\/strong> que no sabes lo que es? \u00bfHEX, CMYK, HTML, HSL, HSLA, RBG, RGBA o Pantone? \u00bfQuieres aprender a <strong>convertir cualquier c\u00f3digo de color<\/strong>? \u00a1Est\u00e1s en el sitio correcto! Aunque seguro que ya lo sabr\u00e1s, la combinaci\u00f3n de colores juega un papel muy importante en dise\u00f1o gr\u00e1fico y web, ya que a\u00f1ade un <strong>estilo propio<\/strong> y <strong>reconocible<\/strong> que te hace diferente. De hecho, cualquier sitio web, logo o dise\u00f1o que tenga bien combinados los colores hacen que luzcan mucho mejor y que sean <strong>m\u00e1s atractivas<\/strong> para los usuarios. En esta gu\u00eda te ense\u00f1o a entender la teor\u00eda del color y las mejores herramientas para convertir c\u00f3digos de colores y saber cuales son los m\u00e1s adecuados para tu proyecto.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-79143\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4.jpg\" alt=\"mejores apps herramientas online convertir codigos colores html rgb rgba hsl hsla hex cmyk pantone hsv hwb\" width=\"1200\" height=\"600\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4-150x75.jpg 150w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4-200x100.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4-400x200.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4-600x300.jpg 600w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4-768x384.jpg 768w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4-800x400.jpg 800w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4-900x450.jpg 900w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-4.jpg 1200w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>\u00a1Existe un problema! Existen muchos tipos de c\u00f3digos de colores (por no hablar de los esquemas de colores y el significado de cada uno) y es muy importante que sepas reconocerlos y convertirlos. La idea es que aprendas a manejarte en el mundo dise\u00f1o gr\u00e1fico y web <strong>desde la perspectiva del color<\/strong>. Puedes que no parezca gran cosa, pero saber <strong>elegir, combinar e implementar los colores<\/strong> el cualquier dise\u00f1o puede suponer una diferencia enorme en su \u00e9xito. No s\u00f3lo se trata de elegir un color y aplicarlo a tu proyecto, sino de saber<strong> con qu\u00e9 colores debes conjuntarlos<\/strong> (hay colores que no se llevan bien con otros), conocer el c\u00f3digo de esos colores y poder convertirlo a cualquier otro c\u00f3digo o formato. Por ello, he hecho un listado con las <strong>mejores herramientas online para convertir colores<\/strong> que utilizan los dise\u00f1adores.<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-1 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_50 counter-hierarchy ez-toc-counter ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">&Iacute;ndice de contenidos<\/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:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#la-importancia-de-definir-los-colores-de-tu-marca-correctamente\" title=\"La importancia de definir los colores de tu marca correctamente\">La importancia de definir los colores de tu marca correctamente<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#propiedades-a-tener-en-cuenta-antes-de-generar-cualquier-codigo-de-color\" title=\"Propiedades a tener en cuenta antes de generar cualquier c\u00f3digo de color\">Propiedades a tener en cuenta antes de generar cualquier c\u00f3digo de color<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#alpha-canal-alpha\" title=\"Alpha (canal Alpha)\">Alpha (canal Alpha)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#brightness-luminosidad\" title=\"Brightness (Luminosidad)\">Brightness (Luminosidad)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#tono-hue\" title=\"Tono (Hue)\">Tono (Hue)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#sombra-shade\" title=\"Sombra (Shade)\">Sombra (Shade)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#tinte-tint\" title=\"Tinte (Tint)\">Tinte (Tint)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#saturacion-saturation\" title=\"Saturaci\u00f3n (Saturation)\">Saturaci\u00f3n (Saturation)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#valor-value\" title=\"Valor (Value)\">Valor (Value)<\/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:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#tipos-de-codigos-de-colores-habituales-en-diseno-grafico-y-web\" title=\"Tipos de c\u00f3digos de colores habituales en dise\u00f1o gr\u00e1fico y web\">Tipos de c\u00f3digos de colores habituales en dise\u00f1o gr\u00e1fico y web<\/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:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#rgb-red-green-blue\" title=\"RGB (Red, Green, Blue)\">RGB (Red, Green, Blue)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#rgba-red-green-blue-alpha\" title=\"RGBA (Red, Green, Blue, Alpha)\">RGBA (Red, Green, Blue, Alpha)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#hex-hexadecimal-o-html\" title=\"HEX (Hexadecimal) o HTML\">HEX (Hexadecimal) o HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#hsl-hue-saturation-lightness\" title=\"HSL (Hue, Saturation, Lightness)\">HSL (Hue, Saturation, Lightness)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#hsla-hue-saturation-lightness-alpha\" title=\"HSLA (Hue, Saturation, Lightness, Alpha)\">HSLA (Hue, Saturation, Lightness, Alpha)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#hsv-hue-saturation-value\" title=\"HSV (Hue, Saturation, Value)\">HSV (Hue, Saturation, Value)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#hwb-hue-whiteness-blackness\" title=\"HWB (Hue, Whiteness, Blackness)\">HWB (Hue, Whiteness, Blackness)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#cmyk-cyan-magenta-yellow-black\" title=\"CMYK (Cyan, Magenta, Yellow, Black)\">CMYK (Cyan, Magenta, Yellow, Black)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#pantone\" title=\"Pantone\">Pantone<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#mejores-apps-y-paginas-para-convertir-codigos-de-color\" title=\"Mejores apps y p\u00e1ginas para convertir c\u00f3digos de color\">Mejores apps y p\u00e1ginas para convertir c\u00f3digos de color<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#paletton\" title=\"Paletton\">Paletton<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#w3-schools\" title=\"W3 Schools\">W3 Schools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#coolors\" title=\"Coolors\">Coolors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#adobe-color\" title=\"Adobe Color\">Adobe Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#colorexplorer\" title=\"ColorExplorer\">ColorExplorer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#colorhunter\" title=\"ColorHunter\">ColorHunter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#color-picker-jquery\" title=\"Color Picker Jquery\">Color Picker Jquery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#copaso\" title=\"Copaso\">Copaso<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#color-spire\" title=\"Color Spire\">Color Spire<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#colorzilla\" title=\"ColorZilla\">ColorZilla<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#google-color-picker\" title=\"Google Color Picker\">Google Color Picker<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#hailpixel\" title=\"HailPixel\">HailPixel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#herramienta-seleccion-color\" title=\"Herramienta Selecci\u00f3n Color\">Herramienta Selecci\u00f3n Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#hsl-picker\" title=\"HSL Picker\">HSL Picker<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#html-color-codes\" title=\"HTML Color Codes\">HTML Color Codes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#image-color-picker\" title=\"Image Color Picker\">Image Color Picker<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#just-color-picker\" title=\"Just Color Picker\">Just Color Picker<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#web-fx\" title=\"Web FX\">Web FX<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/ignaciosantiago.com\/convertir-codigos-de-colores\/#conclusion-convierte-cualquier-codigo-de-color-para-cualquier-diseno\" title=\"Conclusi\u00f3n: Convierte cualquier c\u00f3digo de color para cualquier dise\u00f1o\">Conclusi\u00f3n: Convierte cualquier c\u00f3digo de color para cualquier dise\u00f1o<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"la-importancia-de-definir-los-colores-de-tu-marca-correctamente\"><\/span>La importancia de definir los colores de tu marca correctamente<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-2\"><p>En cualquier <a href=\"https:\/\/ignaciosantiago.com\/manual-de-identidad-corporativa\/\" target=\"_blank\" rel=\"noopener noreferrer\">manual de identidad corporativa<\/a>, definir una <strong>paleta de colores<\/strong> no s\u00f3lo es muy importante, sino que har\u00e1 a tu marca mucho m\u00e1s <strong>consistente, coherente y\u00a0diferente<\/strong>. La mayor\u00eda de las marcas eligen 2 o menos colores principales y no se alejan demasiado de los<strong>\u00a0tonos de color de su logotipo<\/strong>. Para ello, es una buena idea elegir un<strong>\u00a0color claro para los fondos<\/strong>, un<strong>\u00a0color m\u00e1s oscuro para el texto<\/strong>, un<strong>\u00a0tono neutro<\/strong>\u00a0y tambi\u00e9n\u00a0<strong>uno que llame mucho la atenci\u00f3n<\/strong>.<\/p>\n<p>Tal y como hace\u00a0<a href=\"https:\/\/www.youtube.com\/intl\/es\/yt\/about\/brand-resources\/#logos-icons-colors\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube<\/a>\u00a0(o yo mismo en mi p\u00e1gina de\u00a0<a href=\"https:\/\/ignaciosantiago.com\/branding\/\" target=\"_blank\" rel=\"noopener noreferrer\">branding<\/a>)\u00a0con el manual de marca,<strong>\u00a0define\u00a0diferentes colores e int\u00e9gralos con tu marca<\/strong>. Por ejemplo, si tengo una empresa dedicada a los productos ecol\u00f3gicos, te viene fenomenal el verde (que es el color que todo el mundo espera ver en este tipo de productos), pero podr\u00eda\u00a0<strong>complementarlo<\/strong>\u00a0con un amarillo o un azul. Aseg\u00farate de incluir los colores de tu marca en la gu\u00eda de estilo y la<strong>\u00a0informaci\u00f3n necesaria para reproducir esos colores con precisi\u00f3n<\/strong>, donde quiera que vaya su mensaje de marca. Estos es lo que debes incluir:<\/p>\n<\/div><ul style=\"--awb-size:15px;--awb-line-height:25.5px;--awb-icon-width:25.5px;--awb-icon-height:25.5px;--awb-icon-margin:10.5px;--awb-content-margin:36px;--awb-circlecolor:var(--awb-color3);--awb-circle-yes-font-size:13.2px;\" class=\"fusion-checklist fusion-checklist-1 fusion-checklist-default type-icons\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\"><i class=\"fusion-li-icon icon-customcheck\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p><strong>Combinaci\u00f3n de colores<\/strong>: La compa\u00f1\u00eda <a href=\"https:\/\/www.pantone.com\" target=\"_blank\" rel=\"noopener\">PANTONE<\/a>\u00a0ha definido m\u00e1s de<strong> 1100 colores con un n\u00famero \u00fanico<\/strong>. Con este n\u00famero \u00fanico te <strong>aseguras<\/strong> de que tienes el mismo color en cualquier parte. Por eso los colores Pantone son perfectos para usar en logos de empresa o dise\u00f1o corporativo. Adem\u00e1s, son dif\u00edciles de imitar usando CMYK, ya que los Pantone se crear usando 15 pigmentos base incluyendo negro y blanco.<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\"><i class=\"fusion-li-icon icon-customcheck\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p><strong>Color de impresi\u00f3n<\/strong>: En este caso se trata del <strong>CMYK<\/strong>, que son las siglas en ingl\u00e9s de <strong>Cian<\/strong>, <strong>Magenta<\/strong>, <strong>Amarillo<\/strong>, <strong>Negro<\/strong> (Cyan, Magenta, Yellow, Key (black)). Mezclando cian, magenta y amarillo, el color m\u00e1s oscuro que puedes obtener es un marr\u00f3n oscuro (por eso se le a\u00f1ade el negro). Todos los colores en el espectro tiene estos colores como <strong>base<\/strong>.<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\"><i class=\"fusion-li-icon icon-customcheck\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p><strong>C\u00f3digos digitales de los colores<\/strong>: Por un lado est\u00e1 la\u00a0paleta de colores <strong>RGB<\/strong> (RVA en espa\u00f1ol) que consta, b\u00e1sicamente, de tres colores primarios aditivos: <strong>Rojo-Verde-Azul<\/strong>. Como a\u00f1adido, la codificaci\u00f3n hexadecimal del color (<strong>HEX<\/strong>) permite expresar f\u00e1cilmente un color concreto de la escala <strong>RGB<\/strong>\u00a0como en el lenguaje HTML y en JavaScript (este sistema utiliza la combinaci\u00f3n de tres c\u00f3digos de dos d\u00edgitos para expresar las diferentes intensidades de los colores primarios RGB). Por \u00faltimo, aprovecha el sistema de colores <strong>HSL<\/strong>, en el cual se miden por tres par\u00e1metros (<i>hue<\/i>,\u00a0<i>saturation<\/i>\u00a0y\u00a0<i>light<\/i>) que determinan la posici\u00f3n del color en el cilindro de colores HSL. El primer par\u00e1metro es el \u00e1ngulo horizontal, el segundo es la distancia horizontal del centro de la base y el tercero es la distancia vertical (altura) del centro de la base.<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-3\"><p>Un <strong>buen dise\u00f1o <\/strong>(ya sea gr\u00e1fico o web) tiene en cuenta la <strong>estructura<\/strong>, las <strong>formas<\/strong> y tambi\u00e9n los <strong>colores<\/strong>. Un uso adecuado de los colores en dise\u00f1o web y gr\u00e1fico\u00a0 puede <strong>mejorar la experiencia<\/strong> de usuario, <strong>ayudar a enviar tu mensaje<\/strong> y, a la vez, <strong>dar autoridad<\/strong> a la marca. Por el contrario, una mala decisi\u00f3n te puede llevar directo al fracaso. Por ello, es vital tener la capacidad de poder <strong>gestionar correctamente las distintas combinaciones de colores<\/strong> posibles para tu marca, ya que en forma de <a href=\"https:\/\/ignaciosantiago.com\/servicios\/diseno-paginas-web-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">pagina web<\/a>,\u00a0<a href=\"https:\/\/ignaciosantiago.com\/servicios\/diseno-blogs-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">blog<\/a>, <a href=\"https:\/\/ignaciosantiago.com\/servicios\/diseno-tiendas-online-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">tienda online<\/a>, logotipo o dise\u00f1o publicitario.<\/p>\n<p>\u00a1Pi\u00e9nsalo! Debes de tener en cuenta que los colores que elijas para esos dise\u00f1os van a reflejar <strong>quien eres y qu\u00e9 valores quieres transmitir<\/strong>. Por lo tanto, siempre deben ser coherentes con las combinaciones crom\u00e1ticas que te voy a explicar en esta gu\u00eda.\u00a0Por ejemplo, uno de los aspectos a la hora de <strong>elegir la paleta de colores<\/strong> de cualquier dise\u00f1o es tener en cuenta a tu <strong>p\u00fablico objetivo<\/strong>. \u00bfSorprendido? \u00a1Es simple! Dependiendo de si utilizas una gama de colores u otra para conseguir <strong>captar su atenci\u00f3n<\/strong>. Cuando la mayor\u00eda de tu p\u00fablico sean <strong>hombres<\/strong>, utiliza colores oscuros o fr\u00edos como el negro, azul, gris, etc o, si por el contrario, tu audiencia es femenina, a\u00f1adiremos tonos vivos como el rosa o el violeta.<\/p>\n<blockquote>\n<p>Para elegir los colores de tu marca es cr\u00edtico <strong>conocer a tu p\u00fablico objetivo<\/strong>, ya que de esa manera podr\u00e1s captar mejor su atenci\u00f3n.<\/p>\n<\/blockquote>\n<p>\u00a1Esto pasa tambi\u00e9n con la <strong>edad<\/strong>! Debes utilizar colores llamativos como el naranja o el verde para atraer a un p\u00fablico joven. Ten en cuenta, que cada color que elijas para implementar en tus dise\u00f1os <strong>tiene un significado concreto<\/strong> por lo que debes intentar cuidar al m\u00e1ximo cada detalle. Otro factor a tener en cuenta son las <strong>sensaciones<\/strong> que quieres transmitir. Dependiendo del color puedes dar sensaci\u00f3n de tranquilidad, seguridad, pasi\u00f3n, energ\u00eda, confianza o alegr\u00eda, por lo que debes tener claro cu\u00e1l debe ser <strong>el mensaje<\/strong> que quieres que reciba el usuario cuando vea tu dise\u00f1o.<\/p>\n<p>En resumen, si eres capaz de conocer<strong> cu\u00e1l es tu audiencia<\/strong> y <strong>qu\u00e9 quieres transmitirle<\/strong>, ver\u00e1s que la tarea de elegir y combinar los colores se simplifica y ser\u00e1 posible<strong> enviar y hacerles llegar tu mensaje con m\u00e1s facilidad<\/strong>. Adem\u00e1s, debes de considerar que todos los colores que representen tu marca deben de estar <strong>alineados y ser coherentes<\/strong>, es decir, no puedes tener un logo azul y que tu p\u00e1gina sea roja ya que estoy generar\u00eda confusi\u00f3n al p\u00fablico objetivo (a no ser que escojas gamas de colores que combinen).<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">No hace falta que te hagas un master en colores, pero si que entiendas qu\u00e9 es cada uno. De todas maneras, existen varias herramientas online muy \u00fatiles para <strong>ayudarle a elegir un esquema de color<\/strong> o<strong> convertir el color digital en otros valores<\/strong>. Llamadas com\u00fanmente \u00abconversor de colores\u00bb o \u00abruedas de color\u00bb te permiten trabajar de forma simult\u00e1nea con los modelos de color hexadecimal, RGB, HSV y HSL. Simplemente tienes que rellenar el dato de uno de ellos y presionar \u00abIntro\u00bb.<\/span><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-3 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-2 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"propiedades-a-tener-en-cuenta-antes-de-generar-cualquier-codigo-de-color\"><\/span>Propiedades a tener en cuenta antes de generar cualquier c\u00f3digo de color<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-4\"><p>Antes de poder <strong>convertir c\u00f3digos de colores<\/strong> o entender los diferentes<strong> tipos de c\u00f3digos de color <\/strong>que existen, es cr\u00edtico que conozcas<strong> sus propiedades o cualidades fundamentales<\/strong>. Cualquier <strong>tipo de c\u00f3digo de color<\/strong> que te voy a explicar en esta gu\u00eda est\u00e1 compuesto por distintas <strong>propiedades<\/strong>\u00a0que lo hace <strong>\u00fanico<\/strong> (para que nadie lo pueda equivocar). Por ello, conocer cuales son las distintas cualidades que incorporan estos c\u00f3digos te va a ayudar mucho a la hora de elegirlos correctamente (ya sea para un dise\u00f1o u otro). A continuaci\u00f3n te explico las <strong>propiedades de los c\u00f3digos de colores<\/strong> m\u00e1s habituales:<\/p>\n<\/div><div class=\"fusion-title title fusion-title-3 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"alpha-canal-alpha\"><\/span>Alpha (canal Alpha)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-5\"><p>En computaci\u00f3n gr\u00e1fica, la <strong>composici\u00f3n alfa o canal alfa<\/strong> es la que define la <strong>opacidad de un p\u00edxel<\/strong> en una imagen. El canal alfa act\u00faa como una<strong> m\u00e1scara de transparencia<\/strong> que permite, de forma virtual, componer (mezclar capas) im\u00e1genes o fondos opacos con im\u00e1genes con un cierto grado de transparencia. As\u00ed, en un formato de imagen que admita transparencia, a los tres canales de color b\u00e1sicos RGB que definen la cantidad de rojo, verde y azul respectivamente del p\u00edxel, <strong>se a\u00f1ade un cuarto canal<\/strong>, el alfa, que define el <strong>grado de opacidad de ese p\u00edxel<\/strong>. Es muy interesante ser capaz de poder jugar con esta propiedad, ya que es un elemento que da mucho juego en cualquier dise\u00f1o gr\u00e1fico y web, ya que te puede ayudar a <strong>rebajar tonos<\/strong>.<\/p>\n<p>Es realmente \u00fatil si lo vas a hacer combinaciones de colores y, sobre todo, <strong>transparencias<\/strong>.\u00a0La presencia del <strong>canal alfa<\/strong> es una de las ventajas del formato de imagen<strong> .PNG<\/strong> frente a otros como el .JPEG (conoce las <a href=\"https:\/\/ignaciosantiago.com\/comparativa-formatos-imagenes-png-jpg-gif-svg\/\" target=\"_blank\" rel=\"noopener noreferrer\">diferencias de los formatos de imagen<\/a>), el cual no posee informaci\u00f3n alfa, y, por tanto, no admite transparencias. Antes de la creaci\u00f3n de este canal, y cuando no hab\u00eda ordenadores, en fotograf\u00eda y en el cine se empleaban m\u00e1scaras f\u00edsicas (recortadas o pintadas) que tapaban las partes de la imagen que no se deb\u00edan<strong> exponer a la luz<\/strong> y que serv\u00edan para generar una segunda exposici\u00f3n controlada que permitiera componer dentro de la pel\u00edcula elementos que no estaban presentes en la primera exposici\u00f3n o rodaje (tambi\u00e9n se utilizaba habitualmente la t\u00e9cnica de <strong>pintar im\u00e1genes sobre fondos transparentes<\/strong>, como acetatos o vidrios). Con la creaci\u00f3n de sistemas inform\u00e1ticos, el canal alfa resolvi\u00f3 la necesidad de recrear esta transparencia que permitiera fotocomponer varias capas.<\/p>\n<\/div><div class=\"fusion-title title fusion-title-4 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"brightness-luminosidad\"><\/span>Brightness (Luminosidad)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-6\"><p><strong>Brightness<\/strong> (Brillo o Luminosidad) es una de las propiedades m\u00e1s utilizadas en el dise\u00f1o gr\u00e1fico y web, pues simplemente jugando con un valor (que va <strong>de 0 a 100%<\/strong>) te permite hacer que un <strong>color luzca<\/strong> totalmente distinto. Por ejemplo, si quieres que tu dise\u00f1o se vea mucho<strong> m\u00e1s vivo<\/strong> y exista una gran intensidad en los colores (por ejemplo que las im\u00e1genes destaquen m\u00e1s), el brillo deber\u00e1 ser mucho m\u00e1s alto (aunque es m\u00e1s dif\u00edcil de leer de cerca). Sin embargo, si quieres ayudar al lector a leerlo mejor de cerca y no quieres confundirlo debes usar un brillo mucho m\u00e1s bajo (que te permitir\u00e1 el uso de unos colores m\u00e1s neutros que <strong>har\u00e1n menos da\u00f1o<\/strong> al usuario).<\/p>\n<p>La luminosidad o brillo es, en definitiva, la <strong>cantidad de luz emitida o reflejada por un objeto<\/strong> (en un color ser\u00eda su claridad u oscuridad). Un color al 100% de saturaci\u00f3n tendr\u00e1 su m\u00e1xima pureza con un 100% de luminosidad y con una luminosidad del 0% ser\u00e1 <strong>negro absoluto<\/strong>. Por el contrario, cualquier color al 0% de saturaci\u00f3n corresponder\u00e1 a un tono concreto de gris que se convertir\u00e1 blanco absoluto por un valor del 100% de luminosidad y negro absoluto por un valor de luminosidad del 0%.<\/p>\n<\/div><div class=\"fusion-title title fusion-title-5 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"tono-hue\"><\/span>Tono (Hue)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-7\"><p><strong>Hue<\/strong> (o <strong>Tono<\/strong>, <strong>Matiz<\/strong> o <strong>Tonalidad<\/strong>) es una de las propiedades m\u00e1s importantes que debes conocer, ya que gestiona la <strong>frecuencia dominante del color<\/strong> dentro del espectro visible. Dicho en otras palabras, es la <strong>percepci\u00f3n de un tipo de color<\/strong> (la que se distingue en un arco\u00edris), es decir, la sensaci\u00f3n humana de acuerdo a la cual un \u00e1rea parece similar a otra o cuando existe un tipo de longitud de onda dominante. \u00bfSigues sin entenderlo? El tono <strong>es la propia cualidad que tiene un color<\/strong>, ya que todos los colores que se encuentran en el c\u00edrculo crom\u00e1tico son tonos (cuando vamos de un lado a otro en el c\u00edrculo crom\u00e1tico estamos cambiando el tono).<\/p>\n<p>En el \u00e1mbito del dise\u00f1o gr\u00e1fico y web conocer los<strong> tonos de colores<\/strong> es algo cr\u00edtico. Una vez que lo domines y sepas cuales son los tonos que m\u00e1s te convienen (jugando con el resto de combinaciones que te voy a mostrar) podr\u00e1s obtener una <strong>personalizaci\u00f3n m\u00e1xima<\/strong> de tu dise\u00f1o. Normalmente, en la preparaci\u00f3n de cualquier tipo de dise\u00f1o <strong>se utiliza el tono como primer elemento<\/strong> a tener en cuenta a la hora de seleccionar un color (suele oscilar entre valores <strong>del 0 al 360<\/strong>, ya que esto representa todo el c\u00edrculo crom\u00e1tico). Esto te permite elegir los colores de una forma mucho m\u00e1s sencilla e intuitiva.<\/p>\n<\/div><div class=\"fusion-title title fusion-title-6 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"sombra-shade\"><\/span>Sombra (Shade)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-8\"><p>La <strong>sombra<\/strong> o <strong>shade\u00a0<\/strong>se utiliza en dise\u00f1o web o en dise\u00f1o gr\u00e1fico par<strong>a definir variaciones m\u00e1s oscuras de un color<\/strong> que se crean agregando <strong>negro<\/strong> (sombras) a un <strong>color base<\/strong>. Usarlas como parte de una paleta de colores tiene much\u00edsimas ventajas, entre ellas la facilidad en la que se convierte el proceso de selecci\u00f3n de color, la cual se ve reducida enormemente y hace que tu preocupaci\u00f3n por ver tu dise\u00f1o como un arcoiris con colores desordenados desparezca. Adem\u00e1s, le dar\u00e1 a tu paleta de colores un aspecto mucho <strong>m\u00e1s pulido<\/strong> y <strong>coherente<\/strong> debido a que todos los colores que la componen<strong> parten desde una misma base<\/strong> y son variaciones consistentes del mismo.<\/p>\n<p>Por ello, saber utilizar de forma eficiente las sombras te puede<strong> dar un plus a la hora de dise\u00f1ar cualquier pieza creativa<\/strong>. Simplemente utilizando una gama de colores y aplicando las sombras de una manera correcta podr\u00e1s obtener todos los <strong>colores necesarios<\/strong> para tu sitio web, tu logotipo corporativo o tus flyers publicitarios. Hacerlo es muy sencillo (no es necesario ser un experto en el tema), ya que simplemente debes utilizar las herramientas que te voy mostrar en esta gu\u00eda.<\/p>\n<\/div><div class=\"fusion-title title fusion-title-7 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"tinte-tint\"><\/span>Tinte (Tint)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-9\"><p>El <strong>tinte o tint<\/strong>, al contrario que la sombra, se utiliza para<strong> definir variaciones m\u00e1s claras de un color<\/strong> que se crean agregando <strong>blanco<\/strong> (luminosidad) a un <strong>color base<\/strong>. En la teor\u00eda del color, un tinte es una mezcla de un color con blanco, que reduce la oscuridad, mientras que un tono es una mezcla con negro, que aumenta la oscuridad. Ambos procesos afectan la relativa ligereza de la mezcla de color resultante.<\/p>\n<p>Al igual que al a\u00f1adir sombras, saber utilizar el tinte es primordial para la realizaci\u00f3n tanto de tus dise\u00f1os como tu web pues tan solo<strong> a\u00f1adiendo luminosidad<\/strong> al tono elegido podr\u00e1s conseguir una <strong>gama muy amplia de colores<\/strong>, hay diversas herramientas que nos ayudan a ello de una forma muy simple como Paletton que mencionaremos m\u00e1s adelante.<\/p>\n<\/div><div class=\"fusion-title title fusion-title-8 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"saturacion-saturation\"><\/span>Saturaci\u00f3n (Saturation)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-10\"><p>La <strong>saturaci\u00f3n<\/strong> se refiere a la <strong>cantidad de distintas ondas que componen una fuente luminosa<\/strong>. Se compone de la mezcla de los tres colores primarios (red, green, blue) por lo que un color tendr\u00e1 menos saturaci\u00f3n cuantos menos componentes igualados de colores primarios tenga. A mayor cantidad de longitudes de onda que puedan actuar como tres colores primarios para el ojo humano, menos saturaci\u00f3n tendr\u00e1 ese color. Por lo tanto, un color compuesto por valores similares de rojo, verde o azul se ver\u00e1n como blanco o gris.<\/p>\n<p>En resumen, se puede decir que la <strong>saturaci\u00f3n<\/strong> es el inverso de la cantidad de gris que contiene. Por tanto, cuanto mayor cantidad de gris tenga m\u00e1s saturaci\u00f3n tendr\u00e1 el color (es el<strong> grado de predominio<\/strong> que uno o dos de los tres colores tienen sobre el otro). Crear variaciones de la saturaci\u00f3n es algo m\u00e1s complicado en dise\u00f1o gr\u00e1fico, pero si sabes utilizarlo correctamente te puede llegar a ser \u00fatil en algunas situaciones como es la de <strong>enfatizar sobre un objeto que consideres importante<\/strong>\u00a0(ahora bien esta debe de tener una finalidad est\u00e9tica).<\/p>\n<\/div><div class=\"fusion-title title fusion-title-9 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"valor-value\"><\/span>Valor (Value)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-11\"><p><strong>Valor o value<\/strong> es un t\u00e9rmino que se usa para describir <strong>c\u00f3mo de claro u oscuro parece un color<\/strong> y se refiere a la cantidad de luz percibida. El brillo se puede definir como la cantidad de \u00aboscuridad\u00bb que tiene un color, es decir, representa lo claro u oscuro que es un color respecto del color elegido. Es una propiedad importante, ya que puedes utilizarla para<strong> crear sensaciones por medio del color<\/strong>. Un azul, por ejemplo, mezclado con blanco, da como resultado un azul m\u00e1s claro, es decir, de un valor m\u00e1s alto (es distinto al color, ya que se obtiene del agregado de blanco o negro a un color base).<\/p>\n<p>Conocer esta propiedad es fundamental para el uso de c\u00f3digos de colores que te voy a explicar a continuaci\u00f3n, ya que te permite entender el c\u00f3digo HSV, que es uno de los mas intuitivos y sencillos de utilizar ya que simplemente agregando un valor a \u00abValue\u00bb puedes <strong>a\u00f1adir brillo<\/strong> al color elegido o simplemente <strong>hacerlo m\u00e1s oscuro<\/strong>. Esto te ahorra mucho tiempo si lo \u00fanico que quieres es que tu color cambie de tonalidad (es fundamental conocer este tipo de c\u00f3digo de color).<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">Para crear tus dise\u00f1os <strong>no es necesario que utilices todas estas propiedades<\/strong>. La clave es que las conozcas y que, en el momento adecuado, sepas<strong> para que sirve cada una<\/strong> y en que te pueden ayudar el uso o no uso de una de ellas.<\/span><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-4 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-3 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-10 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"tipos-de-codigos-de-colores-habituales-en-diseno-grafico-y-web\"><\/span>Tipos de c\u00f3digos de colores habituales en dise\u00f1o gr\u00e1fico y web<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-12\"><p>Una vez que te he explicado las propiedades que componen cada c\u00f3digo de color, ya puedo mostrarte qu\u00e9<strong> tipos de c\u00f3digos de colores<\/strong> existen y en que momento te puede resultar <strong>m\u00e1s \u00fatil<\/strong> utilizar uno u otro. He empezado por la propiedades porque cada c\u00f3digo de color que vas a ver <strong>utiliza alguna de ellas<\/strong> para variar el color resultante. Por ello, es vital que sepas en que situaci\u00f3n te puede venir bien utilizar un c\u00f3digo que use la saturaci\u00f3n como propiedad fundamental u otro que utilice las sombras o la luminosidad (si eres capaz de dominar estas propiedades sabr\u00e1s cual es el c\u00f3digo que m\u00e1s se adapte a t\u00ed y que te permitir\u00e1 realizar una correcta f\u00f3rmula de tus colores).Tambi\u00e9n te puede ser \u00fatil conocer los tonos de los colores para partir de una base. A continuaci\u00f3n te voy a explicar los <strong>tipos de c\u00f3digos de colores m\u00e1s habituales<\/strong>:<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">Para que sea m\u00e1s f\u00e1cil la compresi\u00f3n de los tipos de c\u00f3digos de colores, he puesto de ejemplo en cada uno de ellos la<strong> conversi\u00f3n de cada c\u00f3digo al color negro<\/strong>.<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-11 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"rgb-red-green-blue\"><\/span>RGB (Red, Green, Blue)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-13\"><p>El formato de color <strong>RGB<\/strong>, cuyas siglas son <strong>Red<\/strong> (Rojo), <strong>Green<\/strong> (Verde) y <strong>Blue<\/strong> (Azul), te permite presentar los colores de varias maneras<strong> mezclando los tres colores b\u00e1sicos<\/strong>. B\u00e1sicamente el formato trata de darle <strong>un valor entre 0 y 255<\/strong> a cada color que compone el formato. \u00bfPor qu\u00e9 255? Se trata del n\u00famero de valores que puede almacenar un \u00abbyte\u00bb (unidad m\u00e1s peque\u00f1a de informaci\u00f3n de base). Tambi\u00e9n puedes dar valor en <strong>porcentaje<\/strong>\u00a0que har\u00e1n que\u00a0mezclando estos colores en ciertas proporciones puedes obtener la <strong>gama completa\u00a0de colores<\/strong>. Por ejemplo, si quieres un tono que se aproxime mucho al rojo debes dar los valores m\u00e1s altos al rojo y los m\u00e1s bajos al verde y al azul.<\/p>\n<p>RGB es el modo por defecto para las im\u00e1genes de Photoshop y, por lo general, el modo en el que vienen configuradas la gran mayor\u00eda de c\u00e1maras de fotos (aunque ambos perfiles pueden cambiarse esto es porque los monitores de ordenador muestran los colores con el modelo RGB). El modo de color RGB (Red, Green, Blue) se usa para <strong>cualquier dise\u00f1o digital<\/strong>. Esto incluye p\u00e1ginas web, aplicaciones, banners y cualquier otro dise\u00f1o que sea creado para uso digital.<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">C\u00f3digo RGB del color negro: rgb(0, 0, 0)<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-12 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"rgba-red-green-blue-alpha\"><\/span>RGBA (Red, Green, Blue, Alpha)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-14\"><p>El c\u00f3digo <strong>RGBA<\/strong>, cuyas siglas son <strong>Red<\/strong> (Rojo), <strong>Green<\/strong> (Verde), <strong>Blue<\/strong> (Azul) y Alpha (Alfa), parte del sistema RGB y lo \u00fanico que incorpora es un sistema <strong>Alpha<\/strong>. Como habr\u00e1s comprobado en la anterior secci\u00f3n, en la que te hablaba de las propiedades de los colores, a\u00f1ade al sistema RGB un cuarto valor que indica la<strong> transparencia del elemento<\/strong>. Esta transparencia se expresa como un n\u00famero decimal <strong>entre el 0 y el 1<\/strong> (en el que 0 es totalmente transparente y el 1 es totalmente opaco). El resto de valores se presenta exactamente igual que en el c\u00f3digo de color RGB y es perfecto para fondos que combinen texto e im\u00e1genes.<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">C\u00f3digo RGBA del color negro: rgba (0, 0, 0, 1)<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-13 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"hex-hexadecimal-o-html\"><\/span>HEX (Hexadecimal) o HTML<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-15\"><p>El formato de colores <strong>HEX<\/strong> (o <strong>hexadecimal<\/strong>), conocido mundialmente como <strong>c\u00f3digo de color HTML<\/strong>, no es m\u00e1s que una derivaci\u00f3n del uso del sistema RGB. Este formato es el m\u00e1s utilizado por los <strong>desarrolladores gr\u00e1ficos y web<\/strong>\u00a0y lo \u00fanico que hace es <strong>cambiar el sistema de decimales normales de base 10 por base 16<\/strong>. Para poder conocer bien este c\u00f3digo y saber leerlo debes saber que en primer lugar habr\u00e1 una \u00ab<strong>almohadilla<\/strong>\u00bb seguida de<strong> 6 caracteres<\/strong> que pueden ser n\u00fameros o letras, en donde cada par de caracteres representa la intensidad (d\u00f3nde 0 es poco intenso y F muy intenso) que escoges en cada color del sistema RGB (cada par de caracteres representan un color del formato RGB).<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">C\u00f3digo HEX o HTML del color negro: (#000000)<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-14 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"hsl-hue-saturation-lightness\"><\/span>HSL (Hue, Saturation, Lightness)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-16\"><p>El sistema <strong>HSL<\/strong>, cuyas siglas son <strong>Hue<\/strong> (Tono), <strong>Saturation<\/strong> (Saturaci\u00f3n) y <strong>Lightness<\/strong> (Luminosidad), es otro c\u00f3digo muy \u00fatil y un poco m\u00e1s avanzado e intuitivo que el RGB (en un futuro es probable que su uso se generalice). Para poder utilizar este formato debes de <strong>determinar valores al color, a la saturaci\u00f3n y al brillo<\/strong> para obtener el color deseado. Para ello, debes pensar en un valor <strong>entre 0 y 360<\/strong> (valores que recorren todos los colores de la paleta). Para la saturaci\u00f3n debes pensar un porcentaje que defina la <strong>intensidad<\/strong> del color (de 0% a 100%). Lo mismo debes hacer con el brillo, un porcentaje que indica la claridad u oscuridad del color. El est\u00e1ndar de colores HSL es soportado en la mayor\u00eda de navegadores que existen en la actualidad (al menos los m\u00e1s importantes).<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">C\u00f3digo HSL del color negro: hsl(0, 0%, 0%)<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-15 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"hsla-hue-saturation-lightness-alpha\"><\/span>HSLA (Hue, Saturation, Lightness, Alpha)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-17\"><p>El formato <strong>HSLA<\/strong>, cuyas siglas son <strong>Hue<\/strong> (Tono), <strong>Saturation<\/strong> (Saturaci\u00f3n), <strong>Lightness<\/strong> (Luminosidad) y <strong>Alpha<\/strong>, es una <strong>variante del formato HSL<\/strong>. A\u00f1ade la<strong> variable Alpha<\/strong> en la que, exactamente igual que en los colores RGBA, puedes a\u00f1adir un n\u00famero decimal que var\u00eda del 0 al 1 para darle la <strong>transparencia<\/strong> necesaria al color elegido (d\u00f3nde \u00ab0\u00bb es totalmente transparente y \u00ab1\u00bb es totalmente opaco). La gran ventaja que tiene este sistema respecto al RGBA es que se puede variar el color con mucha m\u00e1s facilidad, ya que con cambiar el tono cambiamos el color (sin afectar en el brillo y la saturaci\u00f3n).<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">C\u00f3digo HSLA del color negro: hsl(0, 0%, 0%,1)<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-16 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"hsv-hue-saturation-value\"><\/span>HSV (Hue, Saturation, Value)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-18\"><p>El formato de c\u00f3digo<strong> HSV<\/strong>, cuyas siglas son <strong>Hue<\/strong> (Tono), <strong>Saturation<\/strong> (Saturaci\u00f3n), <strong>Value <\/strong>(Valor), tambi\u00e9n llamado <strong>HSB<\/strong> (Hue, Saturaci\u00f3n, Brillo), es un <strong>formato muy intuitivo<\/strong>, ya que utiliza la misma ruleta de colores que el formato HSL. Aunque a primera vista el modelo parece exactamente igual lo que cambia es el <strong>valor de la saturaci\u00f3n<\/strong> que hace que sea m\u00e1s sencillo encontrar los colores totalmente saturados, ya que en este modelo usan valores m\u00e1s sencillos (del 0 al 1, en la que el 0 es blanco). Para el tono y el brillo es exactamente lo mismo.<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">C\u00f3digo HSV del color negro: (0, 0%, 0%)<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-17 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"hwb-hue-whiteness-blackness\"><\/span>HWB (Hue, Whiteness, Blackness)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-19\"><p>El sistema <strong>HWB<\/strong>, cuyas siglas son <strong>Hue<\/strong> (Tono), <strong>Whiteness<\/strong> (Claridad) y <strong>Blackness<\/strong> (Oscuridad), es parecido al formato HSL. Es un nuevo formato (incorporado en el sistema CSS hace relativamente poco), donde el color se elige exactamente igual que en el formato HSL, ya que dando un valor de <strong>entre 0 y 360<\/strong> llegas al color deseado. Para los tonos blancos y para los negros sin embargo este sistema tiene variaci\u00f3n con respecto al HSL, ya que, para los tonos de blancos y negros tienes que dar valores entre el 0 al 1 (donde \u00ab1\u00bb es totalmente blanco y \u00ab0\u00bb totalmente negro) y para el negro (donde \u00ab1\u00bb es totalmente negro y \u00ab0\u00bb totalmente blanco). Al igual que el HSL se le puede a\u00f1adir el elemento alpha para controlar su opacidad.<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">C\u00f3digo HWB del color negro: (0, 0%, 100%)<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-18 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"cmyk-cyan-magenta-yellow-black\"><\/span>CMYK (Cyan, Magenta, Yellow, Black)<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-20\"><p>El <strong>CMYK<\/strong> , cuyas siglas son <strong>Cyan<\/strong> (Azul), <strong>Magenta<\/strong> (Magenta), <strong>Yellow<\/strong> (Amarillo) y <strong>Black<\/strong> (Negro), es un formato de color que se utiliza normalmente en las <strong>impresiones a cuatro colores<\/strong> (colores completos). Para hallar un color concreto debes realizar una mezcla de estos cuatro colores (dando valores <strong>del 0 al 100%<\/strong> en cada uno de los colores). La diferencia b\u00e1sica que existe con el RGB es la brillantez en la pantalla, por ello son los t\u00edpicamente <strong>usados para imprimir<\/strong> revistas, folletos, papeler\u00eda corporativa, etc (es habitual que muchas de las im\u00e1genes digitales que encuentras est\u00e9n subidas con colores CMYK).<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">C\u00f3digo CMYK del color negro: (0%, 0%, 0%, 100%)<\/span><\/div><\/div><div class=\"fusion-title title fusion-title-19 fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"pantone\"><\/span>Pantone<span class=\"ez-toc-section-end\"><\/span><\/h3><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-21\"><p>El Pantone es un <strong>cat\u00e1logo de<\/strong> <strong>color<\/strong> que te ayuda a <strong>emparejar<\/strong> <strong>colores<\/strong> CMYK con el RGB en todos los materiales y que <strong>se asegura de que el color tenga el mismo tono en todas sus aplicaciones<\/strong>, desde telas y pinturas hasta cualquier material impreso. Permite la perfecta comunicaci\u00f3n entre dise\u00f1adores, artistas, arquitectos y cualquier persona que utilice los colores para su desarrollo laboral m\u00e1s sencillo.<\/p>\n<\/div><div class=\"fusion-alert alert general alert-info fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-info-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\">Como dato interesante, los navegadores modernos hoy en d\u00eda<strong> soportan hasta 140 colores<\/strong> con nombre que har\u00e1n mucho m\u00e1s sencillo que pongas color a tu p\u00e1gina web aplic\u00e1ndolo al lenguaje HTML y CSS. Entre ellos, Red, Darkred, Firebrick o, en nuestro caso, Black.<\/span><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-5 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-4 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-20 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"mejores-apps-y-paginas-para-convertir-codigos-de-color\"><\/span>Mejores apps y p\u00e1ginas para convertir c\u00f3digos de color<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-22\"><p>Ahora que ya ya sabes manejarte con la<strong> teor\u00eda del color<\/strong> (al menos lo m\u00e1s b\u00e1sico), ya sean las propiedades m\u00e1s importantes de los colores para poder combinarlos, los tipos de c\u00f3digos de colores habituales en dise\u00f1o gr\u00e1fico y web, los esquemas y tipos de combinaciones de colores habituales y sabes qu\u00e9 significan los colores y qu\u00e9 colores combinan mejor con otros y la importancia de los colores en dise\u00f1o gr\u00e1fico y web te voy a mostrar las <strong>mejores apps y herramientas online para convertir c\u00f3digos de colores<\/strong>:<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-6 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-5 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-padding-top:20px;--awb-padding-right:20px;--awb-padding-bottom:20px;--awb-padding-left:20px;--awb-overflow:hidden;--awb-bg-size:cover;--awb-border-color:#000000;--awb-border-top:1px;--awb-border-right:1px;--awb-border-bottom:1px;--awb-border-left:1px;--awb-border-style:solid;--awb-border-radius:5px 5px 5px 5px;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-order-medium:0;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-1 hover-type-none\"><img decoding=\"async\" width=\"76\" height=\"100\" alt=\"ganador 1\" title=\"ganador 1\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2020\/07\/ganador-11.png\" class=\"img-responsive wp-image-91383\"\/><\/span><\/div><div class=\"fusion-title title fusion-title-21 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"paletton\"><\/span>Paletton<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-2 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone paletton\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone paletton\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-color-paletton-copia.jpg\" class=\"img-responsive wp-image-78942\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-color-paletton-copia-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-color-paletton-copia-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-color-paletton-copia.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-23\"><p><strong>Paletton <\/strong>es una herramienta gratuita y en l\u00ednea que permite la visualizaci\u00f3n de colores en una paleta gracias a una interfaz m\u00e1s profesional. Permite varios modos de selecci\u00f3n en las que veras las combinaciones de colores como por ejemplo los colores complementarios o la triada. Tambi\u00e9n implementa una serie de colores predefinidos con sus respectivas combinaciones que har\u00e1n m\u00e1s sencillas tus elecciones.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-1 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/paletton\/\"><span class=\"fusion-button-text\">Ir a Paletton<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-6 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-padding-top:20px;--awb-padding-right:20px;--awb-padding-bottom:20px;--awb-padding-left:20px;--awb-overflow:hidden;--awb-bg-size:cover;--awb-border-color:#000000;--awb-border-top:1px;--awb-border-right:1px;--awb-border-bottom:1px;--awb-border-left:1px;--awb-border-style:solid;--awb-border-radius:5px 5px 5px 5px;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-order-medium:0;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-3 hover-type-none\"><img decoding=\"async\" width=\"76\" height=\"100\" alt=\"ganador 2\" title=\"ganador 2\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2020\/07\/ganador-22.png\" class=\"img-responsive wp-image-91381\"\/><\/span><\/div><div class=\"fusion-title title fusion-title-22 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"w3-schools\"><\/span>W3 Schools<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-4 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone w3schools\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone w3schools\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-color-w3schools.jpg\" class=\"img-responsive wp-image-78943\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-color-w3schools-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-color-w3schools-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-color-w3schools.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-24\"><p><strong>W3 Schools<\/strong> color converter es un conversor de colores, es decir primero debemos de introducir el c\u00f3digo de un color deseado y la propia herramienta te devolver\u00e1 el color deseado en todos los formatos existentes para su uso CSS o HTML, esta herramienta es muy \u00fatil si ya sabemos que color queremos utilizar pero no sabemos el c\u00f3digo que queremos.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-2 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/w3schools\/\"><span class=\"fusion-button-text\">Ir a W3schools<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-7 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-padding-top:20px;--awb-padding-right:20px;--awb-padding-bottom:20px;--awb-padding-left:20px;--awb-overflow:hidden;--awb-bg-size:cover;--awb-border-color:#000000;--awb-border-top:1px;--awb-border-right:1px;--awb-border-bottom:1px;--awb-border-left:1px;--awb-border-style:solid;--awb-border-radius:5px 5px 5px 5px;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-order-medium:0;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-5 hover-type-none\"><img decoding=\"async\" width=\"76\" height=\"100\" alt=\"ganador 3\" title=\"ganador 3\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2020\/07\/ganador-33.png\" class=\"img-responsive wp-image-91382\"\/><\/span><\/div><div class=\"fusion-title title fusion-title-23 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"coolors\"><\/span>Coolors<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-6 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone coolors\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone coolors\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-coolors-copia.jpg\" class=\"img-responsive wp-image-78946\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-coolors-copia-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-coolors-copia-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-coolors-copia.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-25\"><p><strong>Coolors<\/strong> es una web que genera en un tiempo record paletas esquematizadas de conjuntos de colores, se puede realizar directamente a trav\u00e9s de la web o simplemente descargarte la aplicaci\u00f3n. Permite el cambio de fotos a colores, ajustar y redefinir las fotos, a\u00f1adirlas a tu colecci\u00f3n y compartirla con los dem\u00e1s.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-3 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/coolors\/\"><span class=\"fusion-button-text\">Ir a Coolors<\/span><\/a><\/div><\/div><\/div><\/div><\/div>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-7 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-8 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-24 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"adobe-color\"><\/span>Adobe Color<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-7 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone adobe color\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone adobe color\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-adobe-color.jpg\" class=\"img-responsive wp-image-78919\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-adobe-color-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-adobe-color-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-adobe-color.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-26\"><p><strong>Adobe Color<\/strong> es una p\u00e1gina web para dise\u00f1adores que te permite una vez que entras en su paleta de colores seleccionar uno o varios de la misma gama que te gusten y convertirlos a cualquier c\u00f3digo que sea necesario para ti. Tambi\u00e9n te permite realizar combinaciones de reglas arm\u00f3nicas.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-4 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/adobecolorcc\/\"><span class=\"fusion-button-text\">Ir a Adobe Color<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-9 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-25 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"colorexplorer\"><\/span>ColorExplorer<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-8 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colorexplorer\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colorexplorer\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorexplorer.jpg\" class=\"img-responsive wp-image-78959\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorexplorer-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorexplorer-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorexplorer.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-27\"><p><strong>Color Explorer <\/strong>es una herramienta muy completa que te permite desde la propia p\u00e1gina web realizar funciones \u00fatiles y muy distintas. Por ejemplo, te permite personalizar tu paleta de colores, guardarlos, sacar colores de im\u00e1genes, de p\u00e1ginas webs y de textos de HTML. Tambi\u00e9n permite hacer conversiones.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-5 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/colorexplorer\"><span class=\"fusion-button-text\">Ir a Color Explorer<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-10 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-26 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"colorhunter\"><\/span>ColorHunter<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-9 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colorhunter\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colorhunter\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorhunter.jpg\" class=\"img-responsive wp-image-78960\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorhunter-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorhunter-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorhunter.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-28\"><p><strong>Color Hunter<\/strong> es una web que te permite \u00fanicamente obtener cual es la gama de colores que se ha utilizado en una fotograf\u00eda con todos sus respectivos c\u00f3digos. Permite guardar todas las fotograf\u00edas que hemos seleccionado, tambi\u00e9n subir las nuestras que queremos analizar o algunas ya analizadas.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-6 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/colorhunter\"><span class=\"fusion-button-text\">Ir a ColorHunter<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-11 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-27 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"color-picker-jquery\"><\/span>Color Picker Jquery<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-10 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone jquery color \" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone jquerycolor\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-jquerycolor.jpg\" class=\"img-responsive wp-image-78962\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-jquerycolor-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-jquerycolor-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-jquerycolor.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-29\"><p>Este <strong>Color Picker Jquery<\/strong> es un plug-in que permite a\u00f1adir a tus documentos los elementos CSS directamente desde la aplicaci\u00f3n lo \u00fanico que debes de hacer es seleccionar los elementos que vas a cambiar con Jquery y usar este plug-in. Permite seleccionar en una gran paleta de colores del plug-in as\u00ed como devuelve los c\u00f3digos de colores en distintos formatos.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-7 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\" https:\/\/ignaciosantiago.com\/ir-a\/colorpickerjquery\"><span class=\"fusion-button-text\">Ir a Color Picker Jquery<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-12 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-28 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"copaso\"><\/span>Copaso<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-11 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colour lovers\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colour lovers\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-colour-lovers.jpg\" class=\"img-responsive wp-image-78945\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-colour-lovers-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-colour-lovers-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-colour-lovers.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-30\"><p>Este <strong>Color Palette Software<\/strong> (Copaso) es una herramienta para la selecci\u00f3n de colores de forma avanzada que te permitir\u00e1 seleccionar tus colores de una manera muy profesional, aunque si deseas hacerlo de una forma m\u00e1s sencilla tambi\u00e9n ofrece una paleta de colores para este nivel. Devuelve los c\u00f3digos en HEX, RGB, CMYK y HSV. Tambi\u00e9n lo hace sobre fotos.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-8 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\" https:\/\/ignaciosantiago.com\/ir-a\/copaso\"><span class=\"fusion-button-text\">Ir a Copaso<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-13 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-29 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"color-spire\"><\/span>Color Spire<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-12 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colorspire\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colorspire\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorspire.jpg\" class=\"img-responsive wp-image-78961\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorspire-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorspire-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-colorspire.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-31\"><p>Esta herramienta <strong>Color Spire <\/strong>permite una completa selecci\u00f3n de colores mediante el uso de todos los c\u00f3digos que hemos citado anteriormente que har\u00e1n que sea m\u00e1s c\u00f3modo para ti seleccionarlos. Tiene una interfaz muy sencilla y permite que d\u00e1ndole a un solo bot\u00f3n los colores se puedan modificar, es decir, los podemos hacer m\u00e1s claros, m\u00e1s oscuros, saturarlos o desaturarlos.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-9 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/colorspire\"><span class=\"fusion-button-text\">Ir a Color Spire<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-14 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-30 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"colorzilla\"><\/span>ColorZilla<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-13 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colorzilla\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone colorzilla\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-colorzilla-copia.jpg\" class=\"img-responsive wp-image-78944\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-colorzilla-copia-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-colorzilla-copia-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-colorzilla-copia.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-32\"><p><strong>ColorZilla<\/strong> es una extensi\u00f3n para el navegador de Google Chrome y Mozilla Firefox que asiste desarrolladores y dise\u00f1adores gr\u00e1ficos con tareas de colores. Esta extensi\u00f3n incluye una paleta de colores, un creador CSS de degradados y un cuentagotas que te permitir\u00e1n analizar cada pixel de una p\u00e1gina web.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-10 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/colorzilla\"><span class=\"fusion-button-text\">Ir a ColorZilla<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-15 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-31 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"google-color-picker\"><\/span>Google Color Picker<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-14 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone google color picker\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone google color picker\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-google.jpg\" class=\"img-responsive wp-image-78947\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-google-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-google-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-google.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-33\"><p><strong>Google Color Picker es <\/strong>una herramienta muy \u00fatil y sencilla de usar ya que esta se encuentra en el propio navegador de Google y te permite seleccionar con una interfaz muy sencilla los colores que necesites a\u00f1adir para tu p\u00e1gina web. Esta herramienta tambi\u00e9n te devuelve en color en todos los c\u00f3digos importantes que hemos mencionado.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-11 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/googlecolorpicker\"><span class=\"fusion-button-text\">Ir a Google Color Picker<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-16 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-32 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"hailpixel\"><\/span>HailPixel<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-15 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone hail pixel\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone hailpixel\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-hailpixel-copia.jpg\" class=\"img-responsive wp-image-78948\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-hailpixel-copia-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-hailpixel-copia-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-hailpixel-copia.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-34\"><p><strong>Hail P\u00edxel <\/strong>es una herramienta muy intuitiva y sencilla de utilizar. Cuando entras en la web directamente entras en una pantalla completa de todo color y simplemente usando el cursor y pinchando alrededor del color que tiene te devuelve el c\u00f3digo de color en formato HEX, permite la descarga de la aplicaci\u00f3n para m\u00f3vil y tiene una peque\u00f1a herramienta de ayuda en caso de no saber utilizarla.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-12 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/hailpixel\"><span class=\"fusion-button-text\">Ir a Hail Pixel<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-17 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-33 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"herramienta-seleccion-color\"><\/span>Herramienta Selecci\u00f3n Color<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-16 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone herramienta seleccion color\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone herramienta seleccion color\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-herramienta-seleccion-color.jpg\" class=\"img-responsive wp-image-78949\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-herramienta-seleccion-color-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-herramienta-seleccion-color-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-herramienta-seleccion-color.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-35\"><p>Esta <strong>Herramienta para seleccionar color <\/strong>desarrollada por Mozilla facilita crear, ajustar y experimentar con colores personalizados para el uso en la web. Adem\u00e1s, facilita convertir estos a varios formatos soportables por CSS y soporta el control de Alpha en el RGB y en HSL. Cada color se presenta en los distintos formatos y permite el uso de un cuentagotas para los distintos colores.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-13 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/herramienta-seleccion-color\"><span class=\"fusion-button-text\">Ir a Herramienta Seleccion de Color<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-18 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-34 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"hsl-picker\"><\/span>HSL Picker<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-17 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone hsl picker\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone hsl color picker\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-hsl-color-picker-copia.jpg\" class=\"img-responsive wp-image-78950\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-hsl-color-picker-copia-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-hsl-color-picker-copia-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-hsl-color-picker-copia.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-36\"><p>Esta herramienta <strong>HSL Picker <\/strong>permite en su web mediante el uso de una interfaz la selecci\u00f3n de colores mediante el movimiento de la interfaz adaptada, permite seleccionarla desde el modo HSL el cual es m\u00e1s intuitivo y convierte el color seleccionado a otros c\u00f3digos para el uso en la web. Con esta herramienta tambi\u00e9n podemos a\u00f1adir la opacidad.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-14 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/hslpicker\"><span class=\"fusion-button-text\">Ir a HSL Picker<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-19 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-35 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"html-color-codes\"><\/span>HTML Color Codes<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-18 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone html color codes\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone html color codes\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-html-color-codes.jpg\" class=\"img-responsive wp-image-78951\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-html-color-codes-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-html-color-codes-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-html-color-codes.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-37\"><p>Con esta herramienta <strong>HTML Color Codes <\/strong>la b\u00fasqueda del color perfecto nunca hab\u00eda sido tan sencilla, puedes usar esta interfaz para seleccionar millones de colores y combinarlos con las armon\u00edas crom\u00e1ticas. Permite la descarga de los colores que has seleccionado para poder guardarlos y adem\u00e1s devuelve los colores en los distintos c\u00f3digos utilizables por todo el sistema CSS y HTML.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-15 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/htmlcolorcodes\"><span class=\"fusion-button-text\">Ir a HTML Color Codes<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-20 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-36 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"image-color-picker\"><\/span>Image Color Picker<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-19 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone image color picker\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone image color picker\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-image-color-picker.jpg\" class=\"img-responsive wp-image-78952\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-image-color-picker-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-image-color-picker-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-image-color-picker.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-38\"><p><strong>Image Color Picker <\/strong>es una herramienta que permite utilizar la interfaz de selecci\u00f3n de im\u00e1genes para poder pinchar sobre uno de estos p\u00edxeles seleccionados y que te devuelva el color en todos los formatos existentes de HTML y CSS. Permite obtenerlo desde una imagen predeterminada o subir tu la imagen que desees analizar.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-16 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/imagecolorpicker\"><span class=\"fusion-button-text\">Ir a Image Color Picker<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-21 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-37 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"just-color-picker\"><\/span>Just Color Picker<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-20 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone just color picker\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone just color pick\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-just-color-pick.jpg\" class=\"img-responsive wp-image-78953\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-just-color-pick-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-just-color-pick-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-just-color-pick.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-39\"><p><strong>Just Color Picker <\/strong>es una herramienta descargable gratuita y portable que te permitir\u00e1 llevarte a cualquier lugar del mundo est\u00e1 magn\u00edfica aplicaci\u00f3n. Perfecta para dise\u00f1adores y desarrolladores podr\u00e1s entre otras cosas utilizar todos los formatos de c\u00f3digos, utilizarlo como herramienta para Photoshop y un sistema de autocopiado de c\u00f3digos, todo esto con una interfaz simple.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-17 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/justcolorpicker\"><span class=\"fusion-button-text\">Ir a Just Color Picker<\/span><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-22 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:5.76%;--awb-width-medium:33.333333333333%;--awb-spacing-right-medium:5.76%;--awb-spacing-left-medium:5.76%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-38 fusion-sep-none fusion-title-center fusion-title-text fusion-title-size-three\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:22.5;line-height:1.17;\"><span class=\"ez-toc-section\" id=\"web-fx\"><\/span>Web FX<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div><div class=\"fusion-image-element \" style=\"text-align:center;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-21 hover-type-none\" style=\"border:1px solid #000000;\"><img decoding=\"async\" width=\"450\" height=\"250\" alt=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone webfx\" title=\"mejores apps herramientas convertir codigos color elegir combinaciones esquemas colores html css rgba hsla hex cmyk pantone webfx\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-webfx.jpg\" class=\"img-responsive wp-image-78954\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-webfx-200x111.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-webfx-400x222.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-convertir-codigos-color-elegir-combinaciones-esquemas-colores-html-css-rgba-hsla-hex-cmyk-pantone-webfx.jpg 450w\" sizes=\"(max-width: 640px) 100vw, 400px\" \/><\/span><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;width:100%;\"><\/div><div class=\"fusion-alert alert success alert-success fusion-alert-left fusion-alert-capitalize awb-alert-native-link-color alert-shadow\" role=\"alert\"><div class=\"fusion-alert-content-wrapper\"><span class=\"alert-icon\"><i class=\"awb-icon-check-circle\" aria-hidden=\"true\"><\/i><\/span><span class=\"fusion-alert-content\"><strong>Gratis<\/strong><\/span><\/div><\/div><div class=\"fusion-text fusion-text-40\"><p><strong>Web FX <\/strong>es una herramienta sencilla y en l\u00ednea que permite la selecci\u00f3n de colores y sus respectivos c\u00f3digos para el uso CSS mediante una paleta de colores similar al Photoshop. Permite guardar hasta 12 colores y sus combinaciones respectivas como colores complementarios o anal\u00f3gicos. Tambi\u00e9n puedes descarg\u00e1rtelos.<\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-18 fusion-button-span-yes fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer sponsored\" href=\"https:\/\/ignaciosantiago.com\/ir-a\/webfx\"><span class=\"fusion-button-text\">Ir a WebFX<\/span><\/a><\/div><\/div><\/div><\/div><\/div>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-8 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-23 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-39 fusion-title-text fusion-title-size-two\" style=\"--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:26.25;line-height:1.15;\"><span class=\"ez-toc-section\" id=\"conclusion-convierte-cualquier-codigo-de-color-para-cualquier-diseno\"><\/span>Conclusi\u00f3n: Convierte cualquier c\u00f3digo de color para cualquier dise\u00f1o<span class=\"ez-toc-section-end\"><\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-41\"><p>Como has podido comprobar, <strong>la teor\u00eda del color es algo que hay que tomarse en serio<\/strong>. Ahora ya sabes manejarte a nivel b\u00e1sico con las <strong>propiedades<\/strong> m\u00e1s importantes de los colores para poder combinarlos, los<strong> tipos de c\u00f3digos de colores<\/strong> habituales en dise\u00f1o gr\u00e1fico y web, los <strong>esquemas y tipos de combinaciones de colores<\/strong> habituales y sabes <strong>qu\u00e9 significan los colores<\/strong> y qu\u00e9 colores combinan mejor con otros, la importancia de los colores en dise\u00f1o gr\u00e1fico y web y las <strong>mejores apps y herramientas online para convertir c\u00f3digos de colores<\/strong>.<\/p>\n<p>Estoy seguro de que te a a facilitar mucho el trabajo, no s\u00f3lo de <strong>convertir c\u00f3digos de colores<\/strong>, sino de elegirlos y combinarlos (y que no te vuelvas loco). En mi opini\u00f3n debes de conocer a fondo los colores de tu marca y sus c\u00f3digos, as\u00ed como las distintas combinaciones que tengan con otros colores. Yo, para convertir los c\u00f3digos de colores utilizo mucho <strong>Paletton<\/strong>, que te permite convertir cualquier c\u00f3digo, pero tambi\u00e9n obtener todas las combinaciones posibles de cada color, y <strong>W3Schools<\/strong>, una herramientas maestra y muy f\u00e1cil de usar para <strong>realizar la conversi\u00f3n de colores<\/strong>.<\/p>\n<p>\u00bfQu\u00e9 te ha parecido esta gu\u00eda sobre <strong>convertidores de c\u00f3digos de colores<\/strong>? \u00bfConoc\u00edas todos los tipos de c\u00f3digos? \u00bfQu\u00e9 te parecen las aplicaciones y p\u00e1ginas que te he mostrado? \u00bfYa hab\u00edas utilizado estas aplicaciones antes? \u00bfCrees que no he mencionado algo importante? \u00bfQuieres contar alguna experiencia? Entonces te pido que <strong>dejes un comentario<\/strong>. Da igual que sea o una duda o un simple gracias, pero me alegrar\u00e9 mucho de leerlo y responderlo.<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-9 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-background-position:left top;--awb-border-sizes-top:0px;--awb-border-sizes-bottom:0px;--awb-border-sizes-left:0px;--awb-border-sizes-right:0px;--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-24 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-42\" style=\"--awb-font-size:var(--awb-custom_typography_3-font-size);--awb-line-height:var(--awb-custom_typography_3-line-height);--awb-letter-spacing:var(--awb-custom_typography_3-letter-spacing);--awb-text-transform:var(--awb-custom_typography_3-text-transform);--awb-text-font-family:var(--awb-custom_typography_3-font-family);--awb-text-font-weight:var(--awb-custom_typography_3-font-weight);--awb-text-font-style:var(--awb-custom_typography_3-font-style);\"><!-- FeedbackWP Plugin --><div  class=\"rmp-widgets-container rmp-wp-plugin rmp-main-container js-rmp-widgets-container js-rmp-widgets-container--78897 \"  data-post-id=\"78897\">    <!-- Rating widget -->  <div class=\"rmp-rating-widget js-rmp-rating-widget\">          <p class=\"rmp-heading rmp-heading--title\">        \u00bfTe ha gustado el contenido?      <\/p>            <div class=\"rmp-rating-widget__icons\">      <ul class=\"rmp-rating-widget__icons-list js-rmp-rating-icons-list\">                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"1\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"2\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"3\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"4\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"\" data-value=\"5\">            <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>              <\/ul>    <\/div>    <p class=\"rmp-rating-widget__hover-text js-rmp-hover-text\"><\/p>    <button class=\"rmp-rating-widget__submit-btn rmp-btn js-submit-rating-btn\">          <\/button>    <p class=\"rmp-rating-widget__results js-rmp-results \">      Puntuaci\u00f3n media <span class=\"rmp-rating-widget__results__rating js-rmp-avg-rating\">5<\/span> \/ 5. Votos: <span class=\"rmp-rating-widget__results__votes js-rmp-vote-count\">1229<\/span>    <\/p>    <p class=\"rmp-rating-widget__not-rated js-rmp-not-rated rmp-rating-widget__not-rated--hidden\">      \u00a1Todav\u00eda no hay votos! S\u00e9 el primero en valorar el contenido.    <\/p>    <p class=\"rmp-rating-widget__msg js-rmp-msg\"><\/p>  <\/div>  <!--Structured data -->  <script type=\"application\/ld+json\">{  \"@context\": \"http:\/\/schema.org\",  \"@type\": \"Product\",  \"aggregateRating\": {    \"@type\": \"AggregateRating\",    \"bestRating\": \"5\",    \"ratingCount\": \"1229\",    \"ratingValue\": \"5\"  },  \"image\": \"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2019\/12\/mejores-apps-herramientas-online-convertir-codigos-colores-html-rgb-rgba-hsl-hsla-hex-cmyk-pantone-hsv-hwb-6.jpg\",  \"name\": \"21 Recursos para CONVERTIR C\u00f3digos de COLORES\",  \"description\": \"21 Recursos para CONVERTIR C\u00f3digos de COLORES\"}<\/script>      <\/div>\n<\/div><\/div><\/div><\/div><\/div>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-10 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-bottom:40px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-25 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-19 fusion-button-span-yes fusion-button-default-type\" style=\"--button_text_transform:var(--awb-custom_typography_2-text-transform);--button_font_size:var(--awb-custom_typography_2-font-size);--button_line_height:var(--awb-custom_typography_2-line-height);--button_typography-letter-spacing:var(--awb-custom_typography_2-letter-spacing);--button_typography-font-family:var(--awb-custom_typography_2-font-family);--button_typography-font-weight:var(--awb-custom_typography_2-font-weight);--button_typography-font-style:var(--awb-custom_typography_2-font-style);\" target=\"_self\" href=\"#respond\"><span class=\"fusion-button-text\">\u00a1Quiero saber qu\u00e9 opinas! Deja tu comentario<\/span><\/a><\/div><\/div><\/div><\/div><\/div>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-11 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-center fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-26 fusion_builder_column_1_1 1_1 fusion-flex-column fusion-flex-align-self-flex-start fusion-column-no-min-height\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-40 fusion-title-center fusion-title-text fusion-title-size-div\" style=\"--awb-margin-top:0px;--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;--awb-font-size:var(--awb-typography2-font-size);\"><div class=\"title-sep-container title-sep-container-left\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><span class=\"awb-title-spacer\"><\/span><div class=\"fusion-title-heading title-heading-center title-heading-tag fusion-responsive-typography-calculated\" style=\"font-family:var(--awb-typography2-font-family);font-weight:var(--awb-typography2-font-weight);font-style:var(--awb-typography2-font-style);margin:0;font-size:1em;letter-spacing:var(--awb-typography2-letter-spacing);text-transform:var(--awb-typography2-text-transform);--fontSize:37.5;line-height:var(--awb-typography2-line-height);\">Tambi\u00e9n te puede interesar esta gu\u00eda<\/div><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep-single sep-solid\" style=\"border-color:var(--awb-custom_color_8);\"><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-27 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:3.84%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-column\"><div class=\"fusion-image-element \" style=\"text-align:center;--awb-liftup-border-radius:0.938em;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><div class=\"awb-image-frame awb-image-frame-22 imageframe-liftup imageframe-22\"><span class=\" fusion-imageframe imageframe-none imageframe-22\" style=\"border:1px solid var(--awb-custom_color_6);border-radius:0.938em;\"><a class=\"fusion-no-lightbox\" href=\"https:\/\/ignaciosantiago.com\/herramientas-marketing-online\/\" target=\"_blank\" aria-label=\"mejores herramientas marketing online digital\" rel=\"noopener noreferrer\"><img decoding=\"async\" width=\"600\" height=\"300\" alt=\"mejores herramientas marketing online\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/10\/mejores-herramientas-marketing-online-digital-2.jpg\" class=\"img-responsive wp-image-34399\" srcset=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/10\/mejores-herramientas-marketing-online-digital-2-200x100.jpg 200w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/10\/mejores-herramientas-marketing-online-digital-2-400x200.jpg 400w, https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2014\/10\/mejores-herramientas-marketing-online-digital-2.jpg 600w\" sizes=\"(max-width: 640px) 100vw, 600px\" \/><\/a><\/span><\/div><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-28 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:1.25em;--awb-spacing-left-large:3.84%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-41 fusion-sep-none fusion-title-text fusion-title-size-div\" style=\"--awb-margin-top:0px;--awb-margin-right:0px;--awb-margin-left:0px;--awb-margin-right-small:0px;--awb-margin-left-small:0px;--awb-font-size:var(--awb-typography5-font-size);\"><div class=\"fusion-title-heading title-heading-left title-heading-tag fusion-responsive-typography-calculated\" style=\"font-family:var(--awb-typography5-font-family);font-weight:var(--awb-typography5-font-weight);font-style:var(--awb-typography5-font-style);margin:0;font-size:1em;letter-spacing:var(--awb-typography5-letter-spacing);text-transform:var(--awb-typography5-text-transform);--fontSize:22.5;line-height:var(--awb-typography5-line-height);\"><a href=\"https:\/\/ignaciosantiago.com\/herramientas-marketing-online\/\" target=\"_blank\" rel=\"noopener noreferrer\">100 HERRAMIENTAS de MARKETING Online Esenciales<\/a><\/div><\/div><div class=\"fusion-text fusion-text-43\"><p>Cuando tratas con <strong>marketing digital<\/strong> significa que manejas gran cantidad de datos y tareas, que es cr\u00edtico controlar. Para ello, es muy importante rodearse de <strong>herramientas online<\/strong> que te permitan <strong>administrar tu estrategia de marketing online<\/strong> y que hagan que el trabajo sea mucho m\u00e1s f\u00e1cil.<\/p>\n<\/div><div ><a class=\"fusion-button button-flat fusion-button-default-size button-default fusion-button-default button-20 fusion-button-default-span fusion-button-default-type\" target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/ignaciosantiago.com\/herramientas-marketing-online\/\"><span class=\"fusion-button-text fusion-button-text-right\">Ver las herramientas<\/span><span class=\"fusion-button-icon-divider button-icon-divider-right\"><i class=\"icon-customflecha-derecha\" aria-hidden=\"true\"><\/i><\/span><\/a><\/div><\/div><\/div><\/div><\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":79142,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1030,1022],"tags":[],"class_list":["post-78897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-herramientas-recursos-online","category-diseno-desarrollo-web"],"_links":{"self":[{"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/posts\/78897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/comments?post=78897"}],"version-history":[{"count":0,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/posts\/78897\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/media\/79142"}],"wp:attachment":[{"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/media?parent=78897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/categories?post=78897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ignaciosantiago.com\/wp-json\/wp\/v2\/tags?post=78897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}