### NPM Installation and Import (Bash) Source: https://context7.com/color-js/elements/llms.txt Installs the color-elements package using NPM. This is the recommended method for production builds. ```bash npm i color-elements ``` -------------------------------- ### Install and Import Color Elements via NPM Source: https://github.com/color-js/elements/blob/main/README.md These JavaScript snippets show how to install and import Color.js elements using NPM. You can import all elements with `import "color-elements";` or cherry-pick individual components using `import "color-elements/COMPONENT_NAME";`. ```bash npm i color-elements ``` ```javascript import "color-elements"; ``` ```javascript import "color-elements/COMPONENT_NAME"; ``` -------------------------------- ### Color Swatch Element Usage Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Examples demonstrating how to use the color-swatch component with different slot configurations and attributes. ```APIDOC ## Color Swatch Element Examples ### With Slot Content #### Before and After Slots ```html ``` ```html oklch(70% 0.25 138) ``` #### Large Swatch with Before and After Slots ```html Tip: Pick a bright medium color. ``` ### Adding Text within the Default Swatch ```html
Some text
 ``` *Note: The text color will automatically switch from black to white to remain readable.* ### Replacing the Whole Swatch with a Custom Element ```html
Some text
 ``` ### Bound to CSS Property *This section is commented out in the provided text but illustrates binding to a CSS property.* ```html ``` *You can use `scope` to select the closest ancestor (via a CSS selector) on which the CSS property will be read from and written to. If you don’t, the `` element will be used.* ``` -------------------------------- ### Color Swatch Element Events and Updates Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Examples showing how to handle color change events and update the color programmatically via JavaScript. ```APIDOC ## Events and Updates ### Events ```html ``` ### Update via JS #### Static Update ```html oklch(70% 0.25 138) ``` #### Editable Update ```html ``` ``` -------------------------------- ### HTML Color Swatch Component Usage Source: https://context7.com/color-js/elements/llms.txt Illustrates various ways to use the `` web component. Examples include displaying a static color, creating an editable swatch with an input field, showing custom color information with labels, and using compact details on hover. It also shows how to handle 'colorchange' events. ```html oklch(70% 0.25 138) oklch(70% 0.25 138) oklch(70% 0.25 138) ``` -------------------------------- ### HTML: Compact color scale styling Source: https://github.com/color-js/elements/blob/main/src/color-scale/README.md This example shows how to apply compact styling to the color scale by setting the '--details-style' CSS variable. This reduces the amount of information displayed for each color swatch, making the scale more visually condensed. The 'info' attribute is still used to define the data shown. ```html ``` -------------------------------- ### Basic HTML: Displaying colors via attribute Source: https://github.com/color-js/elements/blob/main/src/color-scale/README.md This example demonstrates the basic usage of the `` component by defining a list of colors directly in the 'colors' attribute. The 'space' attribute specifies the color space for interpolation, which is 'oklch' in this case. This is a fundamental way to render color gradients. ```html ``` -------------------------------- ### HTML: Interpolating between two core colors Source: https://github.com/color-js/elements/blob/main/src/color-scale/README.md This example illustrates how to specify only two core colors and use the 'steps' attribute to generate a gradient between them. The component will automatically interpolate the specified number of steps in the given color space ('oklch'). This is useful for creating simple gradients. ```html ``` -------------------------------- ### Color Swatch Event Handling - HTML Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Demonstrates how to handle the `oncolorchange` event to react to color updates. In this example, the event updates the text content of the next sibling element with the new color value. ```html ``` -------------------------------- ### Dynamically Update Color Swatch via JavaScript - HTML Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Provides examples of how to change the color of a color swatch programmatically using JavaScript. This covers both static and editable swatches, demonstrating direct property assignment. ```html oklch(70% 0.25 138) ``` ```html ``` -------------------------------- ### Semi-transparent Color in Source: https://github.com/color-js/elements/blob/main/src/color-inline/README.md Provides an example of using a semi-transparent color with the component. The alpha channel is included in the color string, resulting in a partially opaque color swatch. ```html hsl(340 90% 50% / .25) ``` -------------------------------- ### HTML: Customizing color swatch information Source: https://github.com/color-js/elements/blob/main/src/color-scale/README.md This example demonstrates how to pass additional information to the individual color swatches generated by the `` component. The 'info' attribute accepts a comma-separated string defining properties like lightness (L), chroma (C), and hue (H) in the specified color space, which will be displayed for each color. ```html ``` -------------------------------- ### `label` Attribute Usage in `` (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Demonstrates the use of the `label` attribute to provide a descriptive name for the color displayed in a ``, showing examples for static and editable swatches. ```html oklch(65% 0.15 210) oklch(65% 0.15 210) Turquoise ``` -------------------------------- ### with Initial Color (HTML) Source: https://github.com/color-js/elements/blob/main/src/channel-slider/README.md Illustrates setting an initial color for the component. This sets the other color channels and the starting value of the controlled channel. The component converts the provided color to the target space if necessary. ```html ``` -------------------------------- ### Setting Initial `value` Source: https://github.com/color-js/elements/blob/main/src/color-slider/README.md Explains how to set an initial color value for the `` using the `value` attribute, allowing the slider to start at a position other than the midpoint. ```html ``` -------------------------------- ### HTML: Named colors and interpolation steps Source: https://github.com/color-js/elements/blob/main/src/color-scale/README.md This example shows how to define colors with specific names and use interpolation to generate intermediate steps. The 'colors' attribute accepts a string where each color can be optionally prefixed with a name followed by a colon. The 'steps' attribute controls the number of interpolated colors between each defined color. ```html ``` -------------------------------- ### Color Picker with Custom Color Space Selector (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-picker/README.md Demonstrates how to provide a custom element for selecting the color space using the `color-space` slot. This example uses a ` ``` -------------------------------- ### Reactive with Selectors (HTML/JS) Source: https://github.com/color-js/elements/blob/main/src/channel-slider/README.md Shows a more complex example where user selections in dropdowns dynamically control the `space` and `channel` attributes of the . This highlights the reactive nature of the component's attributes and event handling. ```html ``` -------------------------------- ### HTML: Interpolating with empty color values Source: https://github.com/color-js/elements/blob/main/src/color-scale/README.md This commented-out example illustrates a technique for inserting interpolated steps only between specific colors by leaving empty values in the 'colors' attribute. This allows for precise control over where interpolation occurs within the color scale. Note that this functionality is shown within a comment. ```html ``` -------------------------------- ### Color Picker Event Listener (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-picker/README.md Example of how to listen for the `colorchange` event on the `` component. This event fires whenever the color changes, allowing dynamic updates to other parts of the UI, such as displaying color coordinates. ```html
``` -------------------------------- ### Dynamically Set Color Scale in HTML Source: https://github.com/color-js/elements/blob/main/src/color-chart/README.md This example demonstrates how to dynamically set the color scale for a `` element using a select dropdown and JavaScript. When a user selects an option, the 'colors' attribute of the first `` child element is updated, causing the chart to re-render with the new color scale. This interaction is handled purely within the browser using standard HTML and event attributes. ```html ``` -------------------------------- ### NPM Import: All or Individual Components (JavaScript) Source: https://context7.com/color-js/elements/llms.txt Demonstrates how to import all Color Elements components or cherry-pick individual ones to optimize bundle size. This allows for granular control over dependencies. ```javascript // Import all components import "color-elements"; ``` ```javascript // Or import individual components import "color-elements/color-picker"; import "color-elements/color-swatch"; import "color-elements/color-scale"; import "color-elements/channel-slider"; import "color-elements/color-chart"; import "color-elements/color-inline"; import "color-elements/space-picker"; import "color-elements/gamut-badge"; ``` -------------------------------- ### Programmatic Property Updates Source: https://github.com/color-js/elements/blob/main/src/color-slider/README.md Illustrates that all properties of `` are reactive and can be updated programmatically. This example shows setting the `value` property via a button click. ```html ``` -------------------------------- ### Basic `` Usage (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Demonstrates the fundamental usage of the `` element for displaying static and editable color values, including variations in size. ```html oklch(70% 0.25 138) oklch(70% 0.25 138) ``` -------------------------------- ### Basic `` Usage Source: https://github.com/color-js/elements/blob/main/src/channel-picker/README.md Demonstrates the fundamental usage of the `` element. It can be initialized with a specific color channel value, or it will default to 'oklch.l' if no value is provided. ```html ``` -------------------------------- ### Dynamic Alpha Channel Toggle (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-picker/README.md An example of dynamically controlling the `alpha` attribute of the `` component using a checkbox. When the checkbox is toggled, the `alpha` property of the color picker is updated accordingly. ```html ``` -------------------------------- ### Dynamic Update (HTML) Source: https://github.com/color-js/elements/blob/main/src/channel-slider/README.md Demonstrates how to dynamically update the component and capture its changes. The `colorchange` event is used to get the current color value, which can then be displayed or used elsewhere. ```html ``` -------------------------------- ### JavaScript Color Swatch Programmatic Creation Source: https://context7.com/color-js/elements/llms.txt Demonstrates the programmatic creation and manipulation of the `` web component using JavaScript. It shows how to instantiate the component, set its color value and size, append it to the DOM, and attach an event listener for 'colorchange' events. This allows for dynamic generation of color swatches in an application. ```javascript
``` -------------------------------- ### Basic Color Picker Usage (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-picker/README.md Demonstrates the fundamental usage of the `` component. It shows how to set a specific color space and initial color value. If no attributes are provided, default values for space ('oklch') and color ('oklch(50% 50% 180)') are used. ```html ``` -------------------------------- ### Basic Usage Source: https://github.com/color-js/elements/blob/main/src/color-inline/README.md Demonstrates the fundamental way to use the component by wrapping a color value within the tag. This will display the color swatch and the color value itself. ```html lch(50% 40 30) ``` -------------------------------- ### HTML Color Picker Component Usage Source: https://context7.com/color-js/elements/llms.txt Demonstrates the basic and advanced usage of the `` web component. It shows how to set the color space, initial color, enable alpha channel, and handle color change events. Customization via slots for color space selection is also illustrated. This component relies on the Color.js library for color manipulation. ```html
``` -------------------------------- ### Basic Usage (HTML) Source: https://github.com/color-js/elements/blob/main/src/channel-slider/README.md Demonstrates the basic integration of the component. It requires specifying the color space and the channel to be controlled. The component automatically handles default min/max/step values and gradient generation. ```html ``` -------------------------------- ### Dynamic Color Picker Attribute Update (JavaScript) Source: https://github.com/color-js/elements/blob/main/src/color-picker/README.md Shows how to dynamically update the `space` attribute of the `` component using JavaScript. This example uses radio buttons to allow users to switch between different color spaces, updating the `spaceId` property. ```html
Polar Spaces
``` -------------------------------- ### Compact Details Style for `` (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Shows how to apply the `--details-style: compact` CSS property to `` elements for a more minimalist display, primarily showing details on user interaction. ```html oklch(70% 0.25 138) oklch(70% 0.25 138) ``` -------------------------------- ### HTML Usage of Gamut Badge Source: https://github.com/color-js/elements/blob/main/src/gamut-badge/README.md Demonstrates static and dynamic usage of the component in HTML. It shows how to set the color attribute and dynamically update the color property. ```html ``` -------------------------------- ### CDN Usage: All or Individual Components (HTML) Source: https://context7.com/color-js/elements/llms.txt Shows how to include Color Elements in your project using CDN links. This method is suitable for rapid prototyping or when NPM is not preferred. It covers loading all components or a single specified component. ```html ``` ```html ``` -------------------------------- ### Basic Usage of `` Source: https://github.com/color-js/elements/blob/main/src/space-picker/README.md Demonstrates the fundamental usage of the `` element. It shows how to set a default color space using the `value` attribute and how the picker behaves when no value is provided. ```html ``` -------------------------------- ### Dynamically Change Y-Axis Coordinate in HTML Source: https://github.com/color-js/elements/blob/main/src/color-chart/README.md This example shows how to reactively change the Y-axis coordinate of a `` element using an HTML button and JavaScript. Clicking the button updates the 'y' attribute of the `` element, causing it to re-render with the new coordinate system. No external libraries are needed for this dynamic update. ```html Orange Yellow ``` -------------------------------- ### Controlling `` Popup Visibility (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Demonstrates how to control the visibility of the `` popup using the `open` attribute. The popup can be forced open with `open` or closed with `open="false"`. ```html
oklch(70% 0.25 138) oklch(70% 0.25 138) oklch(70% 0.25 138)
``` -------------------------------- ### `color-inline` Component Usage Source: https://github.com/color-js/elements/blob/main/src/color-inline/README.md Demonstrates the basic usage of the `` component to display a color value. ```APIDOC ## `` Component ### Description A web component that displays a color value, optionally with a visual swatch. It can be used to show color codes directly in the text flow. ### Method No specific HTTP method applies as this is a client-side component. ### Endpoint N/A ### Parameters #### Attributes & Properties - **`value`** (string) - Optional - The textual form of the color. Will have a value even if the color is invalid. - **`color`** (Color | null) - Optional - The current color value. `null` for invalid colors. #### Slots - **_default_** - The element's main content—the color to be shown. Placed next to the color swatch. ### CSS Variables - **`--transparency-grid`** () - Gradient used as a background for transparent parts of the swatch. - **`--transparency-cell-size`** () - The size of the tiles in the transparency grid. - **`--transparcency-background`** () - The background color of the transparency gradient. - **`--transparency-darkness`** () - The opacity of the black color used for dark parts of the transparency gradient. - **`--border-width`** () - The width of the border around the swatch. - **`--box-shadow-blur`** () - The blur radius of the box shadow around the swatch. - **`--box-shadow-color`** () - The color of the box shadow around the swatch. ### Parts - **`swatch-wrapper`** - The component’s base wrapper. - **`swatch`** - An internal element used to provide a visual preview of the current color. ### Request Example ```html lch(50% 40 30) ``` ### Response #### Success Response (N/A) This component does not have a server-side response. #### Response Example N/A ``` -------------------------------- ### Keyboard Accessibility for `` (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Illustrates how to make the `` element keyboard accessible by adding the `tabindex="0"` attribute, allowing focus and popup display via keyboard interaction. ```html oklch(70% 0.25 138) ``` -------------------------------- ### Color Swatch with Slot Content - HTML Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Demonstrates using slots to prepend labels or append additional information to the color swatch. It shows how to include input elements or plain text within the 'before' and 'after' slots. ```html ``` ```html oklch(70% 0.25 138) ``` ```html Tip: Pick a bright medium color. ``` -------------------------------- ### Color Swatch with Custom Swatch Content - HTML Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Illustrates how to replace the default swatch rendering with custom content using the 'swatch-content' or 'swatch' slots. This allows for complete customization of the swatch's appearance, including text. ```html
Some text
 ``` ```html
Some text
 ``` -------------------------------- ### `info` Attribute Usage in `` (HTML) Source: https://github.com/color-js/elements/blob/main/src/color-swatch/README.md Shows how to use the `info` attribute to display additional information about the color, such as color coordinates. It also covers customizing the labels for these coordinates. ```html oklch(70% 0.25 138) oklch(70% 0.25 138) oklch(70% 0.25 138) ``` -------------------------------- ### Element Usage Source: https://github.com/color-js/elements/blob/main/src/space-picker/README.md Demonstrates the basic and advanced usage of the element, including setting default values, specifying color spaces, and custom labeling. ```APIDOC ## Usage of ### Basic Usage ```html ``` If no color space is provided, the first one in the `spaces` list will be used: ```html ``` Specify custom color spaces: ```html ``` Unknown color spaces are also supported: ```html ``` ### Custom Labels Define the `getSpaceLabel()` method to customize the displayed labels for color spaces: ```html ``` ### Grouping Color Spaces Use the `groupBy` property to group color spaces. This property accepts a function that returns a group name for each color space: ```html ``` ### Events Listen for the `spacechange` event to get the current color space value or object: ```html ``` ### Dynamic Properties All properties are reactive and can be updated programmatically: ```html ``` `` integrates with other color elements: ```html ``` ``` -------------------------------- ### Component API Source: https://github.com/color-js/elements/blob/main/src/gamut-badge/README.md This section details the attributes, properties, getters, events, CSS variables, and CSS parts of the web component. ```APIDOC ## Component API ### Description The `` component is a web component used internally by `` to indicate color gamuts. It provides visual feedback on whether a given color falls within specified color spaces. ### Attributes & Properties | Attribute | Property | Property Type | Default Value | Description | |---|---|---|---|---| | `gamuts` | `gamuts` | `string` | `Array` | `object` | `["srgb", "p3", "rec2020", "prophoto"]` | A list of gamuts to use for color validation. | | `color` | `color` | `Color` | `string` | - | The current color value to be validated against the gamuts. | ### Getters (Read-only) | Property | Type | Description | |---|---|---| | `gamut` | `string` | The identifier of the current gamut the color fits into (e.g., `srgb`). | | `gamutLabel` | `string` | The user-friendly label of the current gamut (e.g., `sRGB`). | | `gamutInfo` | `object` | Metadata about the current gamut, including its label, id, and level. | ### Events | Name | Description | |---|---| | `gamutchange` | Fired when the gamut changes for any reason, and also once during initialization. | ### CSS Variables These variables can be used to customize the appearance of the `` component. | Variable | Type | Default Value | Description | |---|---|---|---| | `--color-green` | `` | | Starting color of the background color scale. Used when the color is within the first gamut. | | `--color-yellow` | `` | | Yellow color used at approximately 33.3% of the color scale. Used for the second gamut if there are four total. | | `--color-orange` | `` | | Orange color used at approximately 66.6% of the color scale. Used for the third gamut if there are four total. | | `--color-red` | `` | | Red color used as the last stop of the color scale. Used when the color is within the last gamut. | | `--color-red-dark` | `` | | Dark red background color of the gamut indicator. Used when the provided color fits none of the specified gamuts. | | `--color-invalid` | `` | | Background color of the gamut indicator when the provided color is invalid. | #### Output-only CSS Variables These variables are set by the component and should generally not be set by the user. | Variable | Type | Default Value | Description | |---|---|---|---| | `--gamut-color` | `` | | Background color of the gamut indicator. Overrides other gamut-dependent colors. | | `--gamut-level` | `` | - | The index of the gamut the current color fits in, starting from 0. Can be used for styling. | ### CSS Parts | Part | Description | |---|---| | `label` | The label of the gamut indicator. This part does not apply if the element has custom content slotted into it. | ### Usage Examples **Static Usage:** ```html ``` **Invalid Color Example:** ```html ``` **Missing Color Example:** ```html ``` **Dynamic Usage:** ```html ``` ``` -------------------------------- ### Include All Color Elements via CDN Source: https://github.com/color-js/elements/blob/main/README.md This HTML snippet shows how to include all Color.js elements at once using a CDN link. It adds the necessary script to the page to make all components available. ```html ``` -------------------------------- ### Dynamically Setting `` Value Source: https://github.com/color-js/elements/blob/main/src/channel-picker/README.md Demonstrates how to dynamically change the value of a `` element programmatically. Clicking a button updates the picker's value to 'p3.b', showcasing the reactivity of its properties. ```html ```