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.

hex color picker beach scene

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!

hex color codes example

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.

hex color eyedropper BeFunky

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.

hex color codes BeFunky color palette

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.

Pantone color finder BeFunky
Panton

Color-Hex

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.

Online color hex BeFunky

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.

Hex color codes BeFunky Tutorial

Then, click Use This Template to begin.

Hex color codes BeFunky Tutorial
Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial
Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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.

Hex color codes BeFunky Tutorial

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?

Hex color codes BeFunky Tutorial

Final Results

Hex color codes BeFunky Tutorial final edit

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?