About

Applying individual colors to each character in a string is a non-trivial formatting task. A naive approach assigns random hues, producing visual noise. This tool distributes colors algorithmically: rainbow mode maps the HSL color wheel across the character count using h = i × 360 ÷ n, gradient mode performs linear RGB interpolation between two endpoints, and custom mode distributes up to 8 color stops with smooth transitions. Each character receives an inline color property via <span> wrapping. The output is valid HTML suitable for embedding in websites, emails, or social media bios. Note: exported PNG renders at 2× resolution for retina displays but cannot preserve text selectability. For accessibility-critical contexts, colored text alone should not convey meaning per WCAG 1.4.1.

Formulas

Rainbow mode distributes hues evenly across the HSL color wheel for each visible character at index i out of n total visible characters:

h_i = i × 360n

Gradient mode interpolates linearly between two RGB color endpoints. For each channel c ∈ {R, G, B}:

c_i = c_start + (c_end − c_start) × in − 1

Where h_i is the hue in degrees at position i, n is total visible character count (whitespace excluded from coloring but preserved in output), c_start and c_end are the RGB channel values of the gradient endpoints. Multi-stop custom gradients use piecewise linear interpolation between adjacent stops, with each segment length proportional to 1k − 1 where k is the number of color stops.

Reference Data

Color Mode	Algorithm	Best For	Color Count	Customizable
Rainbow	HSL wheel distribution	Headings, social media	Continuous spectrum	Saturation, Lightness
Gradient (2-color)	Linear RGB interpolation	Brand text, subtle styling	2 endpoints	Start & end colors
Custom Stops	Multi-stop interpolation	Complex palettes	2-8 stops	Each stop color
Random Pastel	Curated palette cycling	Playful, casual text	12 preset hues	Palette selection
Monochrome Shades	Lightness variation	Elegant, minimal	1 base hue	Base color
Warm Spectrum	HSL range 0° - 60°	Autumn, fire themes	Warm subset	Saturation
Cool Spectrum	HSL range 180° - 270°	Ocean, winter themes	Cool subset	Saturation
Neon	High saturation HSL	Dark backgrounds	Continuous	Lightness
Pastel	Low saturation, high lightness	Soft, gentle aesthetics	Continuous	Hue range
Flag Stripes	Block color assignment	National flags, pride	3-7 blocks	Block colors
Alternating	2-color toggle per char	Retro, bold contrast	2 colors	Both colors
Wave	Sinusoidal HSL modulation	Animated effects	Continuous	Frequency, amplitude

Frequently Asked Questions

Whitespace characters (spaces, tabs, newlines) are preserved in the output but excluded from the color index calculation. Only visible characters receive color assignments. This prevents "wasted" hues on invisible characters and ensures the full 360° spectrum is distributed across characters the user can actually see.

Yes. The export uses inline styles on individual elements with the "color" CSS property, which has near-universal email client support including Gmail, Outlook, and Apple Mail. The tool avoids CSS classes, external stylesheets, and modern properties that email clients strip. However, some clients may collapse adjacent elements - the generated markup accounts for this by including explicit whitespace nodes.

Gradient smoothness depends on character count. With only 5 characters between two colors, you get 5 discrete steps. For smoother transitions, use longer text. The interpolation is linear in RGB space; perceptually uniform gradients would require OKLAB or CIELAB interpolation, which this tool approximates but does not fully implement. For critical color work, export the hex values and verify in a design tool.

Yes. The "Copy CSS" export generates a set of CSS rules using nth-child selectors targeting each by position. Wrap your text in a container, place each character in a , and apply the generated stylesheet. This approach is cleaner for websites but unsuitable for email or platforms that strip

The tool caps input at 5,000 characters. Real-time preview remains smooth up to approximately 2,000 characters on mid-range mobile devices. Beyond that, the DOM node count (one per character) can cause layout reflow delays. The PNG export via Canvas handles up to 5,000 characters without issue since it renders to a bitmap rather than maintaining live DOM nodes.

Animation is preview-only. Exported HTML includes static inline colors at the frame visible at export time. Exported PNG captures the current animation frame. To create animated colored text for a website, use the "Copy CSS Animation" option which generates @keyframes rules cycling hue rotation on each character with staggered delays.