====== Color Text ======
[[doku>plugin:color|Color Text Plugin]]

Place this code sample in your playground:

<code>
<color green>text</color>
<color blue/lightgrey>text</color>
<color #FF0000>text</color>
<color /#FFff00>text</color>
<color rgb(80%,0%,0%)/rgb(100%,80%,100%)>text</color>
<color hsl(120,100%,30%):hsl(180,50%,90%)>text</color>
</code>

and you will see something like this:

<color green>text</color>
<color blue/lightgrey>text</color>
<color #FF0000>text</color>
<color /#FFff00>text</color>
<color rgb(80%,0%,0%)/rgb(100%,80%,100%)>text</color>
<color hsl(120,100%,30%):hsl(180,50%,90%)>text</color>

The foreground or background color specification can be any valid CSS color specification. Beware that some older browsers will not recognise all color specs in the latest CSS version.

If you use a color specification that contains a slash (''/''), you must use a colon ('':'') to separate the foreground and background color specs.

The precise syntax is as follows. Square brackets (''[]'') indicate optional parts, and should //not// be included literally:
<code>
<color [⟨fg-color⟩][/⟨bg-color⟩]>⟨text⟩</color>
<color [⟨fg-color⟩]:[⟨bg-color⟩]>⟨text⟩</color>
</code>
You //must// use the second form if either color spec includes a slash.
Note that in that case, the colon separater ('':'') is mandatory.

No valid color spec including a colon is known at this time, but if you need to use one in the future, you //must// use the first form. This plugin does not provide a way to combine these.

The result is ⟨text⟩ shown with foreground color ⟨fg-color⟩ and background color ⟨bg-color⟩. If either color is omitted or empty, the foreground or background color of the surrounding text is used.

Example – note the mandatory colon here:

<code>
<color hwb(120 20% 30% / 50%):>some faded dark green semi-transparent text</color>
</code>

Harmless restriction:
This plugin now allows any color specification not containing single or double quotes or any of the symbols ''%%< > & ; %%''. It does not try to check if the specification is valid CSS. This is to accommodate the CSS 4 color specifications, as well as any future color specifications – so long as they do not use any of the “forbidden” characters.

For a reference of usable color specifications, see
[[https://developer.mozilla.org/en-US/docs/Web/CSS/color_value|the color page]] at developer.mozilla.org.
Beware that not all color specifications work on all browsers.
See the bottom of the referenced page for more information, or
check [[https://caniuse.com/|Can I Use]] if in doubt.

  * The plugin works by wrapping contents in a %%<span>%% element with a suitable %%style%% attribute. Therefore, you cannot wrap it around block level items such as headers, lists, and tables.
  * You cannot use it //inside// headers either, since [[faq:headerlinks|you can't use wiki syntax]] within a header.
  * The use of two or more separators (slashes in the first syntax, colons in the second) within %%''<color …>''%% results in undefined behaviour.