---
title: "Color extension"
description: "Add text color support to your Tiptap editor with the Color extension. Learn more in our documentation."
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/color"
---

# Color extension

Add text color support to your Tiptap editor with the Color extension. Learn more in our documentation.

This extension enables you to set the font color in the editor. It uses the [`TextStyle`](https://tiptap.dev/docs/editor/extensions/marks/text-style.md) mark, which renders a `<span>` tag (and only that). The font color is applied as inline style then, for example `<span style="color: #958DF1">`.

> **Interactive demo:** [Color](https://embed.tiptap.dev/preview/Extensions/Color)

## Install

```bash
npm install @tiptap/extension-text-style
```

This extension requires the [`TextStyle`](https://tiptap.dev/docs/editor/extensions/marks/text-style.md) mark.

```ts
import { Editor } from '@tiptap/core'
import { TextStyle, Color } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyle, Color],
})
```

This extension is installed by default with the `TextStyleKit` extension, so you don’t need to install it separately.

```ts
import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyleKit],
})
```

## Settings

### types

A list of marks to which the color attribute should be applied to.

Default: `['textStyle']`

```js
Color.configure({
  types: ['textStyle'],
})
```

## Commands

### setColor()

Applies the given font color as inline style.

```js
editor.commands.setColor('#ff0000')
```

### unsetColor()

Removes any font color.

```js
editor.commands.unsetColor()
```

## Source code

[packages/extension-text-style/src/color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/src/color/)

## Minimal Install

```js
import { Editor } from '@tiptap/core'
import { Color } from '@tiptap/extension-text-style/color'

new Editor({
  extensions: [Color],
})
```