Add Custom Hex Colors for Text, Backgrounds & More
What You’ll Learn
Want to add custom colors for your text, backgrounds of apps or columns, links, etc? As you may already know, there’s a built-in color selection tool available through many of the style dots, which gives you a wide range of colors with varying saturations to pick from. But sometimes you need a specific color you saw on another webpage somewhere, so let’s walk through how to pick and add custom colors on your site.
Steps for Using Custom Colors
Use a Browser Extension
1. Currently we don’t have a native color-picker tool, so you’ll need to first pick one of the many tools available. If you use Chrome as your browser, I recommend adding the Eye Dropper extension shown in the video above. If you use Firefox, you can pick from a number of different options here. Or colorpicker.com is always a nice, simple tool too.
Select a Color/Copy the code
2. Use your color picker of choice to select the color you’d like to use on your site, and then copy the hex code (including the hash symbol – it should look something like this: #28a5d6).
Back in our application
3. Log into your site, click the style dot where you’d like to add the custom color, click the color selection option, and then click the “+” icon. Paste the hex code you copied, click “Add” and you’re done!
Now you can re-use the colors you save anytime! Have question or comments about this tutorial? Let us know in the comments area below!