Color Settings

Color picker

You can dial in your color using the color picker by any of the methods below, alone or in combination:

• Use the visualizer at the top to choose a color
• Use the color slider
• Manually enter RGB, HSL, or HEX* values. Click the arrow indicator to switch between the different color models
• Choose a preset color from our provided color palettes

*HEX will be unavailable from the color picker if your color is partially or completely transparent (i.e. if you have alpha values in your hex code / opacity is less than 100). Instead, see 🎨Color Settings - Hex codes.

You can paste hex codes directly into the input field, allowing you to quickly use colors you find in a design specification or on the web. You can also implement them manually.

Structure

Hex codes are based on the RGB color model. They are generally composed of a “#” followed by six alphanumeric characters. Each set of two characters maps to RGB values, Red, Green, and Blue respectively. For each two-character pair (or “byte”), the values go from 00 for lowest intensity, to FF for highest intensity.

Here’s a nice blog post that goes into more detail: Hex codes: A comprehensive guide to using colors

Alpha values

Premium feature

For background color in particular, eight-character hex codes are also possible. The last two characters represent alpha values, or transparency values. The higher the value, the more transparent your color will be. You’ll notice these get added automatically when you use the opacity slider.