Even if you’re not a graphic designer, there’s no doubt you’ve stumbled upon HEX Color Codes before. These six-digit, hexadecimal numbers are the most common ways to represent color on the web and come in handy in a number of design scenarios. Whether you need to stick to an established branding color palette with very specific hues or simply want to create cohesion in your design by matching your header color to the color of your document border, HEX Color Codes can certainly make the job easier.
This is why BeFunky’s Graphic Designer allows you to use HEX Color Codes for all of your design needs, whether you’re adding text to photos, working with vector graphics, customizing design templates, and more! Want to learn how you can make the most of these important color codes? Keep reading to find out all there is to know!
What are HEX Color Codes?
We touched upon what HEX Color Codes are earlier, but let’s get down to the nitty-gritty. HEX Color Codes contain six digits, including letters or numbers, which define how much red, green, and blue a specific color contains in values between 00 and FF, instead of from 0 to 255 like in RGB.
The codes start with a hash sign (#), while the first two digits refer to red, the next two to green, and the last two to blue. For example, in #123456, 12 is Red, 34 is Green, and 56 is Blue. As you can imagine, there are plenty of HEX Color Code variations to discover – 16 million, in fact!
Now that we’ve covered what they are, let us fill you in on how you can find a color’s HEX code using different resources.
BeFunky’s Eyedropper Tool
Our Eyedropper Tool is helpful when you wish to change the color of your text or any other design element to match another color already present in your template. You can find the Eyedropper tool above the Color Palette and, using your mouse, click on any color to then locate that shade on the chart and provide you with its HEX Color Code.
BeFunky’s Color Palette
Additionally, you can use our Color Palette to find a shade you love. As you click on various colors, their HEX Color Code will also be displayed in the HEX box above.
Pantone Color Finder
Pantone is synonymous with color and the brand also provides a Color Finder which mentions the HEX Color Code of every shade available.
This online resource offers a color palette similar to BeFunky’s for you to select colors from, while also displaying their individual HEX Color Codes. What is most helpful about this resource, however, is the Latest Favorite Colors feature, for those looking for color inspiration.
How to Use HEX Color Codes
Want to learn how to use HEX Color Codes when editing a template in BeFunky’s Graphic Designer? Head to the Graphic Designer to get started and in the Templates library, choose a design which takes your fancy.
Then, click Use This Template to begin.
First up, we’re going to show you how to customize the background color, as well as how HEX Color Codes come into play. Navigate to Customize in the main menu to the left and underneath Background Color, you’ll see a number of color swatches. Click on the first color swatch to open the Color Palette.
As you select different colors from the Color Palette, you’ll notice their 6-digit HEX Code (located in the HEX box above the Color Palette) changes. For the color we’ve selected, for example, the HEX Color Code is # F6DAA6.
Next, we’re going to show you how to change the color of a graphic in your template, such as this orange rectangle. Click on the graphic you wish to change and a Graphic Properties or Properties toolbar related to the specific shape will appear. For example, we’re changing the color of a rectangle, so our toolbar reads Rectangle Properties.
Next to Fill, you’ll see a color swatch. Click on this to open the Color Palette, from which you can select a color with your mouse. Again, the chosen color’s HEX code will also appear in the HEX box above it. As you can see here, the color we have selected has the HEX code #DCA082.
Now, let’s change the color of our template’s text. To do this, simply select the text box with your mouse and a Text Properties toolbar appears. Again, you can just click on the color swatch to open the Color Palette and select a new color for your text.
Want to achieve the same outlined text effect, as shown on our template? Instead of applying a Fill Color to the text, set the Fill Color to be transparent, and select an Outline Color instead.
We’re also going to change the color of the quotation mark graphic in our template, which is as simple as clicking on it and opening the Color Palette, before selecting a new color. In this example, we wanted to replicate the exact same color used previously for our background, so simply typed in this color’s HEX code into the HEX box.
Finally, we’re going to show you how to use the Eyedropper Tool to select a color already present in the template, which can be used as an overlay for your photo.
Simply click on your photo and you’ll notice an Image Properties toolbar appears. Click the square next to Color Overlay, and this time we’re going to select the Eyedropper tool located above the Color Palette and to the right of the HEX box.
Using the Eyedropper tool, select a color from your template that you wish to overlay your photo with. For example, we’ve chosen the peach color of our rectangle. Then, just adjust the Intensity using the slider below the Color Palette.
Want to add a Tint instead? Select the Transparent swatch to remove your Color Overlay and click the color swatch next to Tint back in the Image Properties toolbar. Simply repeat the same process using the Eyedropper tool to select a color already present in your design. Alternatively, click Transparent to remove the Tint.
Finally, all that’s left to do is to save your image. Click Save at the top of the screen and select your desired save location. How simple was that?
As you can see, working with HEX Color Codes isn’t just fun, but it’s also an easy way to keep your colors consistent across your design. Ready to start using HEX Color Codes to strengthen your design prowess?