{"id":22149,"date":"2014-07-08T09:31:41","date_gmt":"2014-07-08T07:31:41","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=22149"},"modified":"2014-07-08T09:31:41","modified_gmt":"2014-07-08T07:31:41","slug":"css-colorguard-keep-a-watchful-eye-on-your-css-colors","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2014\/07\/08\/css-colorguard-keep-a-watchful-eye-on-your-css-colors\/","title":{"rendered":"CSS Colorguard &#8211; keep a watchful eye on your CSS colors"},"content":{"rendered":"<!-- google_ad_section_start -->\n<p><a href=\"https:\/\/github.com\/SlexAxton\/css-colorguard\">CSS Colorguard<\/a> &#8211; keep a watchful eye on your CSS colors.<\/p>\n<p>Here is a better description from the README:<\/p>\n<blockquote><p>Every CSS project starts out with good intentions, but inevitably, one too many people eye-dropper colors into nooks and crannies that you never knew existed. CSS Colorguard helps you maintain the color set that you want, and warns you when colors you&#8217;ve added are too similar to ones that already exist. Naturally, it&#8217;s all configurable to your tastes.<\/p><\/blockquote>\n<p>And here is my favorite part:<\/p>\n<blockquote><p>Colorguard uses the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Color_difference#CIEDE2000\">CIEDE2000<\/a> algorithm to determine the similarity of each of the colors in your CSS file. This algorithm is quite complex, but is used in the broadcasting community as the best approximation of human ability to discern differences in color. RGB on the other hand, is pretty bad at representing differences in color purely based on the numerical difference of the hex values.<\/p>\n<p>Luckily, <a href=\"https:\/\/github.com\/markusn\/color-diff\">someone else already implemented CIEDE2000<\/a>, so I didn&#8217;t have to. Tight. Cause this thing is mathy as hell.<\/p><\/blockquote>\n<p><a href=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/07\/CIEDE2000-math.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"22150\" data-permalink=\"https:\/\/mamchenkov.net\/wordpress\/2014\/07\/08\/css-colorguard-keep-a-watchful-eye-on-your-css-colors\/ciede2000-math\/\" data-orig-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/07\/CIEDE2000-math.png?fit=733%2C940&amp;ssl=1\" data-orig-size=\"733,940\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"CIEDE2000 math\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/07\/CIEDE2000-math.png?fit=660%2C846&amp;ssl=1\" class=\"aligncenter size-medium wp-image-22150\" src=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/07\/CIEDE2000-math-389x500.png?resize=389%2C500&#038;ssl=1\" alt=\"CIEDE2000 math\" width=\"389\" height=\"500\" srcset=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/07\/CIEDE2000-math.png?resize=389%2C500&amp;ssl=1 389w, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/07\/CIEDE2000-math.png?resize=500%2C641&amp;ssl=1 500w, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/07\/CIEDE2000-math.png?w=733&amp;ssl=1 733w\" sizes=\"auto, (max-width: 389px) 100vw, 389px\" \/><\/a><\/p>\n<!-- google_ad_section_end -->\n","protected":false},"excerpt":{"rendered":"<!-- google_ad_section_start -->\n<p>CSS Colorguard &#8211; keep a watchful eye on your CSS colors. Here is a better description from the README: Every CSS project starts out with good intentions, but inevitably, one too many people eye-dropper colors into nooks and crannies that you never knew existed. CSS Colorguard helps you maintain the color set that you want, &hellip; <a href=\"https:\/\/mamchenkov.net\/wordpress\/2014\/07\/08\/css-colorguard-keep-a-watchful-eye-on-your-css-colors\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">CSS Colorguard &#8211; keep a watchful eye on your CSS colors<\/span><\/a><\/p>\n<!-- google_ad_section_end -->\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[850,3018,1517,1139,1157,1330],"keyring_services":[],"class_list":["post-22149","post","type-post","status-publish","format-link","hentry","category-general","category-programming","category-technology","category-web-work","tag-algorithms","tag-color-theory","tag-css","tag-javascript","tag-web-design","tag-web-development","post_format-post-format-link"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":27818,"url":"https:\/\/mamchenkov.net\/wordpress\/2017\/07\/31\/grabient-css-gradients-the-easy-way\/","url_meta":{"origin":22149,"position":0},"title":"Grabient &#8211; CSS gradients the easy way","author":"Leonid Mamchenkov","date":"July 31, 2017","format":false,"excerpt":"Grabient is a quick and easy to use online tool for generating CSS gradients. \u00a0You can pick any two colors, adjust the gradient angle and shift, and generate a CSS snippets to add to your web project.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2017\/07\/grabient-500x419.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":16835,"url":"https:\/\/mamchenkov.net\/wordpress\/2012\/10\/14\/lavish\/","url_meta":{"origin":22149,"position":1},"title":"Lavish","author":"Leonid Mamchenkov","date":"October 14, 2012","format":"link","excerpt":"Lavish Lavish is a color scheme generator for Twitter Bootstrap CSS framwork. \u00a0The colors are based on a specified image.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":23591,"url":"https:\/\/mamchenkov.net\/wordpress\/2015\/02\/24\/css-puns-css-jokes\/","url_meta":{"origin":22149,"position":2},"title":"CSS Puns &#038; CSS Jokes","author":"Leonid Mamchenkov","date":"February 24, 2015","format":"link","excerpt":"CSS Puns & CSS Jokes - these have been circulating around for a bit, so I thought I'd add the link to my archives too.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"css puns","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2015\/02\/css-puns-500x229.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":23815,"url":"https:\/\/mamchenkov.net\/wordpress\/2015\/04\/06\/css-dig-analyze-your-css-in-a-new-way\/","url_meta":{"origin":22149,"position":3},"title":"CSS Dig &#8211; Analyze your CSS in a new way","author":"Leonid Mamchenkov","date":"April 6, 2015","format":"link","excerpt":"CSS Dig - Analyze your CSS in a new way (Google Chrome extension)","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":28254,"url":"https:\/\/mamchenkov.net\/wordpress\/2017\/11\/28\/css-purge-css-cleaner\/","url_meta":{"origin":22149,"position":4},"title":"css-purge &#8211; CSS cleaner","author":"Leonid Mamchenkov","date":"November 28, 2017","format":false,"excerpt":"css-purge is a tool that does the following: A CSS tool written in Node JS as a command line app or library for the purging, burning, reducing, shortening, compressing, cleaning, trimming and formatting of duplicate, extra, excess or bloated CSS.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25116,"url":"https:\/\/mamchenkov.net\/wordpress\/2016\/01\/11\/css-styleguides\/","url_meta":{"origin":22149,"position":5},"title":"CSS Styleguides","author":"Leonid Mamchenkov","date":"January 11, 2016","format":false,"excerpt":"I came across a couple of CSS guidelines while catching up with my feeds over the weekend. \u00a0Here they are: cssguidelin.es - high-level advice and guidelines for writing sane, manageable, scalable CSS. grvcoelho\/css - opinionated CSS styleguide for scalable applications","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/22149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/comments?post=22149"}],"version-history":[{"count":0,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/22149\/revisions"}],"wp:attachment":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/media?parent=22149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/categories?post=22149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/tags?post=22149"},{"taxonomy":"keyring_services","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/keyring_services?post=22149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}