Let's take a look at how the color selection tool works in Details!
Definitions
So we're all on the same page, here's a short glossary of terms we're going to use in this article:
- Hue: This is the dominant attribute of any given color
- Saturation: This is the intensity of any given color. For example, blush and bright pink are both hues of pink, with varying saturations.
- Opacity: This is how transparent or opaque any given color is.
- Modal: This is what pop-out windows within any software are called, we'll use this word a lot when referencing 'the Color Selector modal', for example.
Navigating the Color Selector
- Navigating: Use the 'More' drop-down menu in the top-right of the modal window to switch between the various views within the Color Selector.
- Options: You'll notice some options always listed at the top of the modal, and then also some buttons along the bottom. Let's define each of these options here:
- Currently Selected: Preview your currently selected color in the top-left of the modal window.
- Add to Favorites: Save any selected color to your favorites for easy access in your favorites. See 'Favorites' below for more information.
- Add to Collection: Save any selected color to a new or existing collection. Using this option will direct you to the 'Collections' area of the Color Selector. See 'Collections' below for more information.
- Quick Colors: Click the rabbit icon in the bottom-left of the modal to jump to the Quick Colors
- Select No Color & Done: If you'd like to exit the modal without adding the currently selected color, click 'Select No Color' at the bottom. If you've picked the color you like and you're ready to use it, click the 'Done' button at the bottom.
Quick Colors
As mentioned above, the Quick Colors can be accessed by clicking the rabbit icon in the bottom-left of any view of the Color Selector modal. Here you'll find a preset group of common colors, any of which can be selected like any other color for you.
The Quick Colors can be edited by any user, by including the phrase 'Quick Colors' in any color collection title. You could have a 'Spring Quick Colors' collection and a 'Fall Quick Colors' collection, and because they both include the magic words, all the colors from both collections will be included in your Quick Colors (replacing the presets).
Palette
There are a few options here to select any color you desire, and save it for future use, too.
These are the tools available in the Palette section of the Color Selector:
- Hue: The slider on the right can be dragged up or down to select from any of the various hues available.
- Saturation: After selecting the desired hue, use selector within the large square panel to select the desired saturation.
- Opacity: The slider at the bottom of the panel is used to set the opacity, or transparency, of any selected color. Sliding from right to left will increase transparency, sliding back to the right will increase the opacity of the selected color.
Input
Colors can be located and selected by various color codes. Use the 'Input' view to access colors using any of the following options:
- HEX/HTML
- RGB
- HSL
- HSV
- CMYK
- Pantone
Auto Detect
Enter the code you'd like to use into the 'Auto Detect' field and, if the code exists, the color will pull up automatically and display in the 'Currently Selected' window in the top-left of the modal.
Alpha
In this field, you'll enter a number between 0 and 1 to set the opacity of any entered color. For example, enter '0.5' to set the opacity to 50%.
Calculated Color Codes
In the lower section of this view is a display showing you any of the codes matching the color in the 'Currently Selected' window.
From Image
Use this view to select colors from any image. Need to pull colors from an inspiration photo? This is exactly the right tool for the job!
Follow these steps to select colors from an image:
- Click the 'Choose Image' button to upload a photo from your computer or by pasting in the URL to the photo.
- Drag the square-shaped selector around the uploaded image until you locate a desired color.
- Colors to on the left side of the panel are the most prominent colors from the image overall, colors next to the detailed preview (above the 'Choose Image' button) are the most prominent colors within the selected area.
- Select the desired color and then refer to any of the available options to add or save.
Suggestions
The 'Suggestions' view included multiple forms of complimentary colors to the currently selected color. Use this view to fill out color palettes with complementary colors!
Using the drop-down arrow to the right side of any of the selections will present the following options:
- Favorite All: This will add every color in the selected group to your 'Favorites' view. Learn more about 'Favorites' below.
- Create Collection: This will add every color in the selected group to a new collection of colors. Learn more about 'Collections' below.
Favorites
Colors can be individually favorited from any view of the Color Selector using the 'Add to Favorites' button at the top of the modal, or they can be favorited in groups (as mentioned above in the 'Suggestions' section)
Your favorite colors are saved on an individual user basis, so they're not shared across your organization. Select any saved color and click 'Done' to add it. Remove favorited colors by selecting one and click the red 'Remove From Favorites' link that will appear.
Your favorites can also all be added to a new collection by clicking the drop-down arrow to the right side of the selection.
Collections
Colors can be individually added to new or existing collections from any view of the Color Selector using the 'Add to Collection' button at the top of the modal, or they can be added in groups (as mentioned above in the 'Favorites' and 'Suggestions' sections).
Rename collections by clicking the pencil icon to the left of the listed name. Any unnamed collection will default to 'Unnamed Collection'. Naming any collection to include the phrase 'Quick Colors' will automatically add the collected colors to the 'Quick Colors' (accessible from any screen by clicking the rabbit icon in the bottom-left of the modal). Read more about the 'Quick Colors' section near the top of this article.
Collections can be cleared out by clicking the drop-down arrow to the right side of the collection and selecting 'Remove All'.
History
Access a grouping of recently viewed or selected colors here. Select any color from this view and use it like any other color (i.e. create collections, favorite).