Color Picker is an often used tool when building your web pages. In EverWeb it’s easy to access through the Toolbar, by the Window-> Show Colors menu option or by using the Cmd+Shift+C short cut key toggle. Whenever you click on any color swatch in the Inspector Window, Color Picker is also there, coming up front and center.
The Color Picker has five available tabs:
- Color Wheel
- Color Slider
- Color Palette
- Image Palette
Whilst selecting the color that you want to use is self explanatory, there are some other useful things to know about Color Picker…
1. Resizing the Color Picker
Resizing the Color Picker is a useful if you are using a large screen and need Color Picker to be more visible. Just grab one of the corners of the Color Picker window and drag outwards to make Color Picker larger. You can also resize the Color Picker vertically to make it taller, just grab the top of the window and drag the mouse pointer higher. This is also useful if you cannot see all of your saved colors in the color palette at the bottom of Color Picker.
2. Saving Colors
If you select a color in Color Picker, it is displayed as the large swatch in the bottom left corner of the Color Picker app. If you want to save the selected color just drag the color from the large swatch on to one of the empty small swatches. By default, there are two lines of small swatches. Drag the color to where you want it and drop it in to place. If there is a color at the drop location already, the color and all those to the right of it will move along one spot to accommodate the new color. Swap colors around just by dragging and dropping the color you want to move to a different swatch location.
3. Removing a Color
To remove a color from the saved color swatch palette, drag and drop the color you want to remove to the Trashcan. This appears to be the only way to delete colors you have saved and no longer want in the saved swatch palette.
4. Color Matching
If you need to match up a color to replicate it on your website, you used to only have the option of using the Digital Color Meter. Now in EverWeb, there is an eye dropper that does the the same thing as Digital Color Meter. Start by clicking on the eye dropper which is to the right of the large color swatch in the bottom left hand corner of the Color Picker.
The mouse pointer will become a magnifying glass. This is great as it enables you to pinpoint the exact color you want more easily. Once you have found the color you want to color match, just click and the color is then available as the large color swatch. You can then use that color elsewhere. If you want to save the color just drag it to one of the small color swatch locations.
5. Accessing Saved Colors
If you have more than two rows of saved colors, there are a few ways in which you can view colors if they are not easily visible. You can resize the Color Picker so that it reveals any rows of small color swatches that are not visible. Alternatively grab the top of the Color Picker Window and stretch it vertically until the color swatch rows that are hidden become visible. If you want to keep the view at only two color swatch rows, drag vertically when the mouse pointer is over the color swatch rows. You will see that any hidden rows will scroll into view. A side bar slider also appears when you perform this dragging action. Lastly, resize the Color Picker horizontally. Stretching the Color Picker will make longer rows of the small swatches.
6. Making Your Own Color Palette
Color Picker allows you to make your own Color Palette. To make your own palette:
- Select the Color Palette tab which is the center tab of the Color Picker.
- Click on the Settings Cog.
- Select New.
- An ‘Unnamed’ color palette is created with one unnamed color
- Drag any of the small color swatches that you want included into the new color palette. When you do this, they will also be ‘Unnamed’.
- Double click on the ‘Unnamed’ label and rename each color that you have added to the color name you want to use.
- To add the large swatch color to your color palette just click on the ‘+’ button.
- To remove a color from the color palette, highlight it in the list and click on the ‘-‘ button.
- To name your color palette, use the Settings Cog again and select ‘Rename’.
Color Picker is a surprisingly versatile tool with more options than first meet the eye. Let us know if you have a tip of your own in the Comments sectoin below!
As well as this blog post, we also have a video walkthrough of Color Picker on YouTube.
EverWeb on Social Media
You can also find EverWeb on the following social media platforms:
Twitter handle @ragesw