Template:Alternating colored text

Template documentation[view] [edit] [history] [purge]

This template can be used to make words show up in alternating colors of your choice. WARNING: It is strongly recommended you avoid placing this template in heavily transcluded pages, like templates.

Unlike {{AC}} with a limit of 36 characters, this template can accept text of any length. The module has been optimized with two input modes: legacy mode for individual characters (maintaining backward compatibility) and text mode for full strings (2-4x faster for long text). Text mode is automatically activated when any parameter exceeds 4 characters in length.

For short text under 36 characters, consider using {{AC}} instead. This template is more convenient for longer strings of text, but is far too expensive server-wise for signature templates, which are called potentially hundreds of times on a single page.

Usage

The template requires two colors as the first two parameters. These can be provided as positional parameters ({{{1}}} and {{{2}}}) or as named parameters (color1= and color2=). Color values can be hex codes, rgba values, or standard color names.

Text mode

Text mode is the recommended approach for longer text. It can be invoked explicitly using the text= parameter, or it will activate automatically when any parameter exceeds 4 characters in length. This mode is significantly faster for long strings and produces cleaner template syntax.

{{Alternating colored text|red|green|text=Hello World!}}

Hello World!

When any parameter is longer than 4 characters, the module automatically switches to text mode and concatenates all remaining parameters. This allows for natural usage without explicitly specifying the text= parameter.

{{Alternating colored text|red|green|Hello World!}}

Hello World!

Legacy mode

In legacy mode, each character must be provided as a separate parameter. This mode is maintained for backward compatibility with existing usage and works well for short text where the visual separation of characters is desired during editing.

{{Alternating colored text|red|green|H|e|l|l|o}}

Hello

Three-color alternation

An optional third color can be specified to create a more complex alternating pattern. The pattern follows the sequence: color1, color2, color3, color2, color1, color3, color2, color1, color3, and so on.

The third color must be specified using the c= or color3= parameter. Positional third colors are not supported to avoid ambiguity between color parameters and text content.

{{Alternating colored text|red|green|c=blue|text=Christmas}}

Christmas

Custom styling

Additional CSS styles can be applied to the entire text using the style= parameter. This allows for font size adjustments, font family changes, and other styling customizations.

{{Alternating colored text|red|green|text=Styled text|style=font-size:150%; font-weight:bold}}

Styled text

Examples

Small text

For short text, both legacy mode and text mode work equally well. Legacy mode provides visual clarity during editing by separating each character, while text mode offers cleaner syntax.

{{Alternating colored text|Orange|Blue|H|e|l|l|o| |W|o|r|l|d|!}}

produces Hello World!

The same output can be achieved more concisely with text mode:

{{Alternating colored text|Orange|Blue|text=Hello World!}}

produces Hello World!

Large text with styling

For longer text passages, text mode is strongly recommended. The following example demonstrates styling a multi-line passage with line breaks preserved using HTML <br> tags.

{{Alternating colored text|red|green|style=font-size:120%; font-family:Georgia, serif; font-weight:bold|text=
Once bitten and twice shy<br>
I keep my distance, but you still catch my eye<br>
Tell me, baby, do you recognise me?<br>
Well, it's been a year, it doesn't surprise me<br>
(Happy Christmas) I wrapped it up and sent it<br>
With a note saying, "I love you", I meant it<br>
Now I know what a fool I've been<br>
But if you kissed me now, I know you'd fool me again}}

The above code produces the following output:

Once bitten and twice shy
I keep my distance, but you still catch my eye
Tell me, baby, do you recognise me?
Well, it's been a year, it doesn't surprise me
(Happy Christmas) I wrapped it up and sent it
With a note saying, "I love you", I meant it
Now I know what a fool I've been
But if you kissed me now, I know you'd fool me again

Three colors

Using three colors creates a more visually complex pattern. The following example uses hex color codes for precise color control:

{{Alternating colored text|#FF0000|#00FF00|c=#0000FF|text=Rainbow text!}}

produces Rainbow text!

Parameters

All parameters are optional except for the two required color specifications.

• color1 (or {{{1}}}) – The first alternating color. Required. Must be used together with color2. Accepts any valid CSS color value including color names, hex codes, rgb(), rgba(), hsl(), or hsla().
• color2 (or {{{2}}}) – The second alternating color. Required. Must be used together with color1. Accepts the same color value formats as color1.
• color3 (or c) – Optional third color for more complex alternation patterns. Must be specified as a named parameter; positional third colors are not supported. Accepts the same color value formats as the other color parameters.
• text – Text content for explicit text mode. Optional; if not specified, the module will auto-detect text mode when any parameter exceeds 4 characters. Supports HTML tags and wikitext formatting.
• style – Additional CSS styling to apply to the entire colored text span. Optional. Can include any valid CSS properties such as font-size, font-family, font-weight, text-decoration, etc.

HTML tag support

Text mode preserves HTML tags and passes them through uncolored, allowing for proper formatting within colored text. The module detects HTML tags by identifying opening angle brackets (<) and their corresponding closing angle brackets (>), then outputs the entire tag without applying color styling.

Supported HTML tags include but are not limited to:

• <br> or <br /> for line breaks
• <span>...</span> for inline styling
• <b>...</b> and <strong>...</strong> for bold text
• <i>...</i> and <em>...</em> for italic text
• <u>...</u> for underlined text
• <sup>...</sup> and <sub>...</sub> for superscript and subscript

Wikitext limitations

Text mode does not support wikitext markup (links, bold, italic) as the character-by-character coloring breaks the markup syntax. Use HTML instead:

• Bold: text instead of text
• Italic: text instead of text

Literal angle brackets (< >) cannot be displayed in text mode as they are used to detect HTML tags. If you need to display mathematical expressions or code containing these characters, use legacy mode with individual parameters, or use Unicode alternatives such as ⟨ ⟩ (U+27E8, U+27E9) or ≤ ≥ for less-than/greater-than.

Note: Templates cannot be used within the text= parameter, as they are expanded by MediaWiki before the module executes.

See also

• {{AC}} – Recommended for text under 36 characters

The above documentation is transcluded from Template:Alternating colored text/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.