yet-another-color-picker
Advanced tools
A color picker web component.
Links:
Install the package (and its peer dependencies).
npm install yet-another-color-picker lit-html@^3.0.0
Note: this web component is rendered using lit-html which will have to be installed as well.
Import the module to define the custom element.
JavaScript:
import 'yet-another-color-picker'
Load the stylesheet.
HTML:
<link rel="stylesheet" href="./node_modules/yet-another-color-picker/dist/ColorPicker.css">
Use the color-picker custom element.
HTML:
<color-picker></color-picker>
Complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>color picker demo</title>
<link rel="stylesheet" href="./node_modules/yet-another-color-picker/dist/ColorPicker.css">
</head>
<body>
<color-picker></color-picker>
<script type="module">
import 'yet-another-color-picker'
const colorPicker = document.querySelector('color-picker')
colorPicker.addEventListener('color-change', function (event) {
console.log(event.detail)
})
</script>
</body>
</html>
Download the files.
curl --remote-name-all 'https://cdn.jsdelivr.net/npm/yet-another-color-picker@latest/dist/ColorPicker.{js,css,d.ts}'
Define an import map for lit-html.
Since this package does not bundle its dependencies (e.g. lit-html), the distribution files contain imports from bare module specifiers (e.g. import { render } from 'lit-html'). Browsers don't understand bare module specifiers by default, but with import maps, you can teach them.
Add the following to your HTML:
HTML:
<script type="importmap">
{
"imports": {
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@^3.0.0"
}
}
</script>
This will make imports like the one mentioned above behave as if they reference the provided URL (e.g. import { render } from 'lit-html' will behave like import { render } from 'https://cdn.jsdelivr.net/npm/lit-html@^3.0.0').
Import the module to define the custom element.
JavaScript:
import './ColorPicker.js'
Load the stylesheet.
HTML:
<link rel="stylesheet" href="./ColorPicker.css">
Use the color-picker custom element.
HTML:
<color-picker></color-picker>
Complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>color picker demo</title>
<link rel="stylesheet" href="./ColorPicker.css">
</head>
<body>
<color-picker></color-picker>
<script type="importmap">
{
"imports": {
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@^3.0.0"
}
}
</script>
<script type="module">
import './ColorPicker.js'
const colorPicker = document.querySelector('color-picker')
colorPicker.addEventListener('color-change', function (event) {
console.log(event.detail)
})
</script>
</body>
</html>
In the following sections, the web component's IDL and content attibutes, are documented.
Note: Setting a content attribute will be reflected by its corresponding IDL attribute; however, setting an IDL attribute will not be reflected by its corresponding content attribute.
alphaChannelDescription: Whether to show controls for a color’s alpha channel. If set to 'hide', the alpha range input and the alpha channel input are hidden, the “Copy color” button will copy a CSS color value without alpha channel, and the object emitted in a color-change event will have a cssColor property value without alpha channel.
Type: 'show' | 'hide'
Required: false
Default: 'show'
Content attribute: alpha-channel
Usage:
JavaScript:
colorPicker.alphaChannel = 'hide'
HTML:
<color-picker alpha-channel="hide"></color-picker>
defaultValueDescription: Set the color picker's current color as long as the color wasn't changed by the user already.
Type: string
Required: false
Default: ''
Content attribute: value
Usage:
JavaScript:
colorPicker.defaultValue = 'hsl(270 100% 50% / 0.8)'
HTML:
<color-picker value="hsl(270 100% 50% / 0.8)"></color-picker>
HTML:
<color-picker value="#f80b"></color-picker>
disabledDescription: Disables the color picker.
Type: boolean
Required: false
Default: false
Content attribute: disabled
Usage:
JavaScript:
colorPicker.disabled = true
HTML:
<color-picker disabled></color-picker>
formatDescription: The current color format. Also changes when interacting with the “Switch format” button or when calling switchFormat().
Type: VisibleColorFormat
Required: false
Default: 'hsl'
Content attribute: format
Usage:
JavaScript:
colorPicker.format = 'hwb'
HTML:
<color-picker format="hwb"></color-picker>
idDescription: This value will be used to prefix any of the color picker’s form-associated elements’ id and for attribute values. Make sure to set this if you use multiple instances of the component on a page.
Note: The IDL attribute id of form-associated elements is reflected by its content attribute.
Type: string
Required: false
Default: 'color-picker'
Content attribute: id
Usage:
JavaScript:
colorPicker.id = 'color-picker-1'
HTML:
<color-picker id="color-picker-1"></color-picker>
nameDescription: Name of the color picker (used when the color picker is part of a form).
Note: The IDL attribute name of form-associated elements is reflected by its content attribute.
Type: string
Required: false
Default: ''
Content attribute: name
Usage:
JavaScript:
colorPicker.name = 'color-picker'
HTML:
<color-picker name="color-picker"></color-picker>
readOnlyDescription: Makes the color picker read-only.
Type: boolean
Required: false
Default: false
Content attribute: readonly
Usage:
JavaScript:
colorPicker.readonly = true
HTML:
<color-picker readonly></color-picker>
valueDescription: The current color of the color picker.
The value getter will return the current color as a string (formatted as a CSS RGB color, e.g. 'rgb(127.5 0 255 / 0.8)'). This is also the form value used in form submission.
The value setter accepts a string (any CSS color works, e.g. 'hsl(270 100% 50% / 0.8)') or an object (e.g. { h: 270, s: 100, l: 50, a: 0.8 }).
Type: string | ColorHsl | ColorHwb | ColorRgb (for string, any valid CSS color string will work)
Required: false
Default: 'rgb(255 255 255 / 1)'
Content attribute: None. The value IDL attribute doesn't directly reflect a content attribute. However, the value IDL attribute does reflect the defaultValue IDL attribute as long as the dirty flag isn't set.
Usage:
JavaScript:
colorPicker.value = 'hsl(270 100% 50% / 0.8)'
colorPicker.value
//> 'rgb(127.5 0 255 / 0.8)'
JavaScript:
colorPicker.value = { h: 270, s: 100, l: 50, a: 0.8 }
visibleFormatsDescription: A list of visible color formats. Controls for which formats the color input elements are shown and in which order the formats will be cycled through when activating the format switch button.
Type: VisibleColorFormat (an array of VisibleColorFormats)
Required: false
Default: ['hex', 'hsl', 'hwb', 'rgb']
Content attribute: visible-formats
Usage:
JavaScript:
colorPicker.visibleFormats = ['hsl', 'hwb']
HTML:
<color-picker visible-formats="hsl,hwb"></color-picker>
copyColor()Description: Copies the current color (determined by the active color format).
This method behaves the same as activating the “Copy color” button.
Only works in secure browsing contexts (i.e. HTTPS).
Return type: Promise<void> (the promise returned by calling window.navigator.clipboard.writeText)
Usage:
JavaScript:
colorPicker.copyColor()
switchFormat()Description: Sets the next active color format by cycling through colorPicker.visibleFormats. This method behaves the same as activating the “Switch format” button. To set a specific color format, use the format property.
Return type: void
Usage:
JavaScript:
colorPicker.switchFormat()
changechange event is fired when the color is changed.Eventcolor-changeDescription: The color-change event is fired when the color is changed.
Type: CustomEvent<ColorChangeDetail>
Data: Emits an object whose detail property contains both the internal colors object and a CSS color value as a string based on the currently active format. The cssColor property respects the alphaChannel IDL attribute.
{
colors: {
hex: string
hsl: ColorHsl
hwb: ColorHwb
rgb: ColorRgb
}
cssColor: string
}
Usage:
HTML:
<color-picker color="hsl(270 100% 50% / 0.8)"></color-picker>
JavaScript:
import 'yet-another-color-picker'
const colorPicker = document.querySelector('color-picker')
colorPicker.addEventListener('color-change', function (event) {
console.log(event.detail)
})
colorPicker.value = 'rebeccapurple'
color-copyDescription: The color-copy event is fired once a copy operation succeeded.
Type: CustomEvent<ColorChangeDetail>
Data: Emits the same event data as the color-change event.
Usage:
HTML:
<color-picker color="hsl(270 100% 50% / 0.8)"></color-picker>
JavaScript:
import 'yet-another-color-picker'
const colorPicker = document.querySelector('color-picker')
colorPicker.addEventListener('color-copy', function (event) {
console.log(event.detail)
})
colorPicker.copyColor()
inputinput event is fired when the color is changed.EventYou can customize the GUI of the color picker using CSS custom properties:
:root {
--cp-color-focus: tomato;
--cp-width-border: 2px;
}
Available custom properties and their default values:
| Custom property | Default value |
|---|---|
--cp-color-background-input | #fff |
--cp-color-background | #fff |
--cp-color-border | #000 |
--cp-color-focus | #19f |
--cp-color-text-input | currentColor |
--cp-color-text | currentColor |
--cp-font-family | -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif |
--cp-font-size | 0.8em |
--cp-spacing | 6px |
--cp-width-border | 1px |
--cp-width-color-space | 300px |
This package uses semantic versioning.
See CONTRIBUTING.md.
The color picker consists of the following main elements:
Color space:
For fine-tuning the saturation and lightness/value, a slice of the HSV cylinder for the currently selected hue is shown.
The HSV cylinder is more convenient for this task than the HSL cylinder as it shows a color at 100% saturation and 100% value in the top right corner (i.e. one can drag the color space thumb into the corner as a quasi shortcut). The HSL cylinder’s slice has this color at the halfway point of the Y axis (i.e. at 50% lightness) which isn’t easy to select.
Hue slider:
A slider for selecting the current hue. This rotates the HSV cylinder; thus, it changes the slice of the HSV cylinder that’s shown in the color space.
Alpha slider:
A slider for selecting the current alpha value.
Copy button:
Copies the color formatted as a CSS color string in the active format.
Color inputs:
A set of text fields which allow you to enter the individual components of each color. The text fields are shown based on the active format.
Switch format button:
Cycles through the available color formats (currently HEX, HSL, HWB, and RGB).
4.0.0 (2024-10-20)
color. How to update: Use the value content attribute or the defaultValue IDL attribute instead.color. How to update: Use the value IDL attribute instead.colors. How to update: Use the event data of the color-change event instead.defaultFormat. **How to update**: Use the IDL attribute format` instead.default-format. How to update: Use the content attribute format instead.add color-copy event (8d850f0)
Add a new event copy-color that is fired once a copy operation succeeded. Its event data is the same as that of the color-change event.
make the color picker a form-associated custom element (e11232a)
Make the color picker a form-associated custom element via the ElementInternals API. This allows the color picker to participate in forms as a form control and contribute a form value on form submission. Additionally, on form reset, the color picker's form value is reset to the value of the value content attribute. The value content attribute, defaultValue IDL attribute, and value IDL attribute are implemented to match the behavior of native HTML form controls.
Add the value IDL attribute. The getter returns a string formatted as a CSS RGB color (e.g. 'rgb(127.5 0 255 / 0.8)'). This is also the value used in form submission. The setter accepts any valid CSS color string (including named colors) or any of the color picker's internal color object formats (e.g. { r: 127.5, g: 0, b: 255, a: 0.8 }).
Add the defaultValue IDL and value content attribute. Sets the default value used on form reset. Also sets the value IDL attribute as long as the user hasn't change the color.
Add the disabled IDL and content attribute. Disabling the color picker will render it completely inert. All containing form controls and buttons will be disabled and the color picker thumb won't respond to interactions. An ancestor fieldset element which is disabled will also render the color picker disabled.
Add the readOnly IDL and readonly content attribute. Setting the color picker to read-only will prevent the user from changing the color.
Add the required IDL and content attribute.
Add the input and change events. They are fired whenever the user changes the color. Note, that there is currently no scenario in which only the input but not the change event is fired.
BREAKING CHANGE: Remove the content attribute color. How to update: Use the value content attribute or the defaultValue IDL attribute instead.
BREAKING CHANGE: Remove the IDL attribute color. How to update: Use the value IDL attribute instead.
BREAKING CHANGE: Remove the IDL attribute colors. How to update: Use the event data of the color-change event instead.
support format content attribute (8aeaae9)
Add support for the format content attribute which corresponds to the activeFormat IDL attribute.
BREAKING CHANGE: Remove the IDL attribute defaultFormat. **How to update**: Use the IDL attribute format` instead.
BREAKING CHANGE: Remove the content attribute default-format. How to update: Use the content attribute format instead.
FAQs
Color picker web component
The npm package yet-another-color-picker receives a total of 5 weekly downloads. As such, yet-another-color-picker popularity was classified as not popular.
We found that yet-another-color-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.