{"id":45686,"date":"2018-10-23T21:01:51","date_gmt":"2018-10-23T13:01:51","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=45686"},"modified":"2018-10-23T20:55:32","modified_gmt":"2018-10-23T12:55:32","slug":"coolhue-hand-picked-pastel-web-gradient-library","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/","title":{"rendered":"CoolHue: Hand-Picked Pastel Web Gradient Library"},"content":{"rendered":"<p>Web gradients are a dime a dozen these days as CSS3 makes it so easy to <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/\">create gradients from scratch<\/a>, and with the right code library, it\u2019s even easier.<\/p>\n<p>That\u2019s where the value of <a href=\"https:\/\/webkul.github.io\/coolhue\/\" target=\"_blank\">coolHue<\/a> comes in. This free online library is perhaps the best place to <strong>find awesome gradients for your site<\/strong>.<\/p>\n<p>Most gradients follow a very bright two-color or <a href=\"https:\/\/www.hongkiat.com\/blog\/three-color-websites\/\">three-color<\/a> pastel selection. But the gradients are easy to edit so you can get these working with any site.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/\">Blend Your Own CSS Gradients with This Free Web App<\/a><\/p>\n<figure><a href=\"https:\/\/webkul.github.io\/coolhue\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/coolhue-handpicked-pastel-web-gradient-library\/01-coolhue-colors-gradients.jpg\" alt=\"coolHue gradients webapp\" width=\"1000\" height=\"610\"><\/a><\/figure>\n<p>From the main page, it may not look like much. It\u2019s mostly a collection of hand-picked gradients featuring different hues and color choices. Yet, if you visit the <a href=\"https:\/\/github.com\/webkul\/coolhue\" target=\"_blank\">GitHub repo<\/a> you\u2019ll find a whole other story. This collection is the best choice for finding <strong>personalized color palettes<\/strong>, all specifically designed for websites.<\/p>\n<p>It\u2019s easy enough to port these gradients into a mobile app UI as well. But I\u2019ve found they\u2019re most useful with newer design trends like <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-box-shadows-effects\/\">drop shadows<\/a>.<\/p>\n<p>When editing your site you can <strong>pass color hues into a custom array<\/strong> variable colorData. This should appear inside your main HTML along with all your gradient elements.<\/p>\n<p>Using JavaScript you have complete control over how the colors blend together. CSS3 can also support multiple colors but it\u2019s tougher to get them working across all page elements and all browsers.<\/p>\n<p>With the coolHue site, you can even <strong>download free PNG files of the gradients<\/strong>. This way you can edit them into graphic design projects, website mockups, or use them outside of raw HTML\/CSS\/JS code.<\/p>\n<figure><a href=\"https:\/\/webkul.github.io\/coolhue\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/coolhue-handpicked-pastel-web-gradient-library\/02-coolhue-sample.jpg\" alt=\"coolhue color gradient tool\" width=\"1000\" height=\"525\"><\/a><\/figure>\n<p>And if you\u2019re a big Photoshop user there\u2019s even a <a href=\"https:\/\/github.com\/webkul\/coolhue\/blob\/master\/distro\/ps_coolHue.grd\" target=\"_blank\">.grd gradient file<\/a> with all the coolHue gradients. Awesome right?<\/p>\n<p>Visit the <a href=\"https:\/\/github.com\/webkul\/coolhue\" target=\"_blank\">GitHub repo<\/a> for setup instructions and sample code snippets. There you\u2019ll also find the PS gradient file along with the <a href=\"https:\/\/github.com\/webkul\/coolhue\/blob\/master\/distro\/coolHue.sketch\" target=\"_blank\">Sketch gradient file<\/a> and so much more.<\/p>","protected":false},"excerpt":{"rendered":"<p>A free online library to find awesome gradients for your website.<\/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":[],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CoolHue: Hand-Picked Pastel Web Gradient Library - Hongkiat<\/title>\n<meta name=\"description\" content=\"A free online library to find awesome gradients for your website.\" \/>\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\/coolhue-hand-picked-pastel-web-gradient-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CoolHue: Hand-Picked Pastel Web Gradient Library\" \/>\n<meta property=\"og:description\" content=\"A free online library to find awesome gradients for your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/\" \/>\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=\"2018-10-23T13:01:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/coolhue-handpicked-pastel-web-gradient-library\/01-coolhue-colors-gradients.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\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"CoolHue: Hand-Picked Pastel Web Gradient Library\",\"datePublished\":\"2018-10-23T13:01:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/\"},\"wordCount\":322,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/coolhue-handpicked-pastel-web-gradient-library\\\/01-coolhue-colors-gradients.jpg\",\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/\",\"name\":\"CoolHue: Hand-Picked Pastel Web Gradient Library - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/coolhue-handpicked-pastel-web-gradient-library\\\/01-coolhue-colors-gradients.jpg\",\"datePublished\":\"2018-10-23T13:01:51+00:00\",\"description\":\"A free online library to find awesome gradients for your website.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/coolhue-handpicked-pastel-web-gradient-library\\\/01-coolhue-colors-gradients.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/coolhue-handpicked-pastel-web-gradient-library\\\/01-coolhue-colors-gradients.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/coolhue-hand-picked-pastel-web-gradient-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CoolHue: Hand-Picked Pastel Web Gradient Library\"}]},{\"@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":"CoolHue: Hand-Picked Pastel Web Gradient Library - Hongkiat","description":"A free online library to find awesome gradients for your website.","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\/coolhue-hand-picked-pastel-web-gradient-library\/","og_locale":"en_US","og_type":"article","og_title":"CoolHue: Hand-Picked Pastel Web Gradient Library","og_description":"A free online library to find awesome gradients for your website.","og_url":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-10-23T13:01:51+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/coolhue-handpicked-pastel-web-gradient-library\/01-coolhue-colors-gradients.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\/coolhue-hand-picked-pastel-web-gradient-library\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"CoolHue: Hand-Picked Pastel Web Gradient Library","datePublished":"2018-10-23T13:01:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/"},"wordCount":322,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/coolhue-handpicked-pastel-web-gradient-library\/01-coolhue-colors-gradients.jpg","articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/","url":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/","name":"CoolHue: Hand-Picked Pastel Web Gradient Library - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/coolhue-handpicked-pastel-web-gradient-library\/01-coolhue-colors-gradients.jpg","datePublished":"2018-10-23T13:01:51+00:00","description":"A free online library to find awesome gradients for your website.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/coolhue-handpicked-pastel-web-gradient-library\/01-coolhue-colors-gradients.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/coolhue-handpicked-pastel-web-gradient-library\/01-coolhue-colors-gradients.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/coolhue-hand-picked-pastel-web-gradient-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CoolHue: Hand-Picked Pastel Web Gradient Library"}]},{"@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-bSS","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45686","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=45686"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45686\/revisions"}],"predecessor-version":[{"id":45687,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45686\/revisions\/45687"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=45686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=45686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=45686"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=45686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}