About

Applying color to individual symbols in a block of text requires precise mapping of a color function f(i) to each character index i across a total of n glyphs. Get the distribution wrong and the result looks like noise rather than a coherent gradient or pattern. This tool computes hue assignments using HSL color space rotation, linear RGB interpolation for two-color gradients, and cyclic palette indexing for custom schemes. It operates on three granularity levels: per-character, per-word, and per-line.

Output is standard inline HTML with style attributes, compatible with any rich-text editor, email client, or CMS that accepts pasted formatted text. For platforms that strip HTML, the PNG export rasterizes the colored text onto a transparent canvas. Note: results depend on the rendering engine of the destination platform. Some chat apps will discard inline styles on paste.

Formulas

The primary color assignment for rainbow mode uses HSL color space rotation across the total number of tokens:

H_i = 360 × in

Where H_i is the hue in degrees for token at index i, and n is the total number of tokens. Saturation S and Lightness L remain constant (defaults: S = 80%, L = 55%).

For two-color gradient mode, each RGB channel is linearly interpolated:

C_i = C_start + in − 1 × (C_end − C_start)

Where C_start and C_end are the RGB triplets of the two chosen colors. This is applied independently to each channel (R, G, B).

For cyclic palette mode with k colors in the palette array:

color_i = palette[i mod k]

Reference Data

Color Mode	Algorithm	Best For	Parameters
Rainbow	HSL hue rotation: H = 360 × i ÷ n	Full-spectrum colorful text	Saturation, Lightness
Gradient (2-color)	Linear RGB lerp: C = C₁ + t(C₂ − C₁)	Smooth fade between two colors	Start color, End color
Custom Palette	Cyclic index: C = palette[i mod k]	Brand colors, themed patterns	Array of k colors
Random	Pseudo-random HSL with constrained S/L	Playful, chaotic styling	Min/Max lightness
Alternating	Binary toggle: i mod 2	Two-tone highlighting	Color A, Color B
Warm Spectrum	Hue range 0° - 60°	Red-orange-yellow themes	Saturation, Lightness
Cool Spectrum	Hue range 180° - 270°	Blue-cyan-purple themes	Saturation, Lightness
Neon	High saturation (100%), mid lightness (50%)	Vibrant, attention-grabbing	Hue rotation speed
Pastel	Low saturation (60%), high lightness (80%)	Soft, elegant text	Hue rotation speed
Monochrome Fade	Single hue, varying lightness 30 - 80%	Depth effect within one color	Base hue
Per-Word	Same algorithms applied at word boundaries	Readable multi-color text	Any color mode above
Per-Line	Same algorithms applied at line boundaries	Paragraph-level coloring	Any color mode above

Frequently Asked Questions

Email clients and word processors have their own CSS sanitizers. Gmail strips most inline styles but preserves basic color attributes. Microsoft Word may remap colors to its own palette. The tool outputs standard inline CSS color on each element, which provides maximum compatibility. If colors are stripped, use the PNG export instead.

With n = 3 tokens, the hue values are 0°, 120°, and 240° - which maps to red, green, and blue. For richer rainbow effects, text should contain at least 10-15 characters. The algorithm always distributes hues evenly across 360° regardless of token count.

Per-character assigns a unique color to every glyph including spaces (spaces remain invisible but count in the index). Per-word treats each whitespace-delimited token as a single unit, so all characters in one word share the same color. Per-word is generally more readable while per-character creates denser visual effects.

Twitter and Instagram strip HTML formatting entirely - they only accept plain text or Unicode. For these platforms, use the PNG export feature which rasterizes the colored text as an image. Alternatively, some Unicode color block characters exist but they are not true colored text.

Linear RGB interpolation between complementary colors (e.g., red to cyan) passes through grey at the midpoint. This is a known limitation of RGB lerp. For cleaner gradients, choose colors that are closer on the hue wheel (within 120° of each other). The HSL rainbow mode avoids this entirely by rotating hue while keeping saturation and lightness fixed.

The tool treats every character equally regardless of encoding. Emojis, CJK characters, Arabic script, and Cyrillic all receive color assignments. However, some emojis are multi-codepoint sequences (flags, skin-tone modifiers). The tool splits by visible character using Array.from() which handles surrogate pairs correctly, but compound emojis may split unexpectedly.