# coherent-gameface-color-picker

> A component for Coherent Labs Gameface.

Latest version **1.1.1** (published 2026-05-15) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install coherent-gameface-color-picker
pnpm add coherent-gameface-color-picker
yarn add coherent-gameface-color-picker
bun add coherent-gameface-color-picker
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2026-05-15 |
| First published | 2024-04-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | CoherentLabs |
| Maintainers | coherent-labs |
| Keywords | UI, Component |

## Links

- npm: https://www.npmjs.com/package/coherent-gameface-color-picker
- Repository: https://github.com/CoherentLabs/GameUIComponents.git#master
- Homepage: https://github.com/CoherentLabs/GameUIComponents/tree/master#readme
- Issues: https://github.com/CoherentLabs/GameUIComponents/issues
- npm.io page: https://npm.io/package/coherent-gameface-color-picker

## Dependencies (6)

- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) 3.4.1
- [colortranslator](https://npm.io/package/colortranslator.md) 4.1.0
- [postmessage-polyfill](https://npm.io/package/postmessage-polyfill.md) 1.0.0
- [coherent-gameface-tooltip](https://npm.io/package/coherent-gameface-tooltip.md) ^3.1.0
- [coherent-gameface-components](https://npm.io/package/coherent-gameface-components.md) ^3.0.1
- [coherent-gameface-rangeslider](https://npm.io/package/coherent-gameface-rangeslider.md) ^3.4.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.1.1 (latest) — 2026-05-15
- 1.1.0 — 2025-01-28
- 1.0.0 — 2024-04-24

## README

<a href="https://www.npmjs.com/package/coherent-gameface-color-picker"><img src="http://img.shields.io/npm/v/coherent-gameface-color-picker.svg?style=flat-square"/></a>

<div style="background-color: rgba(255, 229, 100, 0.3); border-left: 5px solid #e5c100; padding: 15px; margin-bottom: 20px; border-radius: 4px;">
  <h3 style="margin-top: 0">⚠️ Package Deprecated</h3>
  <p style=" margin-bottom: 0;">
    This legacy package has been deprecated in favor of the updated Gameface UI suite. 
    Please switch to the official framework at <a href="https://gameface-ui.coherent-labs.com/" style=" font-weight: bold; text-decoration: underline;">Gameface UI</a>.
  </p>
</div>

The gameface-color-picker is part of the Gameface custom components suite. As most of the components in this suite it uses slots to allow dynamic content.


Installation
===================

```
npm i coherent-gameface-color-picker
```

Usage
===================
The color-picker component comes with UMD builds.

## Usage with UMD modules:

* import the color-picker component:

~~~~{.html}
<script src="./node_modules/color-picker/dist/color-picker.production.min.js"></script>
~~~~

* add the gameface-color-picker component to your html:

~~~~{.html}
<gameface-color-picker class="color-picker-component"></gameface-color-picker>
~~~~

This is all! Load the file in Gameface to see the color-picker.

## Usage with JavaScript:

If you wish to import the modules using JavaScript you can remove the script tags
which import the components and the color-picker from the node_modules folder and import them like this:

~~~~{.js}
import {ColorPicker} from 'coherent-gameface-color-picker';
~~~~

or simply

~~~~{.js}
import 'coherent-gameface-color-picker';
~~~~

Note that this approach requires a module bundler like [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/guide/en/) to resolve the
modules from the node_modules folder.

## How to use

To use simply add
~~~~{.html}
<gameface-color-picker></gameface-color-picker>
~~~~

### Setting up the initial color of the picker

To set the initial color of the color picker, you can use the `value` attribute and set it to a color in any of the following formats `HEX`, `HEXA`, `RGB`, `RGBA`, `HSL` and `HSLA`.

Example:
~~~~{.html}
<gameface-color-picker value="#FF0000"></gameface-color-picker>
~~~~

### Setting the color dynamically

To set the color dynamically you can either set the attribute directly using the `DOM APIs`

```javascript
const colorPicker = document.querySelector('gameface-color-picker');

colorPicker.setAttribute('value', ${newValue});
```
 
or directly by changing the `value` property

```javascript
colorPicker.value = ${newValue}
```

The `newValue` should be a color string of one of the following formats `HEX`, `HEXA`, `RGB`, `RGBA`, `HSL` and `HSLA`

### Listening for changes in the color picker

To listen for changes in the color picker you can attach an event listener to the `colorchange` event

```javascript
const colorPicker = document.querySelector('gameface-color-picker');

colorPicker.addEventListener('colorchange', () => {
    // Do something
})
```

---
_Source: https://npm.io/package/coherent-gameface-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._