{"id":1168,"date":"2017-08-03T22:29:30","date_gmt":"2017-08-03T22:29:30","guid":{"rendered":"http:\/\/www.xdguru.com\/?page_id=1168"},"modified":"2020-08-18T12:01:14","modified_gmt":"2020-08-18T12:01:14","slug":"color-picker","status":"publish","type":"page","link":"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/","title":{"rendered":"Guide – Color picker"},"content":{"rendered":"

The Color Picker<\/strong><\/h1>\n

As we have seen in the paragraphs above, the color picker is accessible when you have an object selected, by clicking on the little color rectangle next to any fill, border or shadow.<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

Here are the few areas of the color picker we need to pay attention to:<\/p>\n

(1)<\/strong> Switch between Solid Color and Gradient. We’ll see gradients in the next chapter, in this chapter we’ll deal with Solid Colors.<\/p>\n

 <\/p>\n

(2)<\/strong> The larger square is where you actually select the color you want<\/span><\/p>\n

 <\/p>\n

(3)<\/strong> The first colorfoul vertical stripe allows you to quickly navigate through different colors<\/span><\/p>\n

 <\/p>\n

(4)<\/strong> The second vertical stripe controls the color opacity. Drag the handle to the bottom to lower the opacity. The change will also be reflected in the “A” (alpha) value just below it.\u00a0<\/span><\/p>\n

 <\/p>\n

(5)<\/strong> Select the color mode that you want to be displayed between: HEX, RGB and HSV.\u00a0<\/span><\/p>\n

 <\/p>\n

(6)<\/strong> Set the opacity (Alpha) of the color.\u00a0<\/span><\/p>\n

 <\/p>\n

(7)<\/strong> Click the Eyedropper tool to select a color from the artboard.<\/span><\/p>\n

 <\/p>\n

(8) <\/strong>When you click on the \u201c+\u201d icon, the color currently selected will be added as a favourite color (swatch) at the bottom of the popup. All your swatches will be lined up here and will be available every time you open the color picker, for any artboard within the same .xd document. <\/span>It\u2019s a super useful way of having all the colors you need in one place. <\/span>You can remove a swatch by clicking on it and dragging it out of the color picker popup. <\/span><\/p>\n

 <\/p>\n

PREVIOUS CHAPTER<\/a>\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0NEXT CHAPTER<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

The Color Picker As we have seen in the paragraphs above, the color picker is accessible when you have an […]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":907,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"\nAdobe XD Color Picker - Learn Adobe XD with XDGuru.com<\/title>\n<meta name=\"description\" content=\"Learn all the secrets of the Adobe XD color picker. The most comprehensive guide on Adobe Experience Design, available for FREE on XDGuru.com\" \/>\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.xdguru.com\/adobe-xd-guide\/color-picker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adobe XD Color Picker - Learn Adobe XD with XDGuru.com\" \/>\n<meta property=\"og:description\" content=\"Learn all the secrets of the Adobe XD color picker. The most comprehensive guide on Adobe Experience Design, available for FREE on XDGuru.com\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/\" \/>\n<meta property=\"og:site_name\" content=\"XDGuru.com\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-18T12:01:14+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/ColorPicker1-300x184.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.xdguru.com\/#website\",\"url\":\"https:\/\/www.xdguru.com\/\",\"name\":\"XDGuru.com\",\"description\":\"Adobe XD tutorials and UI\/UX design tips\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.xdguru.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#primaryimage\",\"url\":\"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/ColorPicker1-300x184.jpg\",\"contentUrl\":\"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/ColorPicker1-300x184.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#webpage\",\"url\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/\",\"name\":\"Adobe XD Color Picker - Learn Adobe XD with XDGuru.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.xdguru.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#primaryimage\"},\"datePublished\":\"2017-08-03T22:29:30+00:00\",\"dateModified\":\"2020-08-18T12:01:14+00:00\",\"description\":\"Learn all the secrets of the Adobe XD color picker. The most comprehensive guide on Adobe Experience Design, available for FREE on XDGuru.com\",\"breadcrumb\":{\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.xdguru.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide – Main\",\"item\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guide – Color picker\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adobe XD Color Picker - Learn Adobe XD with XDGuru.com","description":"Learn all the secrets of the Adobe XD color picker. The most comprehensive guide on Adobe Experience Design, available for FREE on XDGuru.com","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.xdguru.com\/adobe-xd-guide\/color-picker\/","og_locale":"en_US","og_type":"article","og_title":"Adobe XD Color Picker - Learn Adobe XD with XDGuru.com","og_description":"Learn all the secrets of the Adobe XD color picker. The most comprehensive guide on Adobe Experience Design, available for FREE on XDGuru.com","og_url":"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/","og_site_name":"XDGuru.com","article_modified_time":"2020-08-18T12:01:14+00:00","og_image":[{"url":"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/ColorPicker1-300x184.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.xdguru.com\/#website","url":"https:\/\/www.xdguru.com\/","name":"XDGuru.com","description":"Adobe XD tutorials and UI\/UX design tips","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.xdguru.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#primaryimage","url":"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/ColorPicker1-300x184.jpg","contentUrl":"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/ColorPicker1-300x184.jpg"},{"@type":"WebPage","@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#webpage","url":"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/","name":"Adobe XD Color Picker - Learn Adobe XD with XDGuru.com","isPartOf":{"@id":"https:\/\/www.xdguru.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#primaryimage"},"datePublished":"2017-08-03T22:29:30+00:00","dateModified":"2020-08-18T12:01:14+00:00","description":"Learn all the secrets of the Adobe XD color picker. The most comprehensive guide on Adobe Experience Design, available for FREE on XDGuru.com","breadcrumb":{"@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/color-picker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.xdguru.com\/"},{"@type":"ListItem","position":2,"name":"Guide – Main","item":"https:\/\/www.xdguru.com\/adobe-xd-guide\/"},{"@type":"ListItem","position":3,"name":"Guide – Color picker"}]}]}},"_links":{"self":[{"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/pages\/1168"}],"collection":[{"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/comments?post=1168"}],"version-history":[{"count":0,"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/pages\/1168\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/pages\/907"}],"wp:attachment":[{"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/media?parent=1168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}