Help:Choosing colors

A simple guide to picking colors

Although choosing colors may be a optional for song page, a nice looking page looks better than a plain looking page, correct? Picking colors may not be the easiest task especially for people that don’t have a good understanding of how colors work with each other but not to worry this is that this guide if for! To help anyone and everyone gain an understanding of how one can choose colors “smartly” rather than just by choosing “what seems to work”.

Terms
Some terms to know before starting:
 * Complementary Colors - colors that are opposite of each other on the color wheel
 * Analogous Colors - colors that are side by side on the color wheel
 * Hex color code - Standardized color codes used to specify colors across the web. They start with number sign (#) and are mixture of a total of six letters and numbers (ex. #4ebbb4)
 * Despite the letters being written in all capitals, lowercase can be used too since it doesn’t actually matter
 * Song Box - refers to the Song Box template
 * Derivative works - refers to the Derivative works template

The O’Holy HSV color wheel that should forever guide your color picking life

The Song Box will be the very first thing that most people see so leaving a good first impression is a nice plus. Don’t just simply use one color for the song box! In fact two colors can be manipulated in the Song Box, so use that to an advantage. This applies to the Derivative works as well if one wants to take the option of changing it, rather than to use the colors used in the Song Box.

Sample piece from the Song Box Teal colored part = Background color 

Black colored part = Outline color and Text color(The default outline/text color is white but for illustrative purposes it was changed to black) Example of a code in use as shown above:
 * color = #66CDAA; color: #000000;

To put it simply,
 * color = #This code controls the background color; color: #This code controls the outline/text color;

When picking colors, first and foremost; DO NOT pick complementary colors, especially for text! Complementary colors will stain people’s eyes, we are not trying to do that, people are here for for information, NOT to burn their eyes out. So pick colors that do not clash and are easy to read (the preview button to use to check your color choices). Colors that are sure to go well together are Analogous colors.

The Relevance of Colors
Picking relevant colors is a must to create a consistent theme on the page. What may be considered “relevant” differs from song to song. The main image will be important in deciding the overall theme of the page which in turn will determine what colors are relevant to use. Analogous colors will also play a huge part in determining this.

Here are a few websites that may make it easier for you to pick colors as they will generate a palette right from the picture that you can use! Colors generated right from the image will insure that the page will have a flowing, balanced theme that fits with the main image.

CSS Drive's Image to Colors Palette Generator  - By uploading or linking a picture one can easily access a palette with colors lifted off the image.

Pros

Cons
 * Clicking the color swatches will give hex code immediately
 * Selected colors can be clicked to be compared side by side in the history box
 * Automatically generates a “Light”, “Medium” and “Dark” palette
 * Colors can be rather limited
 * No selection tool if you need to select a certain color from the image
 * If you want to check another color side by side to one you’ve already clicked you’ll have to restart the process again

COLOURlovers PHOTOCOPA- A great professional looking site that is easy to use but requires sign up.

Pros Cons
 * Has a selector tool to easily pick out specific colors
 * Can zoom in and out of the image
 * This also automatically changes the “sampled colors” to colors more based on the part zoomed in at
 * Can create a palette to easy compare colors
 * Colors can be compared simply using the slots next to each other which can be easily changed
 * Automatically generates a “Bright”, “Muted”, “Analogous”, “Chance”, “Dark”, “Light” palette
 * Image can only only be linked not uploaded to obtain palette
 * Too many color options which can get confusing to pick from
 * The only way to look at the hex codes is to hover over the color at the self created palette at the bottom so no copy pasting codes unless you publish the palette

Basic Process

 * Examine the main image
 * What are the two to four main colors in the image?
 * What theme does the picture have? Light, dark, etc.?
 * Consider what main colors can be paired together (Use the color wheel!)
 * Pick the colors
 * Copy and put the hex code(s) in
 * Check work through the “preview” button
 * Additionally, codes may be experimented with in a Sandbox
 * Publish page once satisfactory theme has been obtained

Examples
Now to start with some examples (A lot of optional steps are taken in these examples that one does not have to follow! They are simply additional analyzation)



Since it has only a few major colors it will be easy to work with

Kagerou Days

- Has a Limited Palette

- Main colors: Red, Blue, White and Black

The colors in the main image have greatly contrasting colors which you should be wary of as they can clash very easily. Right away it should be noticed that Red and the Blue (or Cyan) are Complementary colors meaning that they should be NOWHERE NEAR each other.

It will result to something eyeburning like this

So, what to pair up, with what now? We know that the two other main colors are black and white which are colors that can be paired with any color and look good. So let’s think a bit and consider the scenery; the blue sky can be associated with white clouds, while the red road signs can be can be associated with blackroad. Now we have two pairs of colors to use, blue/white and red/black. Since white seems to be take up a majority of the image the blue/white can be the pair of colors used for Song Box.

What can the red/black pair be used for now? The Derivative works! Using the same colors in the Derivative works as the Song Box can be boring which is why another pair of colors can be chosen that should, of course, fit with the theme of the image.



A more complex image to work with

Cantarella

- Has a Dark Palette

- Main Colors: Blue, Green, Purple and maybe even Gold

Since Kaito is the main character of this song, a relevant color should be blue, so one of the first color choices should be a blue (note the color should not be “blue” but “a blue”). Considering his grim surroundings of purple, we can consider that to be relevantcolor so that shall be the second color choice. Now a quick check to color wheel shows that yup, Blue and Purple are Analogous colors which means they will work well together. Now that we know to use a blue and a purple, simply choose a blue and a purple from the color palette generated from the image. Compare the colors that you have chosen, colors that match most to the original image can work very well. Keep in mind the picture has a dark palette so choose colors that would fit with a “dark” theme. Keep comparing colors until you have found a satisfactory match and voila! Just put in the hex codes and enjoy the nice color theme you have created for the page.

** Note: Make sure to check if the text is readable or not, since comparing colors side by side does not always help to determine how a color looks inside another color.

Generally;
 * If a dark background is chosen - use a light outline/text
 * If a light background is chosen - use a dark outline/text.

Chosen colors were okay, however text is hard to read

A lighter blue was chosen for better text visibility

For determining what color should be used for the Derivative works, it should be noted that Cantarella has two main characters so choosing a relevant color from the those characters should be ideal. Miku is the other main character in this song and thus a green color shall be a choice to use. Other than the blue and purple which have already been used, gold seems to be a big part of the picture as well and nicely enough, green and gold (yellow) are Analogous colors as well so those can be a pair.

Howeverrr...after testing out the colors, a gold (yellow) from the ones that can be generated from the image does not create a pair that is “dark” enough to flow with the colors in the Song Box so a rethinking of colors shall have to be done.

The gold is too light

An attempt to make the gold darker did not help

Since the gold was a no go, another color shall have to be chosen. Looking at the Cantarella picture again, it can be noted that Miku’s dress (which is fairly dark and goes with the theme) takes up a fairly large portion of the picture so using a color from that might be good choice. The dress turns out to be slightly blue which works out as Blue and Green are Analogous colors. 

<p style="text-align: center;">Final choice of colors; background color was switched to the outline and a lighter green was chosen for better text visibility

The guide has now come to an end. Hopefully it was easy to understand and learn from. This is not meant to be the “only way” but simply “one interpretation” on how to go about choosing colors.

<p style="text-align: center;">Thank You For Reading