Color picker

Find the exact color you’re looking for using the color swatch tool, through any of the following methods:

• Use the color slider to select a hue
• Use the visualizer at the top to choose a shade from that hue
• 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, inspired by Notion and Indify’s default colors.

*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.

Check out this blog post to learn more about hex codes.

Alpha values 🔒

For background color in particular, eight-character hex codes are also possible. The last two characters represent the 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.

Relevant Articles:

🌗Light and Dark Mode - Setting dark or light mode locally