Multicoloured text in HTML

Quick, practical context: the example from @1o0oBhP shows the old inline approach to colouring text. That method will still render in many legacy browsers, but the font element is obsolete in HTML5 and mixes presentation with content. Modern practice is to use CSS for colors and effects — it improves maintainability, theming, and accessibility. @Dani's note about snippet formatting is relevant when sharing examples, and @anastacia's point about named colours is correct but limited in precision compared with modern CSS color models.

A minimal, modern pattern uses CSS custom properties and classes for predictable results and easy theme swapping. Example:

:root {
  --accent: hsl(210, 90%, 56%);
  --accent-alt: hsl(330, 70%, 50%);
  --fallback: #222222;
}

.colored { color: var(--accent); }

.grad {
  color: var(--fallback);                     /* sensible fallback */
  background: linear-gradient(90deg,var(--accent),var(--accent-alt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;       /* WebKit */
  background-clip: text;                      /* modern browsers */
}

Use these classes on inline elements such as span or on headings. Keep class usage consistent instead of sprinkling inline styles.

Important practical notes: preserve sufficient contrast (WCAG targets: 4.5:1 for normal text, 3:1 for large text), and never rely on color alone to convey meaning. For decorative headings, gradient text and clipping are fine but include a solid-color fallback for older browsers and email clients. When dealing with legacy content that still uses font tags, plan a progressive migration to CSS classes (batch replace or template updates) so styling can be centrally managed and accessibility checks applied consistently.