---
title: "Color Picker Widget"
description: "The Jodit color picker widget that lets users choose a color from a palette, often combined with the tabs widget for text and background colors."
metadata:
  - name: keywords
    content: "jodit, color picker, colorpicker widget, palette, color selection, widget"
---
# Color Picker widgets

Color picker widget is a simple widget that allows you to select a color from the palette.

```javascript
const editor = Jodit.make('#editor');
const tabs = Jodit.modules.TabsWidget(editor, {
  Text: Jodit.modules.ColorPickerWidget(
    editor,
    color => {
      alert(color);
    },
    '#fff'
  ),
  Background: Jodit.modules.ColorPickerWidget(
    editor,
    color => {
      alert(color);
    },
    '#eee'
  )
});
```


### ColorPickerWidget()

**ColorPickerWidget**(`editor`, `callback`, `coldColor`): [`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)

Defined in: [src/modules/widget/color-picker/color-picker.ts:49](https://github.com/xdan/jodit/blob/main/src/modules/widget/color-picker/color-picker.ts#L49)

Build color picker

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `editor` | [`IJodit`](../interfaces/types.IJodit.html) | - |
| `callback` | (`newColor`) => `void` | Callback 'function (color) {}' |
| `coldColor` | `string` | Color value ex. #fff or rgb(123, 123, 123) or rgba(123, 123, 123, 1) |

#### Returns

[`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)

#### Example

```javascript
const tabs = TabsWidget(editor, {
   'Text': ColorPickerWidget(editor, function (color) {
        box.style.color = color;
    }, box.style.color),
    'Background': ColorPickerWidget(editor, function (color) {
        box.style.backgroundColor = color;
    }, box.style.backgroundColor),
});
```