FANDOM


If you are logged in, you can access your personal sandbox.
i This subject is a policy.

Indexes: Wiki policesPage Creation (Index) • Manual of StylePage GuideImage GuideProtected PagePrivacy PolicyGeneral disclaimerCopyrights  • Discord Policy


Standard guidelines: Producer guidelineSeries guidelineEvent guidelineSong guidelineAlbum guidelineExamples of usage guidelineReputation guidelineProduct guidelineNotable song guidelineSong lists guidelineVoice provider guidelineOfficial illustrator guideline‎Disambiguation guideline


Music templates: Producer table templatesSeries boxEvent boxSong box 2Album boxEvent templateLyric coloring templateLyric sharing templateDerivative templateTrack listingNotable templateLinkage templateSongID template


General templates: Infobox templatesMusic featuring templateReputation templatePoll templatesSoftware navbarProduct information template


Site maintenance: About templatesPreload templatesNotify templatesTranslation notice templateInterwiki templatesRedirect template  • Create articlesWork in Progress category  • Vcolor templateVlogo templateChoosing colorsVideo and audio hosting servicesSandbox user headerMore subjects categorized here

i

This is a guideline policy for pages featured on the VOCALOID Wiki. While participation is encouraged it is requested that you first understand and follow these guidelines or refrain from editing.

Colorwheelclear

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

The basicsEdit

TermsEdit

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 sometimes 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

Default colorsEdit

These colors are seen as defaults for various templates around the wiki. They also act as an indicator in cases of coding mishaps.

Introducing the default color.

Introducing the other default color.

InputsEdit

This is example of what you may see upon editing a template parameter:

|color =
#70bebf; color: #000000;

To put it simply,

|color =
#This code controls the background;  color: #This code controls the outline/text;

Tips to considerEdit

Do's and don'tsEdit

When picking colors, first and foremost; DO NOT pick complementary colors, especially for text! Complementary colors will strain the readers eyes, 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 colorsEdit

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

  • 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

Cons

  • 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

Colormind's Image Color Extraction - By uploading or linking a picture one can easily access a palette with colors lifted off the image.
Pros

  • Based on artificial intelligence, it will choose colors that looks well in a color palette rather than colors that's more representeative
  • The hex code is already featured below the color swatches

Cons

  • Colors can be rather limited
  • No selection tool if you need to select a certain color from the image

ExamplesEdit

Processing choicesEdit

  • 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


Limited paletteEdit

Hibiya Amamiya Heat-Haze Days

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

カゲロウデイズ (Kagerou Daze)

  • 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.
  • No!

カゲロウデイズ (Kagerou Daze)

  • Yes~!

カゲロウデイズ (Kagerou Daze)

  • Preferably not, but is acceptable.

カゲロウデイズ (Kagerou Daze)

The reasons being the Song_box and Derivative templates have a surrounding border, if the text is pure white then it makes this border harder to see. So consider a darker shade of white.

Complex paletteEdit

黒うさP - カンタレラ

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 relevant color so that shall be the second color choice. Hatsune 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.
  • No!

カンタレラ (Cantarella)

  • Yes~!

カンタレラ (Cantarella)

  • Preferably not, but is acceptable.

カンタレラ (Cantarella)

The reasons being the Song_box and Derivative templates have relatively small text with a bold outline, if the text as dark as the surrounding colors then it makes it harder to see. So consider a lighter shade of color.

Basically:

  • If a dark background is chosen - use a light outline/text
  • If a light background is chosen - use a dark outline/text.


Credits to user Sen for this tutorial.

Community content is available under CC-BY-SA unless otherwise noted.