---
title: "Custom color picker in JavaScript PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/color-picker/custom-color-picker/"
md_url: "https://www.nutrient.io/guides/web/user-interface/color-picker/custom-color-picker.md"
last_updated: "2026-06-18T07:25:36.596Z"
description: "Nutrient Web SDK comes with a custom color picker UI. The custom color picker allows end users to select “new” colors to add to the color dropdown."
---

# Custom color picker for color dropdowns in viewer

Nutrient Web SDK comes with a custom color picker UI. The custom color picker allows end users to select “new” colors to add to the color dropdown. Each [type of dropdown](https://www.nutrient.io/api/web/types/AnnotationToolbarItemsCallback.html) can have a specific end user-picked customizable color pallet.

By default, we render the custom color picker in each color dropdown.

You can use the [`configuration#annotationToolbarColorPresets`](https://www.nutrient.io/api/web/interfaces/Configuration.html#annotationtoolbarcolorpresets) API to hide the custom color picker.

Here's an example of how to remove the custom color picker from all color dropdowns:

```js

NutrientViewer.load({
  annotationToolbarColorPresets: ({
    defaultAnnotationToolbarColorPresets
  }) => ({
    presets: defaultAnnotationToolbarColorPresets,
    showColorPicker: false
  })
  //...
});

```

## Stored in local storage

By default, the colors picked using the custom color picker will be stored across sessions on the same browser. Since the colors are stored in local storage, you cannot access them in incognito mode or after a hard reload.
---

## Related pages

- [Adding custom color presets to color dropdowns in viewer](/guides/web/user-interface/color-picker/custom-presets.md)