How to Use the Color Picker in WebMatrix

The color palette and color picker features in the WebMatrix CSS editor make it easier to work with colors in CSS classes. These WebMatrix features let you make fine-tuned adjustments while ensuring that you’re using the latest CSS3 standards.

Using the color palette

To use the color picker, start by adding a CSS file to your site, or edit an existing one. When you’re ready to start adding color, notice that a color palette appears as you type your CSS:


This list of colors is generated by first looking at other colors in your site, and then by listing the primary named colors that are available in CSS. For example, suppose you have a style sheet that contains CSS classes and that each class has a different color attribute. As you create a color-based attribute in a new class, the colors from the other classes show up in the palette of available colors:


Each of the first five colors corresponds to the color code of the preceding class. This makes it easier to build a consistent set of colors throughout your site.

Using the color picker

The color palette is great if you already know the hex codes for your CSS. However, if you want to adjust colors in your site, you can use the color picker. To get started, click the down arrow on the color palette.


Clicking the down arrow will open the advanced color picker, where you can make several adjustments.


Along with choosing various color combinations, you can also adjust the opacity level by using the slider at the bottom of the color picker.


The eye dropper on the lower right of the color picker lets you choose any color that is currently visible on your computer screen—even colors outside the WebMatrix window.


These options make it easier than ever to work with colors when you edit CSS in WebMatrix.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!