{"id":13636,"date":"2020-04-02T14:41:03","date_gmt":"2020-04-02T12:41:03","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=13636"},"modified":"2020-04-02T14:58:44","modified_gmt":"2020-04-02T12:58:44","slug":"color-palettes","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/color-palettes\/","title":{"rendered":"Color Palettes"},"content":{"rendered":"\n<p>Before listing the tools, read this article: <a href=\"https:\/\/refactoringui.com\/previews\/building-your-color-palette\/\">Building your color palette<\/a><br>In short: almost every online generated color palette consists of a limited number of colors. However, you cannot build an application or website with just 5 colors. You Need:<\/p>\n\n\n\n<ul><li><strong>Greys<\/strong> &#8211;  In practice, you want 8-10 shades to choose from <\/li><li><strong>1 or 2 Primary color(s)<\/strong> &#8211;  you need a variety <em>(5-10)<\/em> of lighter and darker shades to choose from <\/li><li><strong>Accent colors<\/strong> &#8211;  it&#8217;s not uncommon to need as many as <em>ten<\/em> different colors with <em>5-10 shades each<\/em> for a complex UI <\/li><\/ul>\n\n\n\n<p>So what you actually need is something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"734\" height=\"421\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-14.png\" alt=\"\" class=\"wp-image-13651\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-14.png 734w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-14-150x86.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-14-300x172.png 300w\" sizes=\"(max-width: 734px) 100vw, 734px\" \/><\/figure>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">Color Palette Websites<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.colors.lol\/\">colors.lol<\/a> &#8211;  Overly descriptive color palettes. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"656\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-1024x656.png\" alt=\"\" class=\"wp-image-13637\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-1024x656.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-150x96.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-300x192.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-768x492.png 768w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image.png 1161w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"62\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-1.png\" alt=\"\" class=\"wp-image-13638\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-1.png 240w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-1-150x39.png 150w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><figcaption>With a nice filter too<\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/colorhunt.co\/\">https:\/\/colorhunt.co\/<\/a> &#8211; Color Palettes for Designers and Artists<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"661\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-2.png\" alt=\"\" class=\"wp-image-13639\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-2.png 842w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-2-150x118.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-2-300x236.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-2-768x603.png 768w\" sizes=\"(max-width: 842px) 100vw, 842px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/kuler.adobe.com\/create\/color-wheel\/\">https:\/\/kuler.adobe.com\/create\/color-wheel\/<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"337\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-3-1024x337.png\" alt=\"\" class=\"wp-image-13640\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-3-1024x337.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-3-150x49.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-3-300x99.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-3-768x253.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/flatuicolors.com\/\">https:\/\/flatuicolors.com\/<\/a> &#8211;  Collaborating with 13 designers around the world, a total set of 280  colors are on your command for COPY \/ PASTE for your next project,  design, presentation. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-4-1024x462.png\" alt=\"\" class=\"wp-image-13641\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-4-1024x462.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-4-150x68.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-4-300x135.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-4-768x346.png 768w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-4.png 1069w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption> 13 designers from 13 different countries and palette names are given based on designer&#8217;s country <\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/coolors.co\/\">https:\/\/coolors.co\/<\/a> &#8211; nice workflow: hit spacebar to cycle and lock the colors you like<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"346\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-5-1024x346.png\" alt=\"\" class=\"wp-image-13642\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-5-1024x346.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-5-150x51.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-5-300x101.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-5-768x259.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"http:\/\/paletton.com\">http:\/\/paletton.com<\/a> &#8211; Nice palette creation tool, but use it in Chrome<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"667\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-6.png\" alt=\"\" class=\"wp-image-13643\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-6.png 960w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-6-150x104.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-6-300x208.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-6-768x534.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><figcaption>Create a Palette ..<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"691\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-7.png\" alt=\"\" class=\"wp-image-13644\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-7.png 1008w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-7-150x103.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-7-300x206.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-7-768x526.png 768w\" sizes=\"(max-width: 1008px) 100vw, 1008px\" \/><figcaption>.. and preview<\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.colorion.co\/popular\"><\/a><a href=\"https:\/\/www.colorion.co\/\"><\/a><a href=\"https:\/\/www.colorion.co\/ \">https:\/\/www.colorion.co\/ <\/a>&#8211; Create or browse<strong> full color<\/strong>,<strong> flatui<\/strong> and <strong>material design<\/strong> palettes<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"306\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-8-1024x306.png\" alt=\"\" class=\"wp-image-13645\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-8-1024x306.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-8-150x45.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-8-300x90.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-8-768x229.png 768w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-8.png 1092w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-9-1024x424.png\" alt=\"\" class=\"wp-image-13646\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-9-1024x424.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-9-150x62.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-9-300x124.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-9-768x318.png 768w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-9.png 1057w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Also has  a tool to create (material) palettes from images.<br>Other tools are <em>gradient buttons<\/em> and <em>base colors<\/em><\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><a href=\"http:\/\/khroma.co\/train\/\">http:\/\/khroma.co\/train\/<\/a> &#8211; Choose a set of your 50 favorite colors.  These colors will be used to train a color generator algorithm personalized to you. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"343\" height=\"132\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-11.png\" alt=\"\" class=\"wp-image-13648\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-11.png 343w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-11-150x58.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-11-300x115.png 300w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><figcaption>I downloaded my data to webdev\/design\/color palettes<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-12-1024x466.png\" alt=\"\" class=\"wp-image-13649\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-12-1024x466.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-12-150x68.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-12-300x136.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-12-768x349.png 768w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-12.png 1898w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Generated color pairings (endless). <br>Choose between Type, Poster, Image or Gradient. Adjust bias to increase or decrease the influence of the 50 colors you chose<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"430\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-13-1024x430.png\" alt=\"\" class=\"wp-image-13650\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-13-1024x430.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-13-150x63.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-13-300x126.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-13-768x322.png 768w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-13.png 1908w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Generated Palettes<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><a href=\"https:\/\/www.colourlovers.com\/\">https:\/\/www.colourlovers.com\/<\/a> &#8211; a creative community where people from around the world create and share <strong>colors<\/strong>, <strong>palettes<\/strong>  and <strong>patterns<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"350\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-10-1024x350.png\" alt=\"\" class=\"wp-image-13647\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-10-1024x350.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-10-150x51.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-10-300x103.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-10-768x262.png 768w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/04\/image-10.png 1513w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Too bad the interface is far from clean ..<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before listing the tools, read this article: Building your color paletteIn short: almost every online generated color palette consists of a limited number of colors. However, you cannot build an application or website with just 5 colors. You Need: Greys &#8211; In practice, you want 8-10 shades to choose from 1 or 2 Primary color(s) [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[45],"tags":[175,554],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13636"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=13636"}],"version-history":[{"count":5,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13636\/revisions"}],"predecessor-version":[{"id":13659,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13636\/revisions\/13659"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=13636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=13636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=13636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}