Create a Color Picker Icon In Illustrator

In this tutorial I will show you how to create a color picker icon from some blends, gradients, and simple shapes. This icon works great for web design project and in user interface design. Moreover, you can use the techniques in this tutorial in other icon, web, and print projects. Let’s get started!

Final Image

Take a look at what we will be creating.



There isn’t much preparation needed for this tutorial. All you need is Illustrator CS4 or CS5 and a beginning to intermediate knowledge of how to use the program.

Step 1

With the Line Segment Tool (/), create a path that is about 80 px tall. Make sure the new path has a 1 pt stroke and change the stroke color to an orange.


Step 2

With the line selected, choose Effect > Distort and Transform > Transform. In the Transform Effect dialog, change the number of copies to 6, select the bottom center reference point in the Reference Point Locator, and set the Angle to 60. Generating six copied will place one copy in front of the original. We want to do this so we will have a complete blend in the next couple of steps.


Step 3

With the transformed line selected, choose Object > Expand Appearance and Ungroup (Command +Shift + G). Change to stroke colors to primary (red, yellow, blue) and secondary colors (orange, purple, green).


Step 4

Select all the strokes and choose Object > Blend > Make (Command + Alt/Option + B).


Step 5

Create an ellipse within the blend with the Ellipse tool (L) centered over the blend. Select the ellipse and blend and choose Object > Clipping Mask > Make (Command + 7).


Step 6

Create another ellipse about half the height and slightly smaller width as the previous ellipse. Place it close to the top side of the masked blend. Change the fill of the new ellipse to a linear gradient and in the Gradient panel, change the Location to -90, change both colors stops to white, change the opacity of the second color stop to 0, and change the middle point Location to 30.


Step 7

Copy (Command + C) the highlight ellipse and Paste in Front (Command + F). Move and rotate the copy to the bottom side of the mask blend. Change the first color stop in the gradient to a light gray and set the Blending Mode to Multiply from the Transparency panel.


Step 8

Create another ellipse about the size of the main masked blend and fill it with a radial gradient. Make sure the first color stop in the radial gradient is black and the second is white. Squish the ellipse and place it behind all other artwork. Set the Blending Mode of the ellipse to Multiply and change the opacity to 50 percent.


Step 9

Now that we have the color wheel done, we can concentrate on the eyedropper. Create a rectangle with the Rectangle tool (M) about three fourths the height of the color wheel. Create another smaller rectangle about a fifth the height of the main rectangle and half its width and place at the bottom of the main rectangle.


Step 10

Select both rectangles and press the Unite button from the Pathfinder panel. Next, choose Effect > Stylize > Round Corners. In the Round Corner Dialog, change the Radius to 3 px. Next, choose Object > Expand Appearance.


Step 11

Copy (Command + C) the eyedropper shape and Paste in Front (Paste in Front). Create another rectangle that covers the bottom part of the eyedropper. Select the main copy and the smaller rectangle and press the Intersect button from the Pathfinder panel.


Step 12

Create a rectangle towards the top of the main eyedropper shape. Make the new rectangle about double the width and one sixth the height of the main eyedropper shape. Next, choose Effect > Stylize > Round Corners and in the Round Corner Dialog, change the Radius to 5 px.


Step 13

Create another rectangle slightly wider and about a fourth the size of the main eyedropper shape. Place the shape towards the top of the previous rectangle and round the corners 15 px.


Step 14

Select the top eyedropper shapes and go Object > Expand Appearance. Next, go Object > Path > Offset Path and in the Offset Path dialog change the Offset to -2 px. This value might be different depending on the original size of your shapes.


Step 15

Now that we have all the shapes done for the eyedropper, we can place them over the color wheel we already created. Creating the shapes and not filling in before we place the dropper makes it easier to see the white and transparency parts of the gradients when we fill them. So, place your eyedropper shapes over the color wheel at a 45 degree angle.


Step 16

First, select the smaller rectangle and its offset from the top of the dropper and go Object > Arrange > Bring To Front (Command + Shift + ]). Select the original top shapes (not the offsets) and fill with a linear gradient. Change the first color stop in the gradient to a dark gray and the second color stop to black. Change the Angle to -90 in the Gradient panel.


Step 17

Select the offsets of the upper rectangle shape and fill with a linear gradient. Change both color stop in the gradient to white. In the Gradient panel, change the opacity of the first color stop to 80 and the second to 0. Change the Angle to -90 and change the middle point Location of the gradient to 15.


Step 18

Select the main body of the dropper and fill with a linear gradient. For this gradient we are going to add three more color stop giving a total of five. Add these color stop by clicking right below the Gradient Slider in the Gradient panel. Once you added the color stop, change the first stop to gray, the next three to white, and the last one a dark gray. Change the Opacity of the first white color stop to 56 and change the Opacity of the third white color stop to 35. Change the Location of the first white color stop to 12, the Location of the second white color stop to 30, and change the Location of the third white color stop to 63. Change the Angle of the gradient to -45. Finally change the stroke to white and press the Align Stroke To Outside button from the Stroke panel.


Step 19

Select the shape at the bottom of the drop and fill it will a linear gradient. Change the first color stop to white and the second to a gray color. From the Transparency panel, change the Blending Mode to Multiply.


Step 20

Select the main small rectangle from the top of the dropper, Copy (Command +C), and Paste in Back (Command + B). With the copy still selected move it slightly down. Select the main dropper shape, Copy (Command + C), and Paste in Front (Command + F). Select both copies and press the Intersect button from the Pathfinder panel. Change the fill to a light gray color, change the Blending Mode to Multiply from the Transparency panel and slightly scale it to fit over the stroke of the main dropper shape.


Step 21

Select the main dropper shape, the main top shapes, and Copy (Command + C) and Paste in Back. With the copies still selected, press the Unite button from the pathfinder panel. With the Selection tool (V) move and rotate the new shape clockwise to create a shadow of the dropper.


Step 22

Create a ellipse the size of the color wheel, select the ellipse and shadow shape, and Intersect them.


Step 23

Select the new shape and go Object > Arrange > Send Backward (Command +[) until the shape is behind the original eyedropper shapes. Fill the shape with a linear gradient, change the first color stop to a dark gray, and the second color stop to a light gray. Change the Blending Mode to Multiply from the Gradient panel and you are all done!



That wasn’t too bad was it? This tutorial uses some pretty basic concept that can easily be applied to other vector illustrations, icons, and more. What can you come up with?


Ryan Putnam

Ryan Putnam (Rype) runs <a href=""></a>, a site dedicated to Illustrator tips, tricks, and tutorials. In addition, he run the small design studio <a href="">Rype Arts</a>, he's a contributing author and artist to the Adobe Illustrator WOW! CS4 and CS5 books, and writes for many vector and Illustrator related blogs. You can find him on Twitter <a href="">@Vectips</a> and <a href="">@RypeArts.</a>

  • Alfred R. Baudisch

    I can’t make Step 4 work (Object > Blend > Make).. I just got 4 more colored lines, not a full colored solid shape. Any tips?

    I started the tutorial from scratch and got the same result, so I think I’m following 100%.


    August 31, 2010 at 8:58 PM
  • John Paul

    Very nice icon ,the combination of colors are so alive .
    Thanks for the great post .BOOKMARKED
    .-= John Paul´s last blog ..The Serious Risks of Black Hat SEO =-.

    September 1, 2010 at 2:38 AM
  • Martin LeBlanc

    Great tutorial and end-result.

    September 1, 2010 at 4:34 AM
  • Andrea Austoni

    Great work as always from Ryan. This is correctly executed as an icon: clean, cute and colorful.
    .-= Andrea Austoni´s last blog ..HandyEtat Icons and Interface =-.

    September 1, 2010 at 3:05 PM
  • BebopDesigner

    Excellent tut! Love the result… looks amazing.
    Thanks for sharing

    September 1, 2010 at 3:25 PM
  • Varun

    Really nice , loved your techniques.
    .-= Varun´s last blog ..About Me =-.

    September 3, 2010 at 5:12 PM
  • Diego Monzon

    Great tutorial and beautiful icon

    September 8, 2010 at 3:23 AM
  • Codrin Sava

    @Alfred you need to adjust the settings of the blend: Object/Blend/Blend options. You should select ‘Smooth colour’ from the Spacing drop-down. If that doesn’t work, select ‘Specified steps'(like I did) enter a high number, somewhere around 300, check ‘Preview’, you should see the blend.

    Otherwise cool tut. I had fun doing it. Thanks Ryan.

    September 14, 2010 at 7:52 AM
  • Elena

    This is a great tutorial. Anything with the blend tool is a good thing. Thanks for making a complex object look simple.
    .-= Elena´s last blog ..Guess Whos Going On A Diet =-.

    September 16, 2010 at 3:55 PM
  • Shahrez Rafiq

    Have never been good with Illustrator but following this tut is like piece of cake. Great tutorial with stunningly beautiful icon.

    September 17, 2010 at 12:26 AM
  • Web Designers

    Great tutorial

    September 17, 2010 at 2:48 PM
  • squareart

    Wasn’t going to read this – was about to close window and I started scrolling down, and got hooked. Great Tut, with a few nicely added tips.

    September 20, 2010 at 5:55 AM
  • Paromita

    Very good tutorial.

    September 27, 2010 at 1:41 PM
  • Dario Calonaci

    Great tutorial Rype, I love this icon…

    October 2, 2010 at 9:00 AM
  • Adie

    Thats a really cool looking icon. Will give this a go
    .-= Adie´s last blog ..Tips On Creating A Mobile Website =-.

    October 6, 2010 at 8:19 AM
  • Maxime

    Thanks for the tutorial.
    Here is what I came up with:
    Thanks for watching. Feel free to comment and criticize.

    October 6, 2010 at 8:27 AM
  • taxi dnepr

    Very interesting AI tutorial, thanks

    October 7, 2010 at 11:09 AM
  • ychty

    Really nice tut indeed!
    .-= ychty´s last blog ..Free Vector Alphabets in English and Russian new RB designs =-.

    October 10, 2010 at 3:07 AM
  • Sachin Gupta

    Excellent tutorial! It’s a complete tutorial for everyone specially for the beginners that wants to design with yourself.
    .-= Sachin Gupta´s last blog ..Web Hosting =-.

    November 18, 2010 at 12:50 AM