{"id":38089,"date":"2017-09-20T21:01:37","date_gmt":"2017-09-20T13:01:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38089"},"modified":"2018-04-09T16:49:30","modified_gmt":"2018-04-09T08:49:30","slug":"reset-default-css-colors","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/","title":{"rendered":"Colors.css Offers New Defaults for Colors on The Web"},"content":{"rendered":"<p>Finding a great <a href=\"https:\/\/www.hongkiat.com\/blog\/website-color-scheme\/\">color scheme<\/a> for your website is no easy task. But, it just got a lot easier with the <strong><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/clrs.cc\/\">Colors library<\/a><\/strong> by Adam Morse.<\/p>\n<p>This free CSS library <strong>works off the original <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Web_colors\">web colors<\/a><\/strong> that were deemed <strong>\u201cweb safe\u201d<\/strong> and first released with HTML4 back in 1999. As you can imagine, the web has <a href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2017\/\">come a long way<\/a> since then.<\/p>\n<p>With Colors, you can <strong>overwrite the default color choices<\/strong> and use more suitable defaults for your layout. These colors fit together much easier and <strong>create less tension by diluting contrast<\/strong>.<\/p>\n<p>For example, instead of <code>#000<\/code> for black, this library uses <code>#111<\/code> to <strong>keep the same level of darkness<\/strong> while removing some of the jarring contrast. This works much better for text and for backgrounds.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/high-contrast-color-design\/\">Using High Colour Contrast For More Accessible Design<\/a><\/p>\n<p>You can install Colors <strong>via npm<\/strong> or <strong><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/mrmrs\/colors\">through GitHub<\/a><\/strong> by downloading the stylesheet directly.<\/p>\n<p>Best of all, it <strong>comes with free swatches<\/strong> you can import into your design programs for easy access to the colors. The following swatch files are included:<\/p>\n<ul>\n<li><code>.aco<\/code> (Photoshop)<\/li>\n<li><code>.ase<\/code> (Illustrator\/XD)<\/li>\n<li><code>.gpl<\/code> (Gimp\/Inkscape)<\/li>\n<\/ul>\n<p>If you design a lot of mockups with the default colors I absolutely recommend grabbing a copy of these swatches. You\u2019ll be surprised how well these colors can fit into any layout.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/clrs.cc\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/reset-default-css-colors\/02-aaa-colors-accessibility-picker.jpg\" alt=\"Colors.css accessibility\" width=\"1000\" height=\"572\"><\/a><\/figure>\n<p>Plus, Colors.css even has its own <strong><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/clrs.cc\/a11y\/\">accessibility schemes<\/a><\/strong> where you\u2019ll find <strong>90 combinations of colors<\/strong> that meet the WCAG specs for <a href=\"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/\">quality accessibility<\/a>. This is huge for anyone trying to support the widest audience possible and it\u2019s great to see designers that care so much about modern UI\/UX work.<\/p>\n<p>But more importantly, it\u2019s great to see so much progress in the open source community.<\/p>\n<p>It\u2019s funny looking back <a href=\"https:\/\/www.hongkiat.com\/blog\/websites-we-visit-how-they-look-like-10-years-ago\/\">on old websites<\/a> to see how much they\u2019ve improved. And, the same can be said for general design trends, especially color choices and CSS libraries.<\/p>\n<p>To learn more about the Colors library, visit the <strong><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/clrs.cc\/\">main page<\/a><\/strong> and check out the <strong>live examples<\/strong>. You can pull the <code>.css<\/code> file, along with all the swatch files directly from the <strong><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/mrmrs\/colors\">GitHub repo<\/a><\/strong>, too.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/best-color-tools-for-web-designers\/\">Best Color Tools For Web Designers<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Finding a great color scheme for your website is no easy task. But, it just got a lot easier with the Colors library by Adam Morse. This free CSS library works off the original web colors that were deemed \u201cweb safe\u201d and first released with HTML4 back in 1999. As you can imagine, the web&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,4109],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Colors.css Offers New Defaults for Colors on The Web - Hongkiat<\/title>\n<meta name=\"description\" content=\"Finding a great color scheme for your website is no easy task. But, it just got a lot easier with the Colors library by Adam Morse. This free CSS library\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Colors.css Offers New Defaults for Colors on The Web\" \/>\n<meta property=\"og:description\" content=\"Finding a great color scheme for your website is no easy task. But, it just got a lot easier with the Colors library by Adam Morse. This free CSS library\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-20T13:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:49:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/reset-default-css-colors\/02-aaa-colors-accessibility-picker.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Colors.css Offers New Defaults for Colors on The Web\",\"datePublished\":\"2017-09-20T13:01:37+00:00\",\"dateModified\":\"2018-04-09T08:49:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/\"},\"wordCount\":363,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/reset-default-css-colors\\\/02-aaa-colors-accessibility-picker.jpg\",\"keywords\":[\"CSS\",\"CSS Frameworks\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/\",\"name\":\"Colors.css Offers New Defaults for Colors on The Web - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/reset-default-css-colors\\\/02-aaa-colors-accessibility-picker.jpg\",\"datePublished\":\"2017-09-20T13:01:37+00:00\",\"dateModified\":\"2018-04-09T08:49:30+00:00\",\"description\":\"Finding a great color scheme for your website is no easy task. But, it just got a lot easier with the Colors library by Adam Morse. This free CSS library\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/reset-default-css-colors\\\/02-aaa-colors-accessibility-picker.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/reset-default-css-colors\\\/02-aaa-colors-accessibility-picker.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/reset-default-css-colors\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Colors.css Offers New Defaults for Colors on The Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Colors.css Offers New Defaults for Colors on The Web - Hongkiat","description":"Finding a great color scheme for your website is no easy task. But, it just got a lot easier with the Colors library by Adam Morse. This free CSS library","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/","og_locale":"en_US","og_type":"article","og_title":"Colors.css Offers New Defaults for Colors on The Web","og_description":"Finding a great color scheme for your website is no easy task. But, it just got a lot easier with the Colors library by Adam Morse. This free CSS library","og_url":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-09-20T13:01:37+00:00","article_modified_time":"2018-04-09T08:49:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/reset-default-css-colors\/02-aaa-colors-accessibility-picker.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Colors.css Offers New Defaults for Colors on The Web","datePublished":"2017-09-20T13:01:37+00:00","dateModified":"2018-04-09T08:49:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/"},"wordCount":363,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/reset-default-css-colors\/02-aaa-colors-accessibility-picker.jpg","keywords":["CSS","CSS Frameworks"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/","url":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/","name":"Colors.css Offers New Defaults for Colors on The Web - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/reset-default-css-colors\/02-aaa-colors-accessibility-picker.jpg","datePublished":"2017-09-20T13:01:37+00:00","dateModified":"2018-04-09T08:49:30+00:00","description":"Finding a great color scheme for your website is no easy task. But, it just got a lot easier with the Colors library by Adam Morse. This free CSS library","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/reset-default-css-colors\/02-aaa-colors-accessibility-picker.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/reset-default-css-colors\/02-aaa-colors-accessibility-picker.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/reset-default-css-colors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Colors.css Offers New Defaults for Colors on The Web"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9Ul","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=38089"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38089\/revisions"}],"predecessor-version":[{"id":42042,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38089\/revisions\/42042"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38089"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}