Post by MASQUE on Nov 30, 2014 13:13:35 GMT -8
Hi there, this is Perfect Fallacy with her first every tutorial! So pardon me if it's not pretty or anything, since it's all business here.
Okay so as you can tell, I'm here today about /colours/. Now, the tutorial is in part how I, personally, pick and match colours. If you have advice of your own, or your own things to contribute, feel free to pm me, or even post it in this thread! I'll edit it to the tutorial with a credit to you of course.
Okay Let's go!
Some people just have innate color sense, and well, some of us are unable to color period. But despite all of that, there are tools that can help us. One of these tools, and my favourite, is COLOR HEX CODES. What is this site? Basically it lets you select a color, and then using the hex code find more information on it. It even works with common color names! (type in crimson to see what I mean) Although it doesn't work with all of them, it gives a good idea. What's even better, is that it has palettes too!
But anyways, just CLICK THIS. You'll see that I've selected the test colour of #810000, a nice deep red. Actually one of my favourite colours to use is dark reds, so it's no surprise right? Well this site has it all.
So how you go about picking the other colours you'd see on anything? Well if you scroll down, you get a whole bunch of lists. But first up are the tints and shades. A tint is a lighter version of that shade, a step more towards white, and a shade is the same but with black. Simple right? You can easily pick out of those to create a harmonic template, as several versions of the same shade looks good together. Although sometimes picking just one above or lower won't show much. But it's generally good for a double header of text, or a title and then a sub-title right under it. Maybe even a background and the writing on it!
Now, you don't want all of the same shade? That's okay! Scroll down a bit more, until you reach some more listings. Namely the Triadic, Analogous, Monochromatic and Complementary colours! Now, I'd probably bore you with the explanation of the terms, but simply said, everything apart from Monochromatic are colours that can be used with your shade! Now, I know you're looking at me like what, but no srsly, it just depends on the effect you want.
Triadics tend to be more situated along the colour wheel, so they tend to make your template a bit more vibrant then you'd want, and quite often clash. But some people thrive off clashing colours, so that's okay. Analogous colours are more towards the shade, and actually seem to blend a bit better with the shade, so they can be used within the template without much of an eye pop, but still more then just one colour. Complementary both pops but works, so if you want to work with just two colours, you can go for that. Monochromatic is just the shade's place in a basic paint palette of one shade.
Okay makes sense so far? Good. Right under that, you can see the color itself on both black and white backgrounds, so it gives you an idea if it's okay for the skin tone or not. Pretty neat ammi rite? Right under that are some free basic codes, so take away if you feel like it. But it's under that that's even better.
You'll see related colours, which you can find more similar shades but with a bit of a few differences, and then the most fun part of all, palettes. The palettes are user made, so they might be a bit... weird, but they could help inspire your colours (particularly for sites yeah?).
Well the tool is good for those of you that want to do it more technical. But I, for one, just simply pick colours according to my feelings, and then I try to back it up with the site. I can't really tell you my process for that other then I just look at whatever I'm doing. Like say, a character. I look at the character, and the colours they already have within their pictures and fanart. Then I try to think of the character I'm making.
Going for an eerie, dark feel? Dark reds are often my choice, because of the symbolism to the color of blood.
Trying for an innocent, but that's a mask? Dark blue, and/or off-blue (like sea foam, or teal shades) tend to be my choice.
Making a character that's just personality of ice? Cyans thank you very much, and probably some shades of blue.
It really depends on a lot of things, but if people want, I can include a chart to show you my most common associations with colours. A lot of that is based on preference and perception, so it varies.
So that's the tool. Now what about picking colours?
Generally, picking a colour depends on what you want, your preferences, etc. But that's not what you want to hear ammirite? Okay, let's run an example that you can do on your own as well.
1. Now click THIS LINK to get the page of the colour #2a34c3. That's the color we'll be using as base during this example! This is the only required part mmkay?
2. Now from there, what sort of feel do we want? Right now, I have a dark song on, so I want to make people feel unsettled. So I'll pick #10144e and #6970d5 to aid me along. But I'll also put #6d2ac3 and #2a81c3 on the back burner just in case.
3. Okay, let's use a really simple code. It's a tiny box with not a lot of colours, but hey, it works ammi rite?
[div align="center"][div style="width:300px;height:200px;background-color:#FFFFFF;color:#000000;border:2px solid #0F0F0F;font-family:arial;font-size:12px;text-align:justify;margin:2px;padding:5px;"][div style="text-align:center;color:#00000F;font-size:20px;margin-bottom:-4px;font-family:helvatica;"]A title here plz[/div]
[div style="text-align:center;color:#00000F;font-size:15px;margin-top:-2px;font-family:verdana;"]sub-title yes[/div]
And filler text okay
4. Okay so we got our tiny box, and well now we're gonna colour code it! Now, since I want to give a darker feel, I'll probably make the darker colours more prominent, changing the #FFFFFF background to the #10144e shade. And this is what our box looks like.
5. Yikes! We can't see the text and it kinda hurts to try doesn't it? No worries! That's why we picked the #6970d5 tint to replace the #000000 text colour! So our box now looks like this.
6. Much better right? Well now I can see you asking 'BUT WE HAVEN'T USED OUR LIKE, COLOUR WE PICKED.' And yeah, that will happen. The colour you wanted turns out not to be the colour you were going to use as a main thing. But here, this is where I would use it. You see those borders? Nice and black, but they kinda make me sad since they don't clearly define the box. So let's change that #0F0F0F border to our titular #2a34c3 colour! And that's how the box now looks like this:
7. Ah look at those colours. It seems to work out well doesn't it? But the titles! They're still hard to read and hard to see. So we'll have to fix them, right? Now here's where you can easily diversify a lot. I could use either #6970d5 or #2a34c3 again, and keep the template within the same colour lines. Or, if I'm tired of the same three shades of purple, I can always just #6d2ac3 or #2a81c3. I wouldn't suggest a combination personally, but go head if you want to try! So, I'll do a couple of examples, here are some lovely boxes! Remember, this is to replace the #00000F colours!
And there you go! See how with just five colours, you can have so many variations in just one code? And all of it looks relatively good, and the colours are aesthetically matched in a lot of ways. Now it's just up to you how you mix and match everything. But literally, the colour maker's best friend is testing. And a lot of it. Just don't be afraid to test your colours before you post them up for good!
Okay I think I blabbed long enough lol, Fallacy out!