{"id":1196,"date":"2017-03-05T23:37:53","date_gmt":"2017-03-05T23:37:53","guid":{"rendered":"https:\/\/blogs.scu.edu\/dataviz\/?p=1196"},"modified":"2017-03-05T23:37:53","modified_gmt":"2017-03-05T23:37:53","slug":"finding-the-right-color-palettes-for-data-visualizations","status":"publish","type":"post","link":"https:\/\/blogs.scu.edu\/dataviz\/2017\/03\/05\/finding-the-right-color-palettes-for-data-visualizations\/","title":{"rendered":"Finding the Right Color Palettes for Data Visualizations"},"content":{"rendered":"

In this blog, three rules of thumbs have been provided:<\/span><\/p>\n

    \n
  1. Have a wide range in both hue and brightness<\/span><\/li>\n<\/ol>\n

    To have palettes which are varied in brightness, so that the audience can distinguish the information easily. If you use bright color or hue color only, people who are color blind will have difficulties cannot be able to tell the difference, and those ordinary audiences will also be suffered from <\/span><\/p>\n

    2. \u00a0 <\/span>Follow natural patterns of color<\/span><\/p>\n

    Sometimes nature can give you the most inspiring instinct. if you look at the landscape below, a sunset or the spring in a forest, you will see the beauty of palette of a light green to a purplish blue or an orange-brown to cold gray\u2026that color makes you fell pleasant when you see natural view will give you similar feeling when you design your own visualization work.<\/span><\/p>\n

    3.\u00a0 <\/span>Use a gradient instead of choosing a static set of colors<\/span><\/p>\n

    To extract from the gradients will make your color seems more natural and pleasing. By use of grayscale and grid, designers will be able to switch color by descending hue easily. <\/span><\/p>\n

    Finally, here are some useful links for you guys to make as references when choosing your color palette. <\/span><\/p>\n

    Tools<\/span><\/p>\n

    Color Picker for Data \u2014 a handy color tool where you can hold chroma constant and pick your palette with ease<\/span><\/p>\n

    Chroma.js \u2014 a JavaScript library for dealing with colors<\/span><\/p>\n

    Colorbrewer2 \u2014 a great tool for finding heat map and data visualization colors, with multi-hue and single-hue palettes built in.<\/span><\/p>\n

    gradStop.js \u2014 a JavaScript library to generate monotone color schemes and equidistant gradient stops<\/span><\/p>\n

    Color Oracle \u2014 a free color blindness simulator for Window, Mac and Linux.<\/span><\/p>\n

    Other Resources<\/span><\/p>\n

    And here are some other good color palette resources we found and loved. While they are not necessarily designed for data visualization, we think you would find them useful.<\/span><\/p>\n

    ColorHunt \u2014 high quality color palettes with quick preview feature, great resource if you only need four colors<\/span><\/p>\n

    COLOURlovers \u2014 great color community with various tools to create color palettes as well as pattern designs<\/span><\/p>\n

    ColorSchemer Studio \u2014 powerful desktop color pick app<\/span><\/p>\n

    Coolors \u2014 light weight random color palette generator where you can lock the colors you want and swap out the others<\/span><\/p>\n

    Flat UI Colors \u2014 great UI color set, one of the most popular ones<\/span><\/p>\n

    Material Design Colors \u2014 another great UI palette. Not only does it provide a wide range of colors, it also provides different \u201cweights\u201d or brightness of each color<\/span><\/p>\n

    Palettab \u2014 a Chrome extension that shows you a new color palette and font inspiration with every tab<\/span><\/p>\n

    Swiss Style Color Picker \u2014 another collection of good color palettes<\/span><\/p>\n

    reference: <\/span><\/em><\/p>\n

    https:\/\/blog.graphiq.com\/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.iumxfns41<\/span><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    In this blog, three rules of thumbs have been provided: Have a wide range in both hue and brightness To have palettes which are varied in brightness, so that the audience can distinguish the information easily. If you use bright color or hue color only, people who are color blind will have difficulties cannot be … Continue reading Finding the Right Color Palettes for Data Visualizations<\/span><\/a><\/p>\n","protected":false},"author":1878,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"qubely_global_settings":"","qubely_interactions":"","kk_blocks_editor_width":"","_kiokenblocks_attr":"","_kiokenblocks_dimensions":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1196","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"gutentor_comment":0,"qubely_featured_image_url":null,"qubely_author":{"display_name":"sun123","author_link":"https:\/\/blogs.scu.edu\/dataviz\/author\/sun123\/"},"qubely_comment":0,"qubely_category":"Uncategorized<\/a>","qubely_excerpt":"In this blog, three rules of thumbs have been provided: Have a wide range in both hue and brightness To have palettes which are varied in brightness, so that the audience can distinguish the information easily. If you use bright color or hue color only, people who are color blind will have difficulties cannot be…","post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/1196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/users\/1878"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/comments?post=1196"}],"version-history":[{"count":1,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/1196\/revisions"}],"predecessor-version":[{"id":1198,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/1196\/revisions\/1198"}],"wp:attachment":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/media?parent=1196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/categories?post=1196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/tags?post=1196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}