You are here:

The Color Picker

The color picker is used by many elements on your page – borders and shadows, shape fill and text fill.

Click on the color chip under these controls to open up the color picker.

To choose a color, use the rainbow slider.

To choose a shade, click on the gradient.

Use the opacity slider to move the selected item from 100% opaque to 100% translucent.

Beneath the sliders is a precise color code for your current selection. Use the arrows next to the code to move between HEX, RGB and HSL color codes.

For ease of use, use the HEX code to copy/paste an exact color match between items.

RGB & HSL include an alpha channel value for the level of transparency.

Want to get pure values without using the shade gradient? Use any one of these values in the appropriate color code box for these basic shades…

White – HEX #FFFFFF / R255-G255-B255 / H0-S0-L100
Black – HEX #000000 / R0-G0-B0 / H0-S0-L0
Red – HEX #FF0000 / R255-G0-B0 / H0-S100-50
Blue – HEX #0000FF / R0-G0-B255 / H67-S100-L50
Yellow – HEX #FFFF00 / R255-G255-B0 / H17-S100-L50
Green – HEX #008000 / R0-G128-B0 / H33-S100-L25
Purple – HEX #800080 / R128-G0-B128 / H83-S100-L25
Orange – HEX #FF8000/ R255-G128-B0 / H8-S100-L50

Studio Source Yearbooks unofficially recommends the following non-affiliated website to help you with exact color matches, useful for matching your school colors, as well as palette inspirations:

Table of Contents