text: webpackJsonp([65951750749414],{1065:function(e,A){e.exports={data:{allMarkdownRemark:{edges:[{node:{id:"/Users/samuelisme/Code/blog/src/blogs/2018-09-29 Journey to Design Matters/index.md absPath of file >>> MarkdownRemark",html:'<p>It was a truly enlightening trip to Denmark, attending Design Matters 2018 in Copenhagen (Sep 26 -27, 2018). Not only did the talks and workshops given by design practitioners across the industry are illuminating, but it had also made me realized to take a step back to reflect on the whole workflow of design process.</p>\n<h2>Design for feelings</h2>\n<p>One of the recurring theme during this year conference is the re-discovery of emotional design. Few speakers’ keynotes coincidentally brought up the importance of expressive design, while the utilitarian and minimal design has been dominated by industry leaders like Apple and Google. Tobias Ahlin from Minecraft stressed on the building emotionally engaging design style, that would eventually craft a distinctive voice for the brand. </p>\n<p>The question, “What are the key moments how your user feels” should also be addressed during the design process, aside from the quantitive approach, especially feelings are not measurable from data analysis. </p>\n<h2>Become a hybrid designer</h2>\n<div class="Gallery-50">\n<img src="./static/IMG_20180927_131449-123d0e3d4741a1983a7171653ac6c165-2ed49.jpg"></img>\n<img src="./static/IMG_20180927_135426-95ae3fc20f0dcfd3c956d7d3b002acbd-2ed49.jpg"></img>\n</div>\n<p>Joining over 900 designers around the world, I’m also excited signing up two workshops, which were equally fun and inspiring, including "Game Design" workshop hosted by Dori Adar (Hands on Games) and "New Hybrid Designer" facilitated by McKinsey Design. </p>\n<p>One reason why I chose these two workshops was to getting myself familiar with the new aspect of the design, by introducing gamification to the design process and also talking about the business value of it.</p>\n<p>Becoming a hybrid designer has become truer in current days, in a sense that multi-discipline designers would be more communicative to make a pragmatic and sensible design choice. </p>\n<h2>Takeaways</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-5cf86.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABizFZlbFSX//EABoQAQEAAgMAAAAAAAAAAAAAAAECABIDITL/2gAIAQEAAQUCUkPG0412usHFNH//xAAWEQEBAQAAAAAAAAAAAAAAAAAAERL/2gAIAQMBAT8B0r//xAAWEQEBAQAAAAAAAAAAAAAAAAAAERL/2gAIAQIBAT8Bwj//xAAbEAACAgMBAAAAAAAAAAAAAAAAARESAiExcf/aAAgBAQAGPwItuDqIErPwlZM//8QAHBABAAICAwEAAAAAAAAAAAAAAQARMUEhUWGB/9oACAEBAAE/ISjYjitw3UdDqD5H7EDL8DObQRVPk//aAAwDAQACAAMAAAAQZz//xAAYEQACAwAAAAAAAAAAAAAAAAAAAREhUf/aAAgBAwEBPxB2J4f/xAAYEQACAwAAAAAAAAAAAAAAAAAAAREhUf/aAAgBAgEBPxBUI6f/xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAhQWFx/9oACAEBAAE/EF7Z12A+6G8u8GNRVBSMuLBEiK5meAoD88mNk7g9G//Z\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="IMG 20180926 183634"\n        title=""\n        src="/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-71e08.jpg"\n        srcset="/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-996a7.jpg 320w,\n/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-06faf.jpg 640w,\n/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-71e08.jpg 1280w,\n/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-2ed49.jpg 1920w,\n/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-ad50a.jpg 2560w,\n/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-12898.jpg 3840w,\n/static/IMG_20180926_183634-efb52f5366291a1c86f9dd461cf2eb99-5cf86.jpg 4032w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n     </p>\n<p>Making design happens takes more than a person or designers to be involved. Design values that we should uphold, the mindset of management and clients are also equally important in the design process to make it work. </p>\n<p>After intensive talks and workshops for two full days. This trip has been rewarding for myself to take a look at my own approach and position. Taking a step back to see the bigger picture would make the journey of design come clear. </p>',excerpt:"It was a truly enlightening trip to Denmark, attending Design Matters 2018 in Copenhagen (Sep 26 -27, 2018). Not only did the talks and workshops given by design practitioners across the industry are illuminating, but it had also made me realized to…",frontmatter:{title:"Journey to Design Matters",date:"Sep 29, 2018",tags:["Design","Conference","DesignMatters18"],path:"/journey-to-design-matters"}}},{node:{id:"/Users/samuelisme/Code/blog/src/blogs/2018-08-27 Why designers need a personal website/index.md absPath of file >>> MarkdownRemark",html:'<p>TLDR: I\'m summing up the reasons why a designer should build a custom site using Gatsby.JS. </p>\n<p>One of my year resolution for 2018 is to learn front-end coding. I feel that being a designer, learning how to code is the way how I could step up the game in web design, by understanding how every bit and piece fall into places. </p>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/Framev2-471f9d78fb751638b8d0fac5e1165b50-2ed49.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 66.66666666666666%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB07pqGBX/xAAYEAEBAQEBAAAAAAAAAAAAAAABAhEAE//aAAgBAQABBQL3kS5ZHTDmRAA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAwEBAQAAAAAAAAAAAAAAAAERIRIx/9oACAEBAAY/Atw6uFR4SIiP/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARMSGR/9oACAEBAAE/IVwvRrsE0ixWCSCOJFtHksigcqCgAMCf/9oADAMBAAIAAwAAABCsD//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/EIf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAn/8QAGxABAQEBAAMBAAAAAAAAAAAAAREAITFxofD/2gAIAQEAAT8Qb5EpQYzXkucBe8+OOA1RRN5J+w4U9YLgfy4yTQEDf//Z\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="Framev2"\n        title=""\n        src="/static/Framev2-471f9d78fb751638b8d0fac5e1165b50-71e08.jpg"\n        srcset="/static/Framev2-471f9d78fb751638b8d0fac5e1165b50-996a7.jpg 320w,\n/static/Framev2-471f9d78fb751638b8d0fac5e1165b50-06faf.jpg 640w,\n/static/Framev2-471f9d78fb751638b8d0fac5e1165b50-71e08.jpg 1280w,\n/static/Framev2-471f9d78fb751638b8d0fac5e1165b50-2ed49.jpg 1920w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>I had two personal websites, one is my Tumblr and another is my portfolio site, separately hosted and running <a href="https://cargocollective.com/">Cargo Collective</a>. But I was thinking, "Wouldn\'t it be great if both of my portfolio and blog are together?"</p>\n<h2>Why do you need a personal website?</h2>\n<p>It\'s 2018. Online presence is becoming the norm, even in the professional field. Your previous work, your side projects, even your work in progress matter. </p>\n<p>A personal site also means more control over your message and story, whether you\'re looking for new clients, landing a dream job or establishing a personal brand. For sure it takes more time and effort, but I think it is quite a good practice to sharpen your skill and catching up. Needless to say, making a personal site is much easier than a decade ago. </p>\n<p>While platforms like Medium, Facebook Pages are building homogeneous style for coherent browsing / reading experience. Your website should pursue personality instead. I\'m not saying you shouldn\'t post to Medium publications or run a Facebook Page, but just not as the destination but a way to reach your very own website where you deliver your message. </p>\n<h2>What\'re my options?</h2>\n<p>Speaking of the BIG question, which platform should you choose? Wordpress is great for beginners since all settings are visible without dealing with code. But it was developed as a blogging platform, so it requires specific template in order to create a decent looking personal page. </p>\n<p>Website builder like <a href="https://webflow.com/?rfsn=1574887.557b84">Webflow</a> and <a href="http://squarespace.com/">Squarespace</a> is also an elegant option, but they adopt subscription model so the cost would be definitely higher.  </p>\n<p>After taking the <a href="http://designcode.io/">Design+Code\'s</a> React course instructed by Meng To, I was introduced to <a href="https://www.gatsbyjs.org/">Gatsby.JS</a>. After trying it out for few weeks, I genuinely rooting it as the up-and-coming personal website &#x26; blog option. Because:</p>\n<ol>\n<li>A custom personal website allows maximum creativity, a great advantage for designers.</li>\n<li>It\'s blaze-fast. Because all files are generated already. It also adopts modern web technology like React, Webpack and GraphQL. I compared the Lighthouse audit ran on beta site and current site. Performance has insanely improved.</li>\n<li>Gatsby is a static site generator, but dynamic data source is widely supported. Wordpress, Contentful or even Airtable can be used as a database. </li>\n<li>Deploying is as easy as drag-and-drop. <a href="http://netlify.com/">Netlify</a> provides free hosting for static site, and Gatsby is free, meaning the project could be free as long as you have your own domain.</li>\n<li>Personal reason but a good one. <strong>I admit the process of making your own site is empowering.</strong> It\'s nice to not rely on anybody and build a website designed and developed all by yourself. I\'ve been taking some screenshots logging daily progress, will share it later.</li>\n</ol>\n<h2>Last word</h2>\n<p>As Gatsby is quite new since it was first released a year ago. I wouldn\'t say current resources available is sufficient, but it is a strong and growing community. Most users are frontend web developer right now, but I\'m optimistic to see more designers onboard.</p>\n<p>I admit there is indeed a learning curve to React, Gatsby and also GraphQL since I know fundamental HTML and CSS only. There were long nights that I was figuring out causes of errors, which turned out to be some stupid mistakes. </p>\n<p>I\'m writing this also for my own future reference:</p>\n<blockquote>\n<p>A personal website should not only showcase your work, but also speak who you are and how you work.</p>\n</blockquote>\n<p>That\'s why I\'m eager to share my work in progress, hoping to launch the site as soon as possible. </p>\n<h5>Reading List:</h5>\n<h5><a href="https://uxdesign.cc/things-i-honestly-dont-want-to-see-in-your-portfolio-3d3497666ca8">Things I (honestly) don’t want to see in your portfolio</a></h5>',excerpt:"TLDR: I'm summing up the reasons why a designer should build a custom site using Gatsby.JS.  One of my year resolution for 2018 is to learn front-end coding. I feel that being a designer, learning how to code is the way how I could step up the game…",frontmatter:{title:"Why designers need a personal website?",date:"Aug 26, 2018",tags:["Work In Progress","Design","Gatsby"],path:"/why-designers-need-a-personal-website"}}},{node:{id:"/Users/samuelisme/Code/blog/src/blogs/2018-07-06 Color Tools/index.md absPath of file >>> MarkdownRemark",html:'<p>Color is the combination of science and art, a simple color change could have drastic effect on the emotion or perception of the viewer. Being a UI/UX designer, mastering the color theory and its application truly can step up your design game.</p>\n<p>Stephen Few’s <a href="https://www.perceptualedge.com/articles/ie/visual_perception.pdf">“Tapping the Power of Visual Perception”</a> coined the term “Preattentive Attributes” in displaying data. Intensity and hue of color are two attributes that can enhance visual communication quickly. Leveraging color help users to process information, prioritize what they have seen, subsequently convert into actions. Same rule applies in designing social media graphics and user interfaces, using color intentionally reinforces the quality of design.\nHere are the best color tools you can use right now to create beautiful palettes and gradients for next design project.</p>\n<h2>1. Digital Color Meter (MacOS, Free)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/2-bd10767d925f96f4ef0444056d8d4a18-3b729.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 68%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgT/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAABTrEDJQb/xAAbEAABBAMAAAAAAAAAAAAAAAACAAEDERITIf/aAAgBAQABBQKLpayAVFCyye7X/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BJ//EABsQAAEEAwAAAAAAAAAAAAAAAAABAhARITFh/9oACAEBAAY/AjJsuxydj//EABoQAQADAQEBAAAAAAAAAAAAAAEAESExUYH/2gAIAQEAAT8hsxZ9hpwFyPYLTTfmTYKl6ti75P/aAAwDAQACAAMAAAAQVw//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QXZ//xAAWEQADAAAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8QCL//xAAdEAEBAAEEAwAAAAAAAAAAAAABEQAhMUGRYYGh/9oACAEBAAE/EDBWqVTEq4WG76l9ZYt/WMtToL6mKHYARAvnOId5/9k=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="2"\n        title=""\n        src="/static/2-bd10767d925f96f4ef0444056d8d4a18-71e08.jpg"\n        srcset="/static/2-bd10767d925f96f4ef0444056d8d4a18-996a7.jpg 320w,\n/static/2-bd10767d925f96f4ef0444056d8d4a18-06faf.jpg 640w,\n/static/2-bd10767d925f96f4ef0444056d8d4a18-71e08.jpg 1280w,\n/static/2-bd10767d925f96f4ef0444056d8d4a18-3b729.jpg 1600w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>The most convenient app to grab color code is the one built-in to your Mac. Digital Color Meter is the default Mac utilities app hidden in your Application folder. The app does one job great, capture color as you point your cursor. Simply press Shift + Command + C will copy the value into the clipboard. You can also adjust color profile (native, sRGB, Adobe RGB or P3 etc.) as well as the values to display (sRGB hex code for me). To be honest, this free app probably satisfies most people’s need in picking color.</p>\n<p><img src="/3-f0ff083d8031fa41d1db5e6a5e68f2b4.gif"></p>\n<p>Press “Command + L” to lock the inspectorYou can copy the RGB Hex Code easily by pressing “Shift + Command + S”</p>\n<p><img src="/4-2dd1f5668f03dc8a36a65d787b961893.gif"></p>\n<h2>2. Sip (<a href="https://sipapp.io/?ref=todaydojo">MacOS, USD$9.99</a> / <a href="https://setapp.com/get/sip?utm_medium=affiliate+program&#x26;utm_source=14&#x26;utm_campaign=sipapp.io">Available on Setapp</a>)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/5-221aa3c4b5797c3508532db392de7755-3b729.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 62.5%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFAv/EABYBAQEBAAAAAAAAAAAAAAAAAAIAA//aAAwDAQACEAMQAAABVqSKE9iodf/EABoQAQACAwEAAAAAAAAAAAAAAAIAAwEEExH/2gAIAQEAAQUC1qui55EWKHnXarTvc8n/xAAXEQEAAwAAAAAAAAAAAAAAAAABAhAR/9oACAEDAQE/AUSWlf/EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8BWoh//8QAHBAAAgICAwAAAAAAAAAAAAAAAAECERBBEiIx/9oACAEBAAY/AtMc2kXL067OLqsf/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARIWExUf/aAAgBAQABPyG7oQL2JcJ7U+UXYjsYpsmiwjcjbRTk/9oADAMBAAIAAwAAABB8D//EABgRAAMBAQAAAAAAAAAAAAAAAAABESFh/9oACAEDAQE/EKma5cFqp//EABcRAAMBAAAAAAAAAAAAAAAAAAABETH/2gAIAQIBAT8QyscOH//EABoQAQEAAwEBAAAAAAAAAAAAAAERACExgZH/2gAIAQEAAT8QswGKkR7k8A1Osu9YVcYFgp4YpW9C1cQ8lhL9zRGpYeZ//9k=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="5"\n        title=""\n        src="/static/5-221aa3c4b5797c3508532db392de7755-71e08.jpg"\n        srcset="/static/5-221aa3c4b5797c3508532db392de7755-996a7.jpg 320w,\n/static/5-221aa3c4b5797c3508532db392de7755-06faf.jpg 640w,\n/static/5-221aa3c4b5797c3508532db392de7755-71e08.jpg 1280w,\n/static/5-221aa3c4b5797c3508532db392de7755-3b729.jpg 1600w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Consider Sip as the professional version of Digital Color Meter, it is the best color tool built  for pro-user in mind, providing seamless integration to professional workflows and applications. I love how it docks color palettes on top of the screen in a minimalist way, which allows cross-app usage.</p>\n<h2>3. Apple Human Interface Guidelines — Color (<a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/">Web</a>, Free)</h2>\n<p>Color section of Apple’s Human Interface Guidelines is a great introductory piece for color design when you are designing websites and apps.</p>\n<h2>4. Adobe Capture CC (<a href="https://itunes.apple.com/us/app/adobe-capture-cc/id1040200189?mt=8&#x26;at=10lSkU">iOS</a> &#x26; <a href="https://play.google.com/store/apps/details?id=com.adobe.creativeapps.gather">Android</a>, Free)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/6-1cf801599cf67d100d55893112758a67-34962.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 71.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsSAAALEgHS3X78AAABmUlEQVQoz2O4ubMODd3aVX99e+35jVUXNoEQkHF9Ry1QEFMlA7rOnXU3dtYFe1ooK8ppqCloqCnKy8lGBtjeJqgZqO3O7oZLGys1PC2901Nnz5ixaWnr7Eq3ghDD85uq7+yuJ6D59u76y5uqdJ2Nbfy9K0uL2mvTiqJM4730Lm6uuY1f802QzfXnNlRU5CVO7ansa86uqmuIiUtLio24tKWaCM17Gs6uL2ttqduwad3SJfPnLVjUWNdQmpt6cXMVUZrPrS9vaaxYtXbVqlWLZ8yaXZCbn5USBwz2O0Q6u7YoacHUlrlT23v7+5ITk7KSoy4T5ezd9ec3VuYm+fTXpjQVRVVXlaZmZidnRF8m6OwbO0ChfWlztZ62grqyjLaqrLqGsoqahr2t8RWwzTcIar64qdJAV0NUTFJXV19HR0dUTNzaTPfylioiNVeJiwowMDCws7GzsbEzMDAqyopd2VoDTGRABfj8DEFutjp8vFziIvziovy8PFwBrka3dzcQTtuQjHF1W+3ptWVn1pWfBqK1Zde212JN2wCkwPEK44ynJAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="6"\n        title=""\n        src="/static/6-1cf801599cf67d100d55893112758a67-f8990.png"\n        srcset="/static/6-1cf801599cf67d100d55893112758a67-09599.png 320w,\n/static/6-1cf801599cf67d100d55893112758a67-52525.png 640w,\n/static/6-1cf801599cf67d100d55893112758a67-f8990.png 1280w,\n/static/6-1cf801599cf67d100d55893112758a67-34962.png 1600w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Capture photos and auto convert real-life hues into color palettes with Adobe Capture CC. It also directly integrates to your Adobe CC’s swatches if you are a subscriber.</p>\n<h2>5. Cone (<a href="https://itunes.apple.com/us/app/cone-live-color-picker/id1221305627?mt=8&#x26;at=10lSkU">iOS</a>, USD$2.99)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/7-38bf5a4f7db35e1bc5e705cf56a96dc1-3b729.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 74.875%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB5LCUKj//xAAZEAACAwEAAAAAAAAAAAAAAAABEQACICL/2gAIAQEAAQUCAquYxj//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAWEAEBAQAAAAAAAAAAAAAAAAAxACD/2gAIAQEABj8CZz//xAAbEAADAAIDAAAAAAAAAAAAAAAAAREQITFRYf/aAAgBAQABPyHetKPj46HTRERY/9oADAMBAAIAAwAAABAv/wD/xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPxCn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAAIDAQEAAAAAAAAAAAAAAQARIUFRMXH/2gAIAQEAAT8QwgcdjIkDoKMVGvkFC+y0yuohbXk//9k=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="7"\n        title=""\n        src="/static/7-38bf5a4f7db35e1bc5e705cf56a96dc1-71e08.jpg"\n        srcset="/static/7-38bf5a4f7db35e1bc5e705cf56a96dc1-996a7.jpg 320w,\n/static/7-38bf5a4f7db35e1bc5e705cf56a96dc1-06faf.jpg 640w,\n/static/7-38bf5a4f7db35e1bc5e705cf56a96dc1-71e08.jpg 1280w,\n/static/7-38bf5a4f7db35e1bc5e705cf56a96dc1-3b729.jpg 1600w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Cone is a beautiful and minimalistic color app that you can find on iOS App Store that allows user to capture Pantone colors in real-time. New version of the app has announced by the developer, stay tuned for the update.</p>\n<h2>6. Dribbble Colors (<a href="https://dribbble.com/colors/">Web</a>, Free)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/8-f245bf729f5ef35ef0c21ad9bfd0161d-34962.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 71.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsSAAALEgHS3X78AAAC9klEQVQoz2MQSz4ORKJJR4lE4snHxMFagIgBiMVTTomnn5PIOE8MEko6JZR0UjT5JEizYOIp06y1kWVTAwqmBxUC0bTAgmkB+VOByD9vKoQBR8FFM0qn7mmau9+hbA9//AkGtogjZTOPf31978G9m08e3AKh+7ceg9GdG5duXr8EYT8Bo6cPb795+fT/j1e1C86xhh9iYI88kj/16ImjB7bv3rdr377d+/bu3bdnL5Dcs2f3zl07tu3as3v/7j1QtGvv/q0795w8uh+oBaiRgSf+ZGDpsnOz6p7NmvC4d/Xxvhvze5/2LXzYd/zxhPv3up9sXfx44pXHfU9u9T0+1ndva/+VPesO7NocWLaMJ+4kAxCHVKw4HKd3xULlskbyTPU9XurX1SKvqE26pnnimMLVsqDLulsuq189pHl5pvq5KoN5OQE5mYnBFStAmnnjT/kXL440kfOWEg4U07ATdVEW9hZX9BAydhfzdBfy1FLwEnXwk/B04vcz4/XUFTSREzFVkgFqAWpk4Iw+lta9p3vCpPKm7vzuScElZeVdHRktHZWtbalJaVlFdYXpOekhoYXVrQH5fTnVvcHVPTX9UzN793JEH2VgCTvYuPzG7svflu162Xbxk2XllPajz73m3+w6/Ny1YU7o5I0ztu0ObuiddPmJ2Pzf9Xt/qB74nnD1f/uqm8xhBxlYwg/WL778+v3Xa/c+XH71ZeetN5fuv9lx8uH5Wy933X598NrDC8/e73zy7eLrL+tufDrz8OOmex+vf/rRuPQqC0Rz0+JLR+4+nHb6+r4rHzt3fT92+8POm2/uv/o45+TLhhOfrm44cq9h7vYTz6fteLrp5OsV516ef/6lYfEloEYGocTjujkHDPO3KWZtMc3frZK+x6xgt23xTruSXdYlu4yK9timrLULWWCYvUMvZ4dx7i7j/J1AcZ2c/UCNDMBULpRwXDDhuEjCCYH448IJx4AkfxwYxR8XBLKTTvKnnAYqALIFwAgoBdQC1AgAvX7J8FyDBVgAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="8"\n        title=""\n        src="/static/8-f245bf729f5ef35ef0c21ad9bfd0161d-f8990.png"\n        srcset="/static/8-f245bf729f5ef35ef0c21ad9bfd0161d-09599.png 320w,\n/static/8-f245bf729f5ef35ef0c21ad9bfd0161d-52525.png 640w,\n/static/8-f245bf729f5ef35ef0c21ad9bfd0161d-f8990.png 1280w,\n/static/8-f245bf729f5ef35ef0c21ad9bfd0161d-34962.png 1600w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Dribbble Colors is a hidden treasure for UI designers who are looking for case studies of color adoption. It allows users to search Dribbble shots by color using hex code. Users also can adjust percentage of the containing color within a shot. This tool comes handy to see how a color plays out in other design.</p>\n<h2>7. Coloors.co (<a href="http://coloors.co/?ref=todaydojo">Web</a>, Free | iOS &#x26; Android, USD$1.99)</h2>\n<p><img src="/9-c1c9b7d92204b98e5491b4da2ef64b43.gif"></p>\n<p>Coloors.co’s Color-blind Mode and Hue &#x26; Contrast Adjustment is user-friendly to fine tune your palette\nCoolors.co is a multi-color schemes generator, with a super-fast spacebar shortcut to generate color schemes instantly. Thoughtful features including colorblind mode, able to view shades and adjust hue and saturation have contributed it to be my favourite site for color inspiration. It also has paid upgrade for iOS App, Chrome Extension, and add-on for Adobe Creative Suite.</p>\n<h2>8. Paletton (<a href="http://www.paletton.com/?ref=todaydojo">Web</a>, Free)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/10-e7a086adab09432b2e8d144c11247ec6-34962.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 66.4375%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsSAAALEgHS3X78AAACO0lEQVQoz5WPu24TQRSGzaWhQUREGNnrmZ2d3dlZ7+zVlzg2vpurk8jIVyzHUWTHAoeYyBIJkWgQIKBAiRDwAhSESA5QUFCk4QXoeIBU7nkBNpYRBhoYfZr5pTnfOTOuPdjYZtVWod4ttVYr7bXqyu0R3XLrVqnVLbe7lfZqbaVbah/lcssp65SWt/X6Hmi4BmjpDpc6454GCCJJIIpImSIwBauKRCVEMCaiXyaSTokuI0mUKPFisOZJ7qMl14Bv9mHWx0O/32+ZpmGadsDMK+pl27RD0UAwuJDOtqOZ/MXEXG4mqFnpTDaaiPc8ycFYBlkv9FGZ6pqmmebm9M3DU/HvN47fLfOyan1+8OxTrfPSSD5Gdo6XYul0JBbteRL7v8sKM4jBzT9lH4edJ8MEOXxzwg6o75fXv1xt7NrZrSkYOns+nkmHIuHer2f/lHWdYHQ9s/BhI1V4EZsafjsZsOX8pSvNWrleKTYb9dnZSDKZmrkQ+3syZRqTRXq6ev/YTvLeV9fWIzcC1H/tXOFhYHEn9fygX+7MBc1QOBr588+yLDPGRIwRkdzzGGc9nFcUsCjLwLJQOCzF40zXqGGYqs7WufSEDHwKpbquK0Sw/NgSBA1jQ8WGIliqpMmizaipKoamON2BwPdBxhEnJhOiqqog8EREhAhEFI6CgzTOooicW8TzHA8m5QwHfRBA4AMQOicEYMRkgOPFQ+gUj+V3aPEVLG5wOYfN0f4vvIZFR3S9RY1dB/4/QQ1H/AEJK8pvvbwbNgAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="10"\n        title=""\n        src="/static/10-e7a086adab09432b2e8d144c11247ec6-f8990.png"\n        srcset="/static/10-e7a086adab09432b2e8d144c11247ec6-09599.png 320w,\n/static/10-e7a086adab09432b2e8d144c11247ec6-52525.png 640w,\n/static/10-e7a086adab09432b2e8d144c11247ec6-f8990.png 1280w,\n/static/10-e7a086adab09432b2e8d144c11247ec6-34962.png 1600w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Paletton takes on the scientific approach to find the right palette by adjacent and triad colors. It has plenty of previews and simulations to accommodate different scenarios for palette usage.</p>\n<h2>9. Webgradients (<a href="https://webgradients.com/?ref=todaydojo">Web</a>, Free)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/11-570177c32bc7fde5b1b6721c61a580ea-92a84.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 69.85074626865672%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsSAAALEgHS3X78AAACK0lEQVQoz02S3WsTURDF88/6qE9CH/sg+Kbgqwo+lCKoVFpb8AMpNCjF0tJIoMYEa+M2prXtNsm9u/fe+fLcTQMdls3uZM7MPb+dlpnNQpo5Z6YqootAXvEm+SFRCjEypRR8SskHJkbaWnVdV81FIsiwCP6OiBRZWUyIKYQwz5ASkpSobqLlvUctq/Kk1IszE1QzKllYLqOWCaPRDi2glVKtNjVFu6qqsjgy29WVvN+kDxvS67IoCbkTX6z/KdaL6a8Z5uNEVlSyX0rn2jxFShC2vHMRx+/3ZXWF361x+3NjSAbts52nP9rPe/2dsUJMLEdD3u/z3k/9NwGARozJKVlMtr0tmxtWDLNUaHIRPq0OPq70r89reIIvLUvqdnjQN/hKzWQcPfMgnIRQA2yAgwxnTjAkRAtglJgiDEN547lqwjlXeY+a2vubzHQ67+tnDg+YA4N4DaDsq3lRFuemsETJUoB9jAL/JCpupt7NaSMYXAns8hbcog3Dynrakf0tLXrYC0KP4kSfPR4tPygPjqBnFRtP9etQOyOLvKANMfpV5zrYlm/r0n6DLcnitZf2cOn4zt3vS0+yOBM91M1dffvFjsdRxbsb2mRc6+9d2V3T3h52NIu7h/poeXjv/t+tdjNZ7aBrL17Z6y27wqfiZnLjOW9Y7Wx2ifWGN7iGQMcjPi0yhQQmOa2nI5tMxCzepo02VR0CCZbcN8BxD6LJzC/446dWwTcE9nnmP5rvF8g6K8R5AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="11"\n        title=""\n        src="/static/11-570177c32bc7fde5b1b6721c61a580ea-f8990.png"\n        srcset="/static/11-570177c32bc7fde5b1b6721c61a580ea-09599.png 320w,\n/static/11-570177c32bc7fde5b1b6721c61a580ea-52525.png 640w,\n/static/11-570177c32bc7fde5b1b6721c61a580ea-f8990.png 1280w,\n/static/11-570177c32bc7fde5b1b6721c61a580ea-92a84.png 1340w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Subtle color gradients collection made for website or app background. CSS code, PNG, Sketch and PSD previews are all set to use right away.</p>\n<h2>10. Social Colors (<a href="https://www.materialui.co/socialcolors">Web</a>, Free)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/12-867b5bfe6d563e93b45a8c8b7104234e-34962.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 66.4375%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsSAAALEgHS3X78AAAC1ElEQVQoz23RaUzScRgH8J/lzEpb0wpeIPN8keWmIPYCtZpHOheKAq5jHZvlKlfLpk4bWU3DqVtpFqyJLtMAD5DMOD1HrpjHHwFBTPFsBIlHzLLg/w9Yc9navnveffZ8nz0AtGuI3SrhuIEHzfA0i63apfYOMX9gWDjztVO/JDCYBFMmwaSpU2+SGs3yWYts1tI/Z4kVa0GbGgAulN2rZdUPZlxmRzM+Y2uRi02mknfLBNYYhtEbLFoLUiCBjethrNXpFQeCIHbYOeBM6TjgqpxYRZGri5jSoDO1qMpPXi/sYaz5KKY+iC5G57cdePB2X5noIG0AnTakMdqc7qcDRmBHulgFeG5Mlatvt8gP3XoWzFFjeqx7KgfBHWFsISer4GV8xvVjJ6gJPuWpO54aNRYndjgxAm9hiCzXjj+u4pPTGo6TayNJ9TEpbEKiJC1JQUkazg4doaGaw4mswFTrpPF/uGfCfC9/IjoYCghR7kKrw7C6COxyasB3KgbO9EbIQJeMUiYGbhj1rnPhvzEHyuzTqbNoAgAMqBAL5uhiAm6RQvh1yQe5ChAiQCI84DzguO8Jm9Ru7Ni2mSLT1glK0+mE82Vx5+gE6nNsVqPfBXZ8Tv3pK9W03Edn7zJp5Wzal+U5V214e22qRFOy0BCqvYZVZO+Xpvj0BHj3ePlKcnZ3l4EuhsebKryYkSSrmP5mdr/qn5t7J1boT6aiSHPJhfMpD9f8ijdAoQ2fv3rqJhEdBnz3fvwAEMTTbnfXRly1M7ZeRZJAK21CI73GXCOw1kk2i8WOXNFmddcPZiertKKgqGhKdwOx59lsM8aFdcOSdX51gySCXNiTr/XnKHG8gcg2Ba5dge9Q4IXvcV1DOMEQnj8UJ1SeFA7HcEZwzSNRr/rD2dLDbNmRpj5/rtIJgRdfu7NdAzgqwBn7k9djoMU9XRl1hTMKuKOAB4FWlSs8lZM44W/7CMqjh9XskwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="12"\n        title=""\n        src="/static/12-867b5bfe6d563e93b45a8c8b7104234e-f8990.png"\n        srcset="/static/12-867b5bfe6d563e93b45a8c8b7104234e-09599.png 320w,\n/static/12-867b5bfe6d563e93b45a8c8b7104234e-52525.png 640w,\n/static/12-867b5bfe6d563e93b45a8c8b7104234e-f8990.png 1280w,\n/static/12-867b5bfe6d563e93b45a8c8b7104234e-34962.png 1600w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Material UI collects brand color for the major social media platform. Now you are one-click away from adopting the tone to your own customised banners and buttons.</p>\n<h2>11. Munsell Hue Test (<a href="http://www.colormunki.com/game/huetest_kiosk?ref=todaydojo">Web</a>, Free)</h2>\n<p>\n  <a\n    class="gatsby-resp-image-link"\n    href="/static/13-143c03082d6bd9ca45afb534679a1b1e-23481.png"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n  \n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 1280px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 69.48640483383687%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsSAAALEgHS3X78AAACb0lEQVQoz42SW08TQRiG+QsmmkCh7S5uF5dCt2WhlT30sN2etntqu6fu0lYSvVF/gZd4IRIMKfXCKuFKgxI5FLzRK4hAwRAFlf/j9ECbeGGcPDN555u8c/jmG1htXABq+1dtfnf5dPU3vaUWvzquAdCru5f1rYN643CtcbrWaL7ZPXm1/bW+fdQB6Nc7x614GyDqjdPq7veueWXrPJ7N30bgce/kGIZN+nA6HCFppgPQ0zOhOxiGjXsx7wTqQYMk8+ztQW3v50Bt73Lp/UmSzzMBL0sG4iGCpf0Sx4gsLXKkwJISR2cid6MhPDrri1E4EUAn/MTT9S+1/bZ5ceNYU+0yT1UK0QdyqqSSFYkB05JElgWqkqUqUqSSi5YKTEUP8ykCnw4u9MzPN5qypmSU6YSZiBlsWo1JRkRSqUiRjxtx1uBmTYEsioyRZq0MnmZxItQ/eWnjOKnbUwof1PWoZgc1ddbQaM1gVC2Rs7i8zeUsWjO5vMUYOhVP+YnQwvrnvjmll8OCyBZMQTG5nJYomGlZ5USFlyxZMrKylcoXBdlOajYb49rm/rWPsuq8wQlzgjGfEucyOSDu8/Ijo2Tl7HvJjCHolqCbvKorJYFh/ETrzS+BGXzV8uYpxfIOxyAEwy4IckOQy+0aRRA8EEA8Hqfb7YY6QBAMOZ1O39RM982rexfLH5pMQoTcLhQd81w3BEFgGOzQ1r0oio7CcD9h7ZOboTA3ePOGa2TYOTx0jcM54miN/ciQawTc7xbm9XUTBswvPn4rPnwSE/SEYnOy9S8UOy6aSvnx4rtDkKxObf9Y2T5f3jz7T0A5V3datf0HdSFTDJq9kFgAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n    >\n      <img\n        class="gatsby-resp-image-image"\n        style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n        alt="13"\n        title=""\n        src="/static/13-143c03082d6bd9ca45afb534679a1b1e-f8990.png"\n        srcset="/static/13-143c03082d6bd9ca45afb534679a1b1e-09599.png 320w,\n/static/13-143c03082d6bd9ca45afb534679a1b1e-52525.png 640w,\n/static/13-143c03082d6bd9ca45afb534679a1b1e-f8990.png 1280w,\n/static/13-143c03082d6bd9ca45afb534679a1b1e-23481.png 1324w"\n        sizes="(max-width: 1280px) 100vw, 1280px"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Train your eyesight to be laser-like. Munsell Hue Test is a fun yet challenging game to arrange color block by hue order. Lower the score is better.</p>\n<h2>12. Wave (<a href="http://wave.webaim.org/">Web</a>, Free)</h2>\n<p>Access your website with web accessibility evaluation tool. The tool examines your site’s color contrast to meet WCAG2.0 AA and AAA standard.</p>\n<p>I hope the article covers your need in the design field, for color inspiration, palettes creation, and color accessibility. I have created a color resources collection in my personal project Today Dojo, which delivers the best-curated design resources for creators. If I have missed anything that should have made it to the list. Find me on <a href="http://www.twitter.com/desktopofsamuel">Twitter</a> and let me know! </p>',
  excerpt:"Color is the combination of science and art, a simple color change could have drastic effect on the emotion or perception of the viewer. Being a UI/UX designer, mastering the color theory and its application truly can step up your design game…",frontmatter:{title:"Essential Color Tools to Step Up Your Design Game",date:"Jul 06, 2018",tags:["Design","Productivity","Color"],path:"/essential-color-tool-2018"}}}]}},pathContext:{tag:"Design"}}}});
  //# sourceMappingURL=path---tags-design-db77ccf0123c4957e62c.js.map