Color Picker

The color picker can be used to update a layer’s fill and stroke.

Selecting Colors

While color pickers vary across platforms, they typically include multiple options for selecting a color.

• The color picker displays a hue and variations of its light and dark shades &mdash different hues can be accessed by adjusting the slider. A color can be selected by moving the white circle to the desired color on the color picker.

• The eyedropper tool can be used to select colors that are in the design file. For example, the eyedropper can select colors from an image in the design file.

• Each color has a notation that correlates to a color model, such as HEX, RGB, and HSL. Entering a notation, such as a HEX code, is another way to select a color from the color picker. In collaborative projects, color notations are included in design documentation to ensure that the correct colors are consistently applied in the design and development phases.

• Colors that are applied in the design file may be automatically saved in the color picker as “swatches” or “document colors.” Alternatively, the software may provide an option to save colors manually, so they can be readily accessed from the color picker.

Figma, a prototyping tool and graphics editor, has additional resources about the color picker as well as the color model.

Adjusting Color Settings

The opacity of a color often defaults to 100%, and color pickers typically provide a feature for adjusting the opacity.

The color picker often defaults to applying a solid color, where one color is consistently applied. Most design software also can apply a gradient in various styles, such as linear, radial, and diamond, where two or more colors are blended together.