Introduction

Using multiple font colors in a single label means styling only part of the text instead of the whole string uniformly. The exact technique depends on the UI technology: HTML uses nested elements, while native platforms often use attributed or rich-text APIs.

The key design question is not just "how do I color part of the text" but also whether the result stays readable, accessible, and semantically clear.

HTML and CSS: Use span Elements

On the web, the normal approach is to wrap each differently styled fragment in a span.

<label>
  Status: <span class="ok">Healthy</span>
</label>

Then style the fragment:

1.ok {
2  color: #198754;
3  font-weight: 600;
4}

This keeps the label as one logical piece of text while letting you style parts independently.

Multiple Colored Segments

You can split the string into as many pieces as needed.

1<label>
2  Balance: <span class="amount">$125.00</span>
3  <span class="warning">overdue</span>
4</label>

1.amount {
2  color: #0a84ff;
3}
4
5.warning {
6  color: #d32f2f;
7}

This is a clean way to emphasize values, states, or warnings without breaking the text into separate controls.

UIKit: Use NSAttributedString

In native iOS development, a UILabel cannot assign multiple colors through its plain text property. You use an attributed string instead.

1import UIKit
2
3let label = UILabel()
4let text = NSMutableAttributedString(string: "Status: Healthy")
5text.addAttribute(.foregroundColor, value: UIColor.systemGreen, range: NSRange(location: 8, length: 7))
6label.attributedText = text

That gives one substring its own color while the rest of the label keeps the default styling.

Android: Use SpannableString

On Android, the equivalent idea is a SpannableString.

1import android.graphics.Color
2import android.text.SpannableString
3import android.text.Spanned
4import android.text.style.ForegroundColorSpan
5
6val text = SpannableString("Status: Healthy")
7text.setSpan(
8    ForegroundColorSpan(Color.parseColor("#2E7D32")),
9    8,
10    15,
11    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
12)
13
14textView.text = text

This is the usual approach when only part of the label needs emphasis.

Keep Accessibility in Mind

Multiple colors should support the meaning, not carry the meaning alone. For example, if the red text indicates an error, the words should also explicitly say something is wrong.

Good:

Status: Failed

with the word Failed in red.

Weaker:

Status: Active

where only the color change suggests that something is different.

Color-only communication can fail for users with color-vision deficiencies or low-contrast displays.

Design Restraint Matters

Using multiple colors inside one label can improve scannability, but overuse turns the interface noisy. Usually it works best when only one fragment needs emphasis, such as:

• status words
• prices or totals
• warnings
• changed values

If every fragment is a different color, the label stops being easier to read.

Prefer Rich Text APIs Over Manual Layout Tricks

Sometimes developers try to fake multi-color text by stacking several labels side by side. That can work for simple layouts, but it becomes fragile when text wraps, localizes, or changes dynamically. Rich-text or attributed-text support is usually the better long-term solution because the content remains one logical label.

Common Pitfalls

• Trying to use one plain label property when the platform requires rich-text or attributed-text support.
• Splitting the text into too many styled fragments and making the UI visually noisy.
• Using color alone to communicate meaning.
• Choosing colors with poor contrast against the background.
• Forgetting that native and web platforms use different APIs for partial text styling.

Summary

• On the web, use nested span elements with CSS.
• In iOS, use NSAttributedString for substring styling.
• In Android, use SpannableString and color spans.
• Multi-color labels work best when only a small, meaningful part of the text is emphasized.
• Keep accessibility and contrast in mind so the label remains readable and understandable.