BBCode Color and Theory (Advanced)
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.
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.
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: