The Color Picker

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.

color picker xd


Here are the few areas of the color picker we need to pay attention to:

(1) Switch between Solid Color and Gradient. We’ll see gradients in the next chapter, in this chapter we’ll deal with Solid Colors


(2) The larger square is where you actually select the color you want


(3) The first colorfoul vertical stripe allows you to quickly navigate through different colors


(4) 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. 


(5 & 6) For each color you select, Adobe XD will display its HSBA value (Hue, Saturation, Brightness, Alpha – or opacity) and a Hex value. You will pass these values to your front-end developers, or use it directly if you are the one coding your own designs.  


(7) When you click on the “+” 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. It’s a super useful way of having all the colors you need in one place. You can remove a swatch by clicking on it and dragging it out of the color picker popup.


PREVIOUS CHAPTER                                                                                       NEXT CHAPTER