BBCode Color and Theory (Advanced)

From ChickenWiki
Jump to: navigation, search

Color is always a lovely way to make your posts stand out. Flashy colors can catch the eye, while well placed accents can draw attention to information that is important. Or, furthermore, color can be used to the purpose of creating particular aesthetic in signatures, or even everyday posts. It is an essential skill for any coding project.

The topics covered in this article will reply heavily on a basic understanding of BBCode. If you aren't sure how to use all the basic commands on Chicken Smoothie, or at any point you find something confusing, please check out the first guide in this series, which will help give you a solid foundation needed for these more advanced features.

Bbcodebutton.png

Deciphering Hex Codes

Hex codes, also known more formally as hexadecimal codes, are the strings of numbers and letters following the "color" command. These codes store information to communicate to the device how the color should be displayed. Unlike our traditional 10 digit number system, called decimal, hexadecimal contains 16 digits. These include the familiar values 0-9, and the remaining 6 places are filled with the letters A-F, representing the numbers 10-15. The capitalization of the letters is irrelevant; the same results come from upper, lower, and mixed case letters.

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

When setting the color in BBCode or HTML, the hexadecimal string is preceded by a pound sign (#). This is to distinguish random strings of text or numbers from the pieces of your code which you actually want formatted with color.

Making Color

Primary Colors

In the digital world, there are 256 possible shades of each primary color (red, green, and blue). This is because each color is represented by two hexadecimal values, each with 16 different possible outcomes. That means in total there are 256 possible combinations for each hex.

Another system of communicating color, common in digital media, is called RGB. RGB is a way of displaying how many parts or red, green, and blue should be displayed on a scale of 0 to 255 (making for 256 possible colors). Hex codes take a similar format to RGB. The first two places are combined to make a value of red, the second two create the green, and the final two set the blue value.

#AAAAAA

Lower values are darker, while the higher values (including the letter stand-ins) are light. For this reason, #000000 is black. It is completely absent of color. Conversely #FFFFFF is white, as each slot is at its maximum value.

#000000 #888888 #FFFFFF
#220000 #880000 #FF0000
#002200 #008800 #00FF00
#000022 #000088 #0000FF

Any mix with equal amounts of all three colors will result in a grey tone. This is due to the fact that combining all the primary colors causes them to cancel each other out, leaving only the tone behind to be displayed. By only picking values in one color's range, a pure version of that color is generated. Lower values are dark, while higher values are more vibrant.

When choosing colors for your posts, it is generally recommended to pick tones in the middle of the spectrum. Vibrant colors can hurt people's eyes if used excessively, and very dark colors can be hard to differentiate from the standard black text.

Hues

Two of the primary colors can be combined to form secondary and tertiary color, or any other hue of color. It's important to note that it's the use of two additive primary colors which creates pure color - a third value will desaturate the color, making it appear more grey.

Red Red + Green

Yellow

Green Green + Blue

Cyan

Blue Bule + Red

Violet

#FF0000 #FFFF00 #00FF00 #00FFFF #00000FF #FF00FF

By creating an imbalance between the two colors, more variations of colors can be created. In fact, all saturated colors are formed with a combination of two primaries, with different ratios. If it helps, picture each as a can of paint; if you mix more of one color than the other, it will be more dominant in the resulting hue. Since lower values will still create darker colors, the value determines how much black was mixed into the paint. By changing the ratios around, you can create a vast array of colors.

#FF0000 #FF8800 #FFFF00 #88FF00 #00FF00 #880000 #884400 #888800 #448800 #008800
#00FF00 #00FF88 #00FFFF #0088FF #0000FF #008800 #008844 #008888 #004488 #000088
#0000FF #8800FF #FF00FF #FF0088 #FF0000 #000088 #440088 #880088 #880044 #880000
Vibrant Dark

Tones

Tones, much like hues, create colors between the three additive primary colors. The difference is that tones are less saturated, meaning their colors are more dull, greatly influenced by varying degrees of grey. This effect is formed by assigning a value to each color.

The reason for this outcome is a bit complicated. In short, the two smaller values create a value opposite the largest primary. The two inverted colors cancel each other out, mixing in a grey color into the result instead.

If all three values are equal in the hex code, a pure grey color will be generated. If all three values are different, then the tone will be based on a hue (created by the two largest values) instead of a primary color. A desaturated version of the primary colors can be formed by setting both the other primaries to the same value (bellow the primary you wish to be dominant).

The lowest value decides how dark the color will appear; the lower the value, the darker the color.

#000000 #444444 #888888 #CCCCCC #FFFFFF
#440000 #884444 #CC8888 #FFCCCC #FFEEEE #442200 #886644 #CCAA88 #FFEECC #FFFFEE
#224400 #668844 #AACC88 #EEFFCC #FFFFEE
#004400 #448844 #88CC88 #CCFFCC #EEFFEE #004422 #448866 #88CCAA #CCFFEE #EEFFFF
#002244 #446688 #88AACC #CCEEFF #EEFFFF
#000044 #444488 #8888CC #CCCCFF #EEEEFF #220044 #664488 #AA88CC #EECCFF #FFEEFF
#220044 #664488 #AA88CC #EECCFF #FFEEFF

Named Colors

In BBCode, there are a few colors which have names, in addition to their hex code. For example, both methods of setting a color are equally valid (note that in practice the space after the color but before the square bracket must be removed):
[color=red ] text [/color] [color=#FF0000 ]text[/color]

The names which are able to be used as color are as follows:

Alicewhite #F0F8FF Antiquewhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC
Bisque #FFE4C4 Blanchedalmond #FFEBCD Blue #0000FF Blueviolet #8A2BE2 Brown #A52A2A Burlywood #DEB887
Cadetblue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 Cornflowerblue #6495ED Cornsilk #FFF8DC
Crimson #DC143C Cyan #00FFFF Darkblue #00008B Darkcyan #008B8B Darkgoldenrod #B8860B Darkgray #A9A9A9
Darkgreen #006400 Darkkhaki #BDB76B Darkmagenta #8B008B Darkolivegreen #556B2F Darkorange #FF8C00 Darkorchid #9932CC
Darkred #8B0000 Darksalmon #E9967A Darkseagreen #8FBC8F Darkslateblue #483D8B Darkslategray #2F4F4F Darkturquoise #00CED1
Darkviolet #9400D3 Deeppink #FF1493 Deepskyblue #00BFFF Dimgray #696969 Dodgerblue #1E90FF Firebrick #B22222
Floralwhite #FFFAF0 Forestgreen #228B22 Fuchsia #FF00FF Gainsboro #DCDCDC Ghostwhite #F8F8FF Gold #FFD700
Goldenrod #DAA520 Gray #808080 Green #008000 Greenyellow #ADFF2F Honeydew #F0FFF0 Hotpink #FF69B4
Indianred #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA Lavenderblush #FFF0F5
Lawngreen #7CFC00 Lemonchiffon #FFFACD Lightblue #ADD8E6 Lightcoral #F08080 Lightcyan #E0FFFF Lightgoldenrodyellow #FAFAD2
Lightgreen #90EE90 Lightgrey #D3D3D3 Lightpink #FFB6C1 Lightsalmon #FFA07A Lightseagreen #20B2AA Lightskyblue #87CEFA
Lightslategray #778899 Lightsteelblue #B0C4DE Linen #FAF0E6 Magenta #FF00FF Maroon #800000 Mediumaquamarine #66CDAA
Mediumblue #0000CD Mediumorchid #BA55D3 Mediumpurple #9370D8 Mediumseagreen #3CB371 Mediumslateblue #7B68EE Mediumspringgreen #00FA9A
Mediumturquoise #48D1CC Mediumvioletred #C71585 Midnightblue #191970 Mintcream #F5FFFA Mistyrose #FFE4E1 Moccasin #FFE4B5
Navajowhite #FFDEAD Navy #000080 Oldlace #FDF5E6 Olive #808000 Olivedrab #688E23 Orange #FFA500
Orangered #FF4500 Orchid #DA70D6 Palegoldenrod #EEE8AA Palegreen #98FB98 Paleturquoise #AFEEEE Palevioletred #D87093
Papayawhip #FFEFD5 Peachpuff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD Powderblue #B0E0E6
Purple #800080 Red #FF0000 Rosybrown #BC8F8F Royalblue #4169E1 Saddlebrown #8B4513 Salmon #FA8072
Sandybrown #F4A460 Seagreen #2E8B57 Seashell #FFF5EE Sienna #A0522D Silver #C0C0C0 Skyblue #87CEEB
Slateblue #6A5ACD Slategray #708090 Snow #FFFAFA Springgreen #00FF7F Steelblue #4682B4 Tan #D2B48C
Teal #008080 Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0 Violet #EE82EE Wheat #F5DEB3
White #FFFFFF Whitesmoke #F5F5F5 Yellow #FFFF00 Yellowgreen #9ACD32

Transparency

The word "transparent" can also be used to toggle the color. Or rather, it can toggle the visibility of text. Indeed, by setting the color equal to transparent, the text disappears entirely. It can still be highlighted and copied by other users who view your post. However, since it's not mainly visible, it makes for an excellent placeholder for spacing elements of you posts.

Using Color Effectively

Color is a great way to spruce up your posts, but using too much can be distracting. Color can make information easier to sort through, but if used incorrectly your post can become hard to read. That may cause users to skip over it, so it is important to think carefully about the color you are using before posting.

Color is best used in posts by accenting headers, important information, or notes. Headers are a great place to use bright, vibrant colors. While long passages of text can be hard to read when they're written in bright colors, short accents like headers can really benefit from the flash of color. Short pieces are not very taxing to read, making this more acceptable than the main body of text. Headings are also often enlarged or bolded to further strengthen their presence.

In the case of notes or captions, it looks nice to use a slightly lighter text, or one which is more desaturated. Be careful with this, as you do not want the text to be so light that it blends with the background. However, since the information most likely doesn't have as much importance are your headings or body, the lighter text can help subconsciously tell users what to pay attention to.

If you decide to use multiple colors on your post, it is important to make sure your colors work well together. This make take some trial and error, so make sure to preview your code. Finding the right color scheme is an art, so explore! Try new things! Figure out the look that's right for you, but always to remember your readers' comfort too.

Things to Avoid

Generally yellow is not a very user-friendly color, and it should be used with caution with any design at all. Text that matches the background color of your post should generally be avoided. If you wish to hide a bit of text, or use it as a placeholder, check the transparent section of this guide. You should never use unpleasant post design to try and draw attention to your posts on popular threads. This can be very irritating for people trying to browse the thread, and it isn't actually going to help your post get more attention. Adding color should only ever be an attempt to improve appearances.

Neat Tools and Tips

  • Selecting Hex Codes Sometimes it's hard to make the perfect color on your own - it would be easier for some people to pick the hex from a color palette. Luckily there are some tools to help with that:
  • Gradient Text There are some neat sites that can be used to automatically generate gradients. These sites can be a big help, as they create awesome smooth gradients with ease! Gradients are a good way to accent headers, or accent signatures, but could be distracting for the main body of your text. Here are some various tools for creating easy gradient: