{"id":2293,"date":"2012-02-28T00:34:42","date_gmt":"2012-02-27T23:34:42","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=2293"},"modified":"2012-02-28T00:43:21","modified_gmt":"2012-02-27T23:43:21","slug":"css-color-palette-extractor","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/css-color-palette-extractor\/","title":{"rendered":"CSS Color Palette Extractor"},"content":{"rendered":"<p><!--?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?-->There are already many web apps that extract colors from CSS. But none of them seemed to do what I need them to do. So I built my own.<\/p>\n<figure id=\"attachment_2294\" aria-describedby=\"caption-attachment-2294\" style=\"width: 570px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-2294 \" title=\"twitter-bootstrap-extracted-palette\" src=\"http:\/\/svay.com\/blog\/wp-content\/uploads\/2012\/02\/twitter-bootstrap-extracted-palette.png\" alt=\"Twitter Bootstrap extracted palette\" width=\"570\" height=\"171\" srcset=\"https:\/\/svay.com\/blog\/wp-content\/uploads\/2012\/02\/twitter-bootstrap-extracted-palette.png 570w, https:\/\/svay.com\/blog\/wp-content\/uploads\/2012\/02\/twitter-bootstrap-extracted-palette-300x90.png 300w, https:\/\/svay.com\/blog\/wp-content\/uploads\/2012\/02\/twitter-bootstrap-extracted-palette-500x150.png 500w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><figcaption id=\"caption-attachment-2294\" class=\"wp-caption-text\">Twitter Bootstrap extracted palette<\/figcaption><\/figure>\n<figure id=\"attachment_2303\" aria-describedby=\"caption-attachment-2303\" style=\"width: 570px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-2303 \" title=\"facebook-extracted-palette\" src=\"http:\/\/svay.com\/blog\/wp-content\/uploads\/2012\/02\/facebook-extracted-palette.png\" alt=\"Facebook extracted palette\" width=\"570\" height=\"171\" srcset=\"https:\/\/svay.com\/blog\/wp-content\/uploads\/2012\/02\/facebook-extracted-palette.png 570w, https:\/\/svay.com\/blog\/wp-content\/uploads\/2012\/02\/facebook-extracted-palette-300x90.png 300w, https:\/\/svay.com\/blog\/wp-content\/uploads\/2012\/02\/facebook-extracted-palette-500x150.png 500w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><figcaption id=\"caption-attachment-2303\" class=\"wp-caption-text\">Facebook extracted palette<\/figcaption><\/figure>\n<p>My goal was to create a tool that would help me consolidate the palette of an ever growing CSS. To achieve this goal, I needed a tool that can:<\/p>\n<div>\n<ul>\n<li>extract all colors from the CSS code. Most extractors rely on regular expression to perform this task. It may work for most cases, but they tend to fail with rgba or named values.<\/li>\n<li>order colors in a sensible way. I want colors on one side and greyscale on another. I also want colors ordered by hue. Ordering hex values by alphabetical order doesn&#8217;t make sense.<\/li>\n<li>roughly show how much a color is used. This way, I know that lesser used colors might be merged with dominant colors. Obviously, more occurrences in CSS doesn&#8217;t mean that the color will be more present on the website. But that&#8217;s better than nothing.<\/li>\n<\/ul>\n<\/div>\n<p>The result is CSS Color Palette Extractor, a pure JS app that does what I need. You can <strong><a href=\"http:\/\/svay.com\/experiences\/css-color-palette-extractor\/\">try the demo<\/a><\/strong> and <strong><a href=\"https:\/\/github.com\/mauricesvay\/css-color-palette-extractor\">fork it on github<\/a><\/strong>.<\/p>\n<p>On the technical side, the app uses the great <a href=\"http:\/\/glazman.org\/JSCSSP\/\">CSS parser written by Daniel Glazman<\/a> to extract color values. It also includes <a href=\"https:\/\/github.com\/brehaut\/color-js\">code from\u00a0Andrew Brehaut<\/a> for color management\/conversion. My own code is a bit rough but does the job. There are a few known issues. I\u00a0haven&#8217;t\u00a0found how to make the parser work with media queries. If you&#8217;re doing responsive design, simply extract medium per medium. Also, my app cannot extract colors from gradient backgrounds.<\/p>\n<p>It&#8217;s sometimes nice to step back from code and\u00a0analyze what&#8217;s going on. I hope that CSS Color Palette Extractor will\u00a0help you to do just that. If you want to use the code, feel free to <a href=\"https:\/\/github.com\/mauricesvay\/css-color-palette-extractor\">fork it on github<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are already many web apps that extract colors from CSS. But none of them seemed to do what I need them to do. So I built my own. My goal was to create a tool that would help me consolidate the palette of an ever growing CSS. To achieve this goal, I needed a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,29,26,27,21],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2293"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2293"}],"version-history":[{"count":10,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2293\/revisions"}],"predecessor-version":[{"id":2487,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2293\/revisions\/2487"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}