How to Use Hex Code Colors!

Hey, jammers! ^.^ Panda here!

So, this tutorial marks the very first of the (hopefully... :P) many tutorials I'll be posting on here to help you commissioners and students learn how to make even BETTER edits!

But without any further ado... let's get right on into this tutorial!

Firstly, a hex code (or hexadecimal code, if you want to get all fancy-schmancy :P) is a string of 6 letters and/or numbers that represent a certain color. For example, the hex code for black is #000000, and the hex code for white is #ffffff. But if you'd like to see an example of a more advanced hex color code, the hex code for this shade of aquamarine is #00CED1.

But how do these confusing little codes come in handy?

You see, when you're making an edit (especially if you use multiple programs to create your edit) you want everything to look consistent. Tell me--which one of the following two edits looks better, more cohesive and more professional?

^ Option 1 ^

^ Option 2 ^

*Jeopardy music plays*

Option 2 is definitely better, right? The colors go more nicely together, and only 2 different colors were used. In Option 1, 6 different colors were used! 

Carrying the same couple of colors throughout your edit makes it ALL of the following things:

• cohesive
• professional
• pleasing to the eye (#eyecandy)
• more epic and more unicorn-ish

But how do you use the EXACT same colors throughout your edit?

Simple--use hex codes!

For example, that shade of aquamarine we spoke of earlier? We could easily implement that same hex color code (#00CED1) throughout our design, making it ten billion times better.

You might be wondering how to use these hex codes in specific editing programs, and that is a good thing to be wondering! ^.^

Since many of you use PicMonkey, I'll be showing a more in-depth tutorial on that below, but the process by which you can locate an area in which to paste a hex code in any given program is quite similar for any program.

Let's create an edit in PicMonkey, using the techniques we just learned!

First, create a blank canvas. I'll be making a signature in this tutorial, so I probably should have made the dimensions different (like 6x2) but alas... :P

Then, what I like to do is to use one of my chosen hex codes to make the background. I used that aquamarine color (which you're probably getting sick of by this point XD) for our edit's background. The code used was #00CED1.

Then, add some text! I chose to use the Tiki Island font, which is the official Animal Jam font used in-game and in many of AJHQ's blog posts and images.

Now, paste in that hex code we gathered earlier from that aquamarine color (or whichever color you used for the background). Of course, this isn't the color we'll end up using for the text, but this will serve as a reference--you'll see. ;)

Next, click on a point directly above your color (shown by an empty white circle on the color grid/wheel) to get a lighter color. Or, if your background was a lighter color, select a point directly below your color to get a darker color. In this case, I opted for a darker color. This will provide contrast between the background and the text, but both colors will be in the same relative family. 

Then, I'm just choosing to add a tagline using the same hex code color (#006569). However, you could easily use a different color for any tagline or extra text you'd like to add.

That was a pretty basic edit, as there were no graphics or special effects added, but hopefully it helped you grasp the basic idea of hex color codes! ^.^

Before this post ends, I have a few extra resources to share with you!

Coolors: Generates cohesive color schemes for you to use in your edits or for your blog! Super fun, and generates BEAUTIFUL colors with corresponding hex codes!

Color Hex Color Codes: Has some common hex codes for you to grab!

Get Colors From Image: Allows you to grab hex color codes from a given image.

Color Picker: Enables you to pick and choose colors from a color spectrum wheel/tool and grab the matching color code.

I hope this tutorial and corresponding resources/tools helped you! :D

Have an epic day!