Color in Rich Text Markup
About Color
Before reading this page, we recommend that you read About Color for important information about the way that Multideck handles color.
Changing the Text or Background Color Using Rich Text Markup
By default, the text color of a rich text item is whatever color you chose in the Layout Editor. The same is true for the item's background color. (See Setting an Item's Text Color).You can change the text color for part or all of the item's text by using rich text markup in your content, in its field's value. When you do, the color you specify will have effect for the rest of the text of the item, or up until the next color-change markup in the text.
You can also change the item's background color. If you do, it affects the background for the entire item. Unlike text color markup, you cannot change the background color for a specific range of text. Because of this, it does not matter where in the field's value the background-color markup appears.
Color change markup looks like this:
{.c:color-spec}
Background color change markup looks like this:
{.bgc:color-spec}
There are several ways to specify a color in the color-spec portion: by name, by CMYK values, by RGB values, by grayscale values, by HTML #xxxxxx, or you can restore the item's default color.
The syntax for colors is complex, difficult to remember, and difficult to type. If you use the Content Editor, it is much simpler to just use its Text Color and Item BG Color buttons to insert color markup. If you do, you won't need the rest of this discussion.
Named Colors
You can specify some colors by name, like this:
This is {.c:green}green text!
Named colors are RGB colors, so they will look nice and bright on screen, but will be darker than you may expect when printed.
The recognized color names are:
black, blue, brown, cyan, darkGray, gray, green,
lightGray, magenta, orange, purple, red, white, yellow
As always in Multideck, case is important. "Green" and "GREEN" will not work; it must be "green".
CMYK Colors
You can specify colors by their CMYK values.
For example, this produces green
by mixing cyan and yellow ink:
This is {.c:cmyk[100,0,100,0]}green text!
The four numbers inside the square brackets are the values for the amount of cyan, magenta, yellow, and black ink to be mixed for the color. Each value can have a range from 0 (none) to 100 (max). The smaller the numbers the paler your color will be. White is [0,0,0,0], while the richest magenta is [0,100,0,0].
If you prefer to use a range of 0 to 255, use xcmyk: instead of cmyk:, like this:
This is {.c:xcmyk[255,0,100,0]}green text!
"This is {.c:cmyk[100,0,100,0]}green text!"
If you are using the Content Editor, or using a spreadsheet and exporting to CSV, don't use the quotes because the quoting will be applied automatically when you export.
If you want a specific color but don't know what its CMYK numbers should be, there's a way to find out. Open the color picker (for example, by clicking one of the color well buttons in the Effects panel). Select the "sliders" icon in the color picker panel, then select CMYK Sliders from the popup menu. Use the sliders to get the color picker to show the color you want. Then you can read the CMYK numbers for your color, which are shown as percentages in the picker. Put those numbers into your color specification and you're all set.
RGB Colors
You can specify colors by their RGB values.
For example, this produces purple
by mixing red and blue light:
This is {.c:rgb[100,0,100]}purple text!
The three numbers inside the square brackets are the values for the amount of red, green, and blue light to be mixed for the color. Each value can have a range from 0 (none) to 100 (max). The smaller the numbers, the darker your color will be. Black is [0,0,0], while the brightest red is [100,0,0].
If you prefer to use a range of 0 to 255, use xrgb: instead of rgb:, like this:
This is {.c:xrgb[255,0,255]}purple text!
Use of RGB is not recommended if you plan to print your deck, because your printer will convert your RGB color to CMYK, and the results may be darker than you expect. Best practice is to use CMYK for printing. However, if precise color matching isn't important and you are more comfortable using RGB, go right ahead.
Grayscale Colors
You can specify grayscale colors by their white value.
For example, this produces a medium gray:
This is {.c:gray[50]}gray text!
The single number inside the square brackets is the value for the amount of white. The value can have a range from 0 (black) to 100 (white).
If you prefer to use a range of 0 to 255, use xgray: instead of gray:, like this:
This is {.c:gray[127]}gray text!
Alpha: Specifying Opacity
If you use either the CYMK, RGB, or grayscale method
of specifying your color,
you can optionally add a translucent effect
by adding one more number after the color values.
This will allow any card elements underneath the text
to show through the text.
For example, the fifth number in this CMYK specification
is 30, which means that the color will be
only 30% opaque
(or 70% transparent, if you prefer to think of it that way):
This is {.c:cmyk[100,0,100,0,30]}translucent green text!
For fully opaque color, use an opacity of 100, or better yet simply omit the opacity value. As with the color component values, the maximum opacity is 100 and the minimum is 0 (but don't use 0 because it would make your text invisible).
HTML (Web) Colors
You can specify colors (without alpha translucency)
using the same hex-based syntax that is used in HTML.
For example,
This is {.c:#ff0000}bright red text!
Restoring the Default Text Color
The markup command {.c}
restores the default text color.
Examples
If the default text color is black:
This is {.c:cmyk[100,0,100,0]}green text!
==> This is green text!
If the default text color is blue:
This is blue, {.c:green}green{.c} and {.c:red}red{.c} text!
==> This is blue, green and red text!