{"id":1316,"date":"2020-04-28T08:00:06","date_gmt":"2020-04-28T07:00:06","guid":{"rendered":"http:\/\/www.webposible.com\/blog\/?p=1316"},"modified":"2020-04-28T13:33:13","modified_gmt":"2020-04-28T12:33:13","slug":"paletas-de-colores-css-con-el-esquema-de-color-hsl-y-la-funcion-calc","status":"publish","type":"post","link":"http:\/\/www.webposible.com\/blog\/2020\/paletas-de-colores-css-con-el-esquema-de-color-hsl-y-la-funcion-calc\/","title":{"rendered":"Paletas de colores CSS con el esquema de color HSL y la funci\u00f3n calc()"},"content":{"rendered":"<p>Un art\u00edculo interesante <a href=\"https:\/\/css-tricks.com\/creating-color-themes-with-custom-properties-hsl-and-a-little-calc\/\" lang=\"en\" hreflang=\"en\">Creating Color Themes With Custom Properties, HSL, and a Little calc()<\/a>, sobre un par de ideas que llevo d\u00e1ndole vueltas durante alg\u00fan tiempo. Elementos:<\/p>\n<ul>\n<li>Variables CSS<\/li>\n<li>Usar el esquema de color <abbr title=\"Hue, Saturation, Lightness\" lang=\"en\">HSL<\/abbr> en lugar del hexadecidal.<\/li>\n<li>La funci\u00f3n calc() de CSS<\/li>\n<\/ul>\n<p>Los motivos:<\/p>\n<ul>\n<li>La insuperable ventaja de trabajar con <abbr title=\"Hue, Saturation, Lightness\" lang=\"en\">HSL<\/abbr> en CSS frente a hexadecimal a la hora de trabajar con el color.<\/li>\n<li>La posibilidad de usar y reutilizar variables en CSS (y el ahorro de trabajo que supone)<\/li>\n<li>La funci\u00f3n <code>calc()<\/code> que permite automatizar c\u00e1lculos de colores.<\/li>\n<li>Y principalmente, porque los navegadores que no interpretaban estas caracter\u00edsticas, est\u00e1n en el limbo<\/li>\n<\/ul>\n<p>Habr\u00e1 quien dir\u00e1 que con SASS y similares, ya se puede hacer lo mismo, pero no siempre se tiene libertad para poder instalar lo necesario y poder utilizarla. No lo digo yo, lo dice <em>un amigo<\/em>.<\/p>\n<p>Obviamente mi sistema de utilizar inkscape para crear variaciones de color (en tono, o luminosidad) haciendo cajitas para tener de un vistazo la paleta que uso, se puede mejorar mucho \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un art\u00edculo interesante Creating Color Themes With Custom Properties, HSL, and a Little calc(), sobre un par de ideas que llevo d\u00e1ndole vueltas durante alg\u00fan tiempo. Elementos: Variables CSS Usar el esquema de color HSL en lugar del hexadecidal. La funci\u00f3n calc() de CSS Los motivos: La insuperable ventaja de trabajar con HSL en CSS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1316","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/comments?post=1316"}],"version-history":[{"count":2,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1316\/revisions"}],"predecessor-version":[{"id":1318,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1316\/revisions\/1318"}],"wp:attachment":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/media?parent=1316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/categories?post=1316"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/tags?post=1316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}