Color extension

Apply custom text colors for emphasis, branding, and visual hierarchy.

Colors preserve perfectly through Word import/export, maintaining your document’s visual design across formats.

OOXML Structure

<w:r>
  <w:rPr>
    <w:color w:val="FF0000"/>
  </w:rPr>
  <w:t>Red colored text</w:t>
</w:r>

Use case

• Status indicators - Red for errors, green for success, yellow for warnings
• Document sections - Color-code different types of content
• Emphasis - Draw attention without changing font size or weight
• Brand consistency - Match company colors in documents
• Legal markup - Highlight changes, additions, deletions

Best practices

• Accessibility - Ensure sufficient contrast ratios (WCAG 2.1 AA: 4.5:1)
• Print-friendly - Test colors in both digital and printed formats
• Consistency - Use the same color for the same meaning throughout
• Restraint - Too many colors reduce effectiveness
• Fallbacks - Don’t rely solely on color to convey meaning

Options

Configure the extension behavior:

types · Array<string> · default: "['textStyle']"

Mark types to add color support to

Attributes

Node attributes that can be set and retrieved:

color · ColorValue

Text color value

Commands

setColor

Set text color

Preserves other text styling attributes

Example:

Usage

// Set to red using hex
editor.commands.setColor('#ff0000')

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // Set to red using hex
    editor.commands.setColor('#ff0000');
  },
});

Parameters:

color · ColorValue · required

Color value to apply

unsetColor

Remove text color

Removes color while preserving other text styles

Example:

Usage

editor.commands.unsetColor()

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.unsetColor();
  },
});

Types

ColorValue

Accepts hex colors (#ff0000), rgb(255,0,0), or named colors (red)

Source code