---
title: "Add custom color presets in JavaScript PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/color-picker/custom-presets/"
md_url: "https://www.nutrient.io/guides/web/user-interface/color-picker/custom-presets.md"
last_updated: "2026-05-30T02:20:01.425Z"
description: "By default, Nutrient Web SDK ships with an array of 18 colors, and it comes with a customizable color dropdown."
---

# Adding custom color presets to color dropdowns in viewer

By default, Nutrient Web SDK ships with an array of 18 colors, and it comes with a customizable color dropdown.

With our [`NutrientViewer.Configuration#annotationToolbarColorPresets`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.annotationToolbarColorPresets) API, you can remove any of the built-in colors, or you can replace them completely.

Here’s an example of how to remove the last color in the array from our built-in colors in all color dropdowns:

```js

NutrientViewer.load({
  annotationToolbarColorPresets: ({
    defaultAnnotationToolbarColorPresets
  }) => {
    const customColorPresets = defaultAnnotationToolbarColorPresets.slice(
      0,
      -1
    );
    return { presets: customColorPresets };
  }
  //...
});

```

We also offer fine-grained control over each of the dropdowns associated with a different annotation color property.

Our built-in color properties are:

- `'color'`

- `'stroke-color'`

- `'fill-color'`

- `'background-color'`

- `'font-color'`

- `'outline-color'`

Here’s an example of fine-grained customization of the dropdown:

```js

NutrientViewer.load({
  annotationToolbarColorPresets: ({
    propertyName,
    defaultAnnotationToolbarColorPresets
  }) => {
    if (propertyName === "font-color") {
      const customColorPresets = defaultAnnotationToolbarColorPresets.slice(
        0,
        -1
      );
      return { presets: customColorPresets };
    }

    if (propertyName === "stroke-color") {
      return {
        presets: [
          {
            color: new NutrientViewer.Color({ r: 0, g: 0, b: 0 }),
            localization: {
              id: "brightRed",
              defaultMessage: "Bright Red"
            }
          },
          {
            color: new NutrientViewer.Color({ r: 100, g: 100, b: 180 }),
            localization: {
              id: "deepBlue",
              defaultMessage: "deepBlue"
            }
          }
        ],
        showColorPicker: false
      };
    }
  }
  //...
});

```

If `propertyName` is set to a string that we don’t support — in other words, if it doesn’t match one of the strings of our built-in color properties — an error will be thrown when initializing Nutrient.
---

## Related pages

- [Custom color picker for color dropdowns in viewer](/guides/web/user-interface/color-picker/custom-color-picker.md)