{"id":656,"date":"2014-04-07T00:44:55","date_gmt":"2014-04-06T23:44:55","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=656"},"modified":"2021-08-07T16:16:07","modified_gmt":"2021-08-07T15:16:07","slug":"colores","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/colores\/","title":{"rendered":"Colores"},"content":{"rendered":"<p style=\"text-align: justify;\">Podemos modificar un color pulsando cualquier bot\u00f3n de color de los que aparecen en el panel del\u00a0<b>Espacio<\/b>, en el panel de un\u00a0<b>Control gr\u00e1fico<\/b>\u00a0o en los paneles de configuraci\u00f3n de\u00a0<b>gr\u00e1ficos<\/b>. Al pulsar uno de estos botones aparece la ventana de configuraci\u00f3n de colores que tiene el aspecto que se observa en la siguiente escena:<\/p>\n<div style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Colores_JS\/colores1.html\" width=\"610\" height=\"370\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/div>\n<div style=\"text-align: center;\">(Puede descargar \u00a0esta escena y todas las de este art\u00edculo desde <a href=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Colores_JS.zip\">este enlace<\/a>)<\/div>\n<div style=\"text-align: center;\"><\/div>\n<p style=\"text-align: justify;\">En la lista podemos seleccionar el color por nombre. A la izquierda se muestran la\u00a0<b>transparencia<\/b>\u00a0y las cantidades de\u00a0<b>rojo<\/b>,\u00a0<b>verde<\/b>\u00a0y\u00a0<b>azul<\/b>\u00a0que componen el\u00a0<b>color<\/b>, en notaci\u00f3n hexadecimal. \u00a0Al centro aparecen cuatro barras de desplazamiento con las que se puede aumentar o disminuir la transparencia (ver ejemplo en la siguiente escena) y las cantidades de rojo, verde y azul del color. A la derecha aparece un cuadro del color seleccionado.<\/p>\n<div style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Colores_JS\/colores2.html\" width=\"610\" height=\"570\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/div>\n<p style=\"text-align: justify;\">La tabla siguiente muestra las expresiones hexadecimales de los colores con nombre. Las dos primeras letras indican la cantidad de rojo, la tercera y la cuarta la cantidad de verde y las dos \u00faltimas la cantidad de azul. Todos estos colores son completamente opacos por lo cual la componente de transparencia es cero.<\/p>\n<p><a href=\"http:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/colores.png\"><img class=\"size-full wp-image-744 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/colores.png\" alt=\"colores\" width=\"442\" height=\"344\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/colores.png 442w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/colores-300x233.png 300w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Si la componente de transparencia es mayor que cero, se agrega a la izquierda de la representaci\u00f3n hexadecimal del n\u00famero. As\u00ed, por ejemplo, el color aaffff00 es un amarillo bastante transparente y 440000ff es un azul apenas un poco transparente.<\/p>\n<p style=\"text-align: justify;\">Tambi\u00e9n se pueden escribir los colores como expresiones variables cuyos valores deben estar entre 0 y 1, con lo cual pueden obtenerse gr\u00e1ficas de colores variados, como se ilustra en la siguiente escena, en la que se han definido colores variables para la gr\u00e1fica y para el control gr\u00e1fico. Adem\u00e1s el relleno de la gr\u00e1fica tiene transparencia variable.<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Colores_JS\/colores3.html\" width=\"610\" height=\"520\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/p>\n<p style=\"text-align: justify;\">Se sugiere al lector estudiar las expresiones que encontrar\u00e1 en los editores de configuraci\u00f3n de colores de esta escena. La siguiente imagen muestra la ventana de configuraci\u00f3n del color del relleno superior de la gr\u00e1fica de la escena anterior.<\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/color.png\"><img class=\"size-full wp-image-658 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/color.png\" alt=\"color\" width=\"498\" height=\"210\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/color.png 498w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/color-300x126.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\"><span style=\"line-height: 1.5em;\">Si deseamos copiar un color de los que aparecen en la escena, hay que abrir la ventana de configuraci\u00f3n correspondiente, pulsar\u00a0<\/span><b style=\"line-height: 1.5em;\">copiar<\/b><span style=\"line-height: 1.5em;\">, luego ir a la ventana de configuraci\u00f3n en donde se desea poner el color y pulsar\u00a0<\/span><b style=\"line-height: 1.5em;\">pegar<\/b><span style=\"line-height: 1.5em;\">.<\/span><\/p>\n<p style=\"text-align: justify;\">\n","protected":false},"excerpt":{"rendered":"<p>Podemos modificar un color pulsando cualquier bot\u00f3n de color de los que aparecen en el panel del\u00a0Espacio, en el panel de un\u00a0Control gr\u00e1fico\u00a0o en los paneles de configuraci\u00f3n de\u00a0gr\u00e1ficos. Al pulsar uno de estos botones aparece la ventana de configuraci\u00f3n de colores que tiene el aspecto que se observa en la siguiente escena: (Puede descargar \u00a0esta escena y todas las de este art\u00edculo desde este enlace) En la lista podemos seleccionar el color por nombre. A la izquierda se muestran la\u00a0transparencia\u00a0y las cantidades de\u00a0rojo,\u00a0verde\u00a0y\u00a0azul\u00a0que componen el\u00a0color, en notaci\u00f3n hexadecimal. \u00a0Al centro aparecen cuatro barras de desplazamiento con las que se<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/colores\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[67],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/656"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=656"}],"version-history":[{"count":25,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/656\/revisions"}],"predecessor-version":[{"id":3509,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/656\/revisions\/3509"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}