ColorPanel — Smart UI JavaScript API

ColorPanel — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ColorPanel - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-color-panel id="demo-colorpanel"></smart-color-panel>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.colorpanel.js';

    const el = document.getElementById('demo-colorpanel');
    if (el) {

      el.value = '#1e88e5';
      el.displayMode = 'default';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: ColorPanel   Framework: JavaScript   Selector: smart-color-panel

API counts: 33 properties, 0 methods, 4 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: n/a

Common events: change, cancelButtonClick, customColorSelection, okButtonClick

Module hint: smart-webcomponents/source/modules/smart.colorpanel.js

ColorPanel is an advanced color chooser with Pallete, Spectrum Grid, Radial Palette and Excel-like options.

Class

ColorPanel

ColorPanel

ColorPanel is an advanced color chooser with Pallete, Spectrum Grid, Radial Palette and Excel-like options.

Selector

smart-color-panel

Quick picks

changedisabledvalue

Properties

AanimationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use this property to enable, disable, or specify the type of animation applied to the element.
AapplyValueModeClarifies the method or rule by which the value is implemented or utilized within the system, detailing how the value influences functionality or behavior.
CcolumnCountSpecifies how many columns of colors are displayed when using the 'grid', 'hexagonal', or 'spectrumGrid' displayModes. This parameter controls the horizontal arrangement of color swatches, determining how many colors appear in each row of the color picker interface for these modes.
DdisabledDetermines whether the element is interactive or not. When set to 'disabled', the element becomes unresponsive to user interactions such as clicks, typing, or selection, and may also appear visually distinct (e.g., grayed out) to indicate its inactive state. When enabled, the element behaves normally and accepts user input.
DdisableUndoBy default, clicking on the color panel's preview container will revert the selected color to its previous value, effectively undoing any recent changes. Setting the 'disableUndo' option disables this undo functionality, so clicking the preview container will no longer restore the previous color value.
DdisplayModeSpecifies the color palette to be used and defines how these colors are arranged or distributed within the user interface or visual component.
EeditAlphaChannelEnables users to adjust the alpha (transparency) level of colors using an editor or slider. This functionality is available in the following display modes: 'palette', 'radial', and 'hexagonal', allowing for precise transparency control while selecting colors in these layouts.
EenableCustomColorsEnables users to choose a custom color through an editor popup interface. This functionality extends custom color selection to modes where it is not included by default, such as 'grid', 'default', or 'spectrum grid', providing flexibility and a consistent color selection experience across different modes.
GgridShadeColorsDefines an array of color values to be used as shade colors in the section that appears when displayMode is set to 'default'. These colors determine the visual shading or accent colors applied within that display mode, allowing for customization of the section’s appearance.
GgridStandardColorsSpecifies an array of standard colors that will be applied in the corresponding section when the displayMode is set to 'default'. These colors determine the default color palette for that section's visual elements.
GgridThemeColorsSpecifies an array of color values to be used as the theme colors for the relevant section when displayMode is set to 'default'. These colors will determine the visual appearance and styling of the section under the default display mode.
HhideAlphaEditorControls the visibility of the alpha editor, which is a UI input for adjusting the opacity (alpha value) of the selected color. The alpha editor is available in the 'radial', 'palette', and 'hexagonal' modes, and is displayed by default as long as there is enough space in the interface. Enabling this option will hide the alpha editor from view, preventing users from modifying color opacity directly.
HhideContentToFitSpecifies the priority for hiding color editors when there is insufficient space to display all of them. By default, color editors are shown only in 'palette', 'radial', and 'hexagonal' display modes. Use this property to control the order in which editors are hidden, ensuring that the most important editors remain visible for as long as possible as space becomes limited. This allows for a customized and responsive user interface that adapts to varying display sizes. Click for more details. Property object's options:
    HhideHEXEditorThe HEX editor is an input field that allows users to enter or view a color's value in hexadecimal format (e.g., #FF5733). By default, the HEX editor is displayed in the UI. If the 'hideHEXeditor' property is set to true, this input will be hidden from view. Note: The 'hideRGBeditor' property controls the visibility of the separate RGB editor, not the HEX editor.
    HhidePreviewContainerConceals the preview container, which displays the currently selected value in the 'palette', 'radial', and 'hexagonal' display modes. When this option is enabled, users will not see the visual representation of their selection within the interface.
    HhideRGBEditorHides the RGB editor interface. This editor consists of three individual input fields, each allowing users to directly adjust the Red, Green, and Blue components of a color independently. Disabling this option will prevent users from modifying these color channels through the RGB editor.
    IinvertedInverts the color scheme of the interface when operating in the 'spectrumGrid', 'hexagonal', or 'radial' display modes, producing a visually reversed version of the original colors for enhanced contrast or alternative visual effects.
    LlocaleDefines or retrieves the current language setting for the application. This property works together with the messages property, allowing you to display localized content based on the selected language. Setting this value determines which language-specific message set from messages will be used throughout the interface.
    LlocalizeFormatFunctionA callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, translate, or personalize message strings before they are displayed in your application.
    MmessagesSpecifies or retrieves an object that defines the text strings used within the widget, allowing for easy localization of the widget's interface. This property works together with the locale property to support multiple languages by providing translated strings as needed. Use this to customize the widget's displayed text based on the selected locale.
    NnameSets or retrieves the value of the element's name attribute. This attribute assigns a unique identifier to the element within an HTML form, allowing its value to be included as a key when the form is submitted to a server. The name attribute is essential for processing form data, as the server uses these names to identify and handle the values submitted by users.
    PpaletteSpecifies the color palette used for rendering the color options within the 'spectrumGrid', 'grid', and 'hexagonal' display modes. This setting controls which color values are shown to users when these modes are active, directly affecting the available color choices in the UI.
    PpaletteColorsSpecifies an array of colors to create a custom color palette. When the palette property is set to custom, this palette is available for selection in the 'grid' and 'spectrum grid' display modes. The array can contain either color strings (such as HEX, RGB, or RGBA formats) or objects that define valid color values. This allows for flexible customization of the color selection options shown to users.
    PpaletteCustomColorsSpecifies an array of colors that make up a predefined custom color palette. This palette is available for display modes 'grid', 'default', and 'spectrum grid'. When enabled via the enableCustomColors property, these custom colors appear at the bottom of the color grid, positioned below the button that allows users to select a custom color. If enableCustomColors is set to false, the custom color palette will not be visible to users.
    RreadonlyWhen the element has the "readonly" attribute, users can view its value but cannot modify, edit, or interact with its content in any way. The element remains visible and selectable, but user input and changes are disabled.
    RrightToLeftDetermines or retrieves whether the element’s text direction is set to right-to-left (RTL), enabling proper alignment and layout for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.
    TthemeSpecifies the theme to be applied to the element, which controls its overall appearance—including colors, fonts, and style variations—ensuring visual consistency with the rest of the user interface.
    TtooltipDisplayModeSpecifies the format and content used to display the color’s value in the tooltip when a user hovers over it. This setting controls how the color information (such as hexadecimal, RGB, or color name) appears in the tooltip for better clarity and user experience.
    UunfocusableWhen set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or other focus-related interactions.
    UunlockKeySets or retrieves the 'unlockKey' property, a unique key required to activate or grant access to the product. Assign a valid key string to unlock the product, or get the current key in use.
    VvalueRepresents the currently selected color value, typically formatted as a hexadecimal code (e.g., "#FF5733"), RGB value, or other standard color representation. This value is updated whenever the user selects a new color and can be used to apply the chosen color to UI elements or store user preferences.
    VvalueFormatSpecifies the format in which the color value will be represented—either HEX, RGB, or RGBA. By default, the color format adapts automatically based on the selected displayMode.
    VvalueMemberSpecifies which object property should be used as the color value when paletteColors is an array of objects. This option is useful when your color data is structured as objects and the property representing the color value does not use the default key name 'value'. Set this attribute to the name of the property that contains the color value within each object.

    Events

    CcancelButtonClickThis event is triggered when the user clicks the "Cancel" button. Note: The "Cancel" button is displayed only when the applyValueMode property is set to useButtons. If applyValueMode has a different value, the "Cancel" button will not appear, and this event will not be triggered.
    CchangeThis event is triggered whenever the selected color value is modified by the user. It occurs both when the user chooses a new color or adjusts the current color selection, allowing developers to respond dynamically to changes in color input.
    CcustomColorSelectionThis event is triggered whenever the custom color selection view is either opened or closed by the user. Note that the custom color selection view is only accessible when the enableCustomColors property is set to true. This event allows you to perform actions in response to users interacting with the custom color picker interface.
    OokButtonClickThis event is triggered when the "OK" button is clicked by the user. Note that the "OK" button appears in the UI only if the applyValueMode property is set to useButtons. If applyValueMode has a different value, the "OK" button will not be displayed, and this event will not be triggered.

    Properties

    animationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use this property to enable, disable, or specify the type of animation applied to the element."none" | "simple" | "advanced"

    Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use this property to enable, disable, or specify the type of animation applied to the element.

    Allowed Values

    • "none" - animation is disabled
    • "simple" - ripple animation is disabled
    • "advanced" - all animations are enabled

    Default value

    "advanced"

    Examples

    Markup and runtime examples for animation:

    HTML:

    <smart-color-panel animation="none"></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.animation = "simple";

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const animation = el.animation;

    applyValueModeClarifies the method or rule by which the value is implemented or utilized within the system, detailing how the value influences functionality or behavior."instantly" | "useButtons"

    Clarifies the method or rule by which the value is implemented or utilized within the system, detailing how the value influences functionality or behavior.

    Allowed Values

    • "instantly" - The value is applied immediately when a color is selected
    • "useButtons" - Two buttons are shown below the color selection area: 'Ok' and 'Cancel' buttons. Clicking on the 'OK' button applies the new value. Clicking on 'Cancel' cancels the current selection and and resets to previous.

    Default value

    "instantly"
    Try a demo showcasing the applyValueMode property.

    Examples

    Markup and runtime examples for applyValueMode:

    HTML:

    <smart-color-panel apply-value-mode="useButtons"></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.applyValueMode = "instantly";

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const applyValueMode = el.applyValueMode;

    columnCountSpecifies how many columns of colors are displayed when using the 'grid', 'hexagonal', or 'spectrumGrid' displayModes. This parameter controls the horizontal arrangement of color swatches, determining how many colors appear in each row of the color picker interface for these modes.number

    Specifies how many columns of colors are displayed when using the 'grid', 'hexagonal', or 'spectrumGrid' displayModes. This parameter controls the horizontal arrangement of color swatches, determining how many colors appear in each row of the color picker interface for these modes.

    Default value

    8
    Try a demo showcasing the columnCount property.

    Examples

    Markup and runtime examples for columnCount:

    HTML:

    <smart-color-panel column-count="5"></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.columnCount = 3;

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const columnCount = el.columnCount;

    disabledDetermines whether the element is interactive or not. When set to 'disabled', the element becomes unresponsive to user interactions such as clicks, typing, or selection, and may also appear visually distinct (e.g., grayed out) to indicate its inactive state. When enabled, the element behaves normally and accepts user input.boolean

    Determines whether the element is interactive or not. When set to 'disabled', the element becomes unresponsive to user interactions such as clicks, typing, or selection, and may also appear visually distinct (e.g., grayed out) to indicate its inactive state. When enabled, the element behaves normally and accepts user input.

    Default value

    false

    Examples

    Markup and runtime examples for disabled:

    HTML attribute:

    <smart-color-panel disabled></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.disabled = false;

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const disabled = el.disabled;

    disableUndoBy default, clicking on the color panel's preview container will revert the selected color to its previous value, effectively undoing any recent changes. Setting the 'disableUndo' option disables this undo functionality, so clicking the preview container will no longer restore the previous color value.boolean

    By default, clicking on the color panel's preview container will revert the selected color to its previous value, effectively undoing any recent changes. Setting the 'disableUndo' option disables this undo functionality, so clicking the preview container will no longer restore the previous color value.

    Default value

    false

    Examples

    Markup and runtime examples for disableUndo:

    HTML attribute:

    <smart-color-panel disable-undo></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.disableUndo = false;

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const disableUndo = el.disableUndo;

    displayModeSpecifies the color palette to be used and defines how these colors are arranged or distributed within the user interface or visual component."default" | "grid" | "palette" | "radial" | "hexagonal" | "spectrumGrid" | "materialGrid"

    Specifies the color palette to be used and defines how these colors are arranged or distributed within the user interface or visual component.

    Allowed Values

    • "default" - Represents a grid of all standart colors that are most frequently used.
    • "grid" - Represents a predefined grid of colors or a custom grid of colors. The palette property determines the colors that will be loaded in the grid. If palette mode is set to custom it is possible to completely customize the colors of the grid via the paletteColors property.
    • "palette" - Represents a classic palette view if colors that allows to select a specific color. Additionaly input fields are available to enter the RGBA values if necessary.
    • "radial" - Similar to 'palette' mode but has a radial palette. In this mode the colors vary from the center to the edges.
    • "hexagonal" - A hexagon is used to display the colors.
    • "spectrumGrid" - Similar to 'grid' mode the spectrum of the colors determined by the palette property will be displayed. Palette mode custom allows to define a number of custom colors equal to the columnCount property that will be dispalyed below the grid. The custom colors are defined via the paletteColors property.
    • "materialGrid" - A non-customizable grid of colors that offers a complete list of all material colors along with their names.

    Default value

    "default"
    Try a demo showcasing the displayMode property.

    Examples

    Markup and runtime examples for displayMode:

    HTML:

    <smart-color-panel display-mode="radial"></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.displayMode = "hexagonal";

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const displayMode = el.displayMode;

    editAlphaChannelEnables users to adjust the alpha (transparency) level of colors using an editor or slider. This functionality is available in the following display modes: 'palette', 'radial', and 'hexagonal', allowing for precise transparency control while selecting colors in these layouts.boolean

    Enables users to adjust the alpha (transparency) level of colors using an editor or slider. This functionality is available in the following display modes: 'palette', 'radial', and 'hexagonal', allowing for precise transparency control while selecting colors in these layouts.

    Default value

    false
    Try a demo showcasing the editAlphaChannel property.

    Examples

    Markup and runtime examples for editAlphaChannel:

    HTML attribute:

    <smart-color-panel edit-alpha-channel></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.editAlphaChannel = false;

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const editAlphaChannel = el.editAlphaChannel;

    enableCustomColorsEnables users to choose a custom color through an editor popup interface. This functionality extends custom color selection to modes where it is not included by default, such as 'grid', 'default', or 'spectrum grid', providing flexibility and a consistent color selection experience across different modes.boolean

    Enables users to choose a custom color through an editor popup interface. This functionality extends custom color selection to modes where it is not included by default, such as 'grid', 'default', or 'spectrum grid', providing flexibility and a consistent color selection experience across different modes.

    Default value

    false
    Try a demo showcasing the enableCustomColors property.

    Examples

    Markup and runtime examples for enableCustomColors:

    HTML attribute:

    <smart-color-panel enable-custom-colors></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.enableCustomColors = false;

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const enableCustomColors = el.enableCustomColors;

    gridShadeColorsDefines an array of color values to be used as shade colors in the section that appears when displayMode is set to 'default'. These colors determine the visual shading or accent colors applied within that display mode, allowing for customization of the section’s appearance.string[] | null

    Defines an array of color values to be used as shade colors in the section that appears when displayMode is set to 'default'. These colors determine the visual shading or accent colors applied within that display mode, allowing for customization of the section’s appearance.

    Examples

    Markup and runtime examples for gridShadeColors:

    HTML:

    <smart-color-panel grid-shade-colors="['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe']"></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.gridShadeColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const gridShadeColors = el.gridShadeColors;

    gridStandardColorsSpecifies an array of standard colors that will be applied in the corresponding section when the displayMode is set to 'default'. These colors determine the default color palette for that section's visual elements.[] | null

    Specifies an array of standard colors that will be applied in the corresponding section when the displayMode is set to 'default'. These colors determine the default color palette for that section's visual elements.

    Examples

    Markup and runtime examples for gridStandardColors:

    HTML:

    <smart-color-panel grid-standard-colors="['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe']"></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.gridStandardColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const gridStandardColors = el.gridStandardColors;

    gridThemeColorsSpecifies an array of color values to be used as the theme colors for the relevant section when displayMode is set to 'default'. These colors will determine the visual appearance and styling of the section under the default display mode.string[] | null

    Specifies an array of color values to be used as the theme colors for the relevant section when displayMode is set to 'default'. These colors will determine the visual appearance and styling of the section under the default display mode.

    Examples

    Markup and runtime examples for gridThemeColors:

    HTML:

    <smart-color-panel grid-theme-colors="['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe']"></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.gridThemeColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const gridThemeColors = el.gridThemeColors;

    hideAlphaEditorControls the visibility of the alpha editor, which is a UI input for adjusting the opacity (alpha value) of the selected color. The alpha editor is available in the 'radial', 'palette', and 'hexagonal' modes, and is displayed by default as long as there is enough space in the interface. Enabling this option will hide the alpha editor from view, preventing users from modifying color opacity directly.boolean

    Controls the visibility of the alpha editor, which is a UI input for adjusting the opacity (alpha value) of the selected color. The alpha editor is available in the 'radial', 'palette', and 'hexagonal' modes, and is displayed by default as long as there is enough space in the interface. Enabling this option will hide the alpha editor from view, preventing users from modifying color opacity directly.

    Default value

    false
    Try a demo showcasing the hideAlphaEditor property.

    Examples

    Markup and runtime examples for hideAlphaEditor:

    HTML attribute:

    <smart-color-panel hide-alpha-editor></smart-color-panel>

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-color-panel');
el.hideAlphaEditor = false;

    Read the current value:

    const el = document.querySelector('smart-color-panel');
const hideAlphaEditor = el.hideAlphaEditor;

    hideContentToFitSpecifies the priority for hiding color editors when there is insufficient space to display all of them. By default, color editors are shown only in 'palette', 'radial', and 'hexagonal' display modes. Use this property to control the order in which editors are hidden, ensuring that the most important editors remain visible for as long as possible as space becomes limited. This allows for a customized and responsive user interface that adapts to varying display sizes. Click for more details. Property object's options:
      string[]

      Specifies the priority for hiding color editors when there is insufficient space to display all of them. By default, color editors are shown only in 'palette', 'radial', and 'hexagonal' display modes. Use this property to control the order in which editors are hidden, ensuring that the most important editors remain visible for as long as possible as space becomes limited. This allows for a customized and responsive user interface that adapts to varying display sizes.

      Examples

      Markup and runtime examples for hideContentToFit:

      HTML:

      <smart-color-panel hide-content-to-fit="[ 'HEX', 'RGB', 'alpha', 'previewContainer' ]"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.hideContentToFit = [ 'RGB', 'HEX', 'previewContainer', 'alpha' ];

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const hideContentToFit = el.hideContentToFit;

      hideHEXEditorThe HEX editor is an input field that allows users to enter or view a color's value in hexadecimal format (e.g., #FF5733). By default, the HEX editor is displayed in the UI. If the 'hideHEXeditor' property is set to true, this input will be hidden from view. Note: The 'hideRGBeditor' property controls the visibility of the separate RGB editor, not the HEX editor.boolean

      The HEX editor is an input field that allows users to enter or view a color's value in hexadecimal format (e.g., #FF5733). By default, the HEX editor is displayed in the UI. If the 'hideHEXeditor' property is set to true, this input will be hidden from view. Note: The 'hideRGBeditor' property controls the visibility of the separate RGB editor, not the HEX editor.

      Default value

      false
      Try a demo showcasing the hideHEXEditor property.

      Examples

      Markup and runtime examples for hideHEXEditor:

      HTML attribute:

      <smart-color-panel hide-h-e-x-editor></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.hideHEXEditor = false;

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const hideHEXEditor = el.hideHEXEditor;

      hidePreviewContainerConceals the preview container, which displays the currently selected value in the 'palette', 'radial', and 'hexagonal' display modes. When this option is enabled, users will not see the visual representation of their selection within the interface.boolean

      Conceals the preview container, which displays the currently selected value in the 'palette', 'radial', and 'hexagonal' display modes. When this option is enabled, users will not see the visual representation of their selection within the interface.

      Default value

      false
      Try a demo showcasing the hidePreviewContainer property.

      Examples

      Markup and runtime examples for hidePreviewContainer:

      HTML attribute:

      <smart-color-panel hide-preview-container></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.hidePreviewContainer = false;

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const hidePreviewContainer = el.hidePreviewContainer;

      hideRGBEditorHides the RGB editor interface. This editor consists of three individual input fields, each allowing users to directly adjust the Red, Green, and Blue components of a color independently. Disabling this option will prevent users from modifying these color channels through the RGB editor.boolean

      Hides the RGB editor interface. This editor consists of three individual input fields, each allowing users to directly adjust the Red, Green, and Blue components of a color independently. Disabling this option will prevent users from modifying these color channels through the RGB editor.

      Default value

      false
      Try a demo showcasing the hideRGBEditor property.

      Examples

      Markup and runtime examples for hideRGBEditor:

      HTML attribute:

      <smart-color-panel hide-r-g-b-editor></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.hideRGBEditor = false;

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const hideRGBEditor = el.hideRGBEditor;

      invertedInverts the color scheme of the interface when operating in the 'spectrumGrid', 'hexagonal', or 'radial' display modes, producing a visually reversed version of the original colors for enhanced contrast or alternative visual effects.boolean

      Inverts the color scheme of the interface when operating in the 'spectrumGrid', 'hexagonal', or 'radial' display modes, producing a visually reversed version of the original colors for enhanced contrast or alternative visual effects.

      Default value

      false
      Try a demo showcasing the inverted property.

      Examples

      Markup and runtime examples for inverted:

      HTML attribute:

      <smart-color-panel inverted></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.inverted = false;

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const inverted = el.inverted;

      localeDefines or retrieves the current language setting for the application. This property works together with the messages property, allowing you to display localized content based on the selected language. Setting this value determines which language-specific message set from messages will be used throughout the interface.string

      Defines or retrieves the current language setting for the application. This property works together with the messages property, allowing you to display localized content based on the selected language. Setting this value determines which language-specific message set from messages will be used throughout the interface.

      Default value

      "en"
      Try a demo showcasing the locale property.

      Examples

      Markup and runtime examples for locale:

      HTML:

      <smart-color-panel locale="de"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.locale = "fr";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const locale = el.locale;

      localizeFormatFunctionA callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, translate, or personalize message strings before they are displayed in your application.function | null

      A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, translate, or personalize message strings before they are displayed in your application.

      Examples

      Markup and runtime examples for localizeFormatFunction:

      HTML:

      <smart-color-panel localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const localizeFormatFunction = el.localizeFormatFunction;

      messagesSpecifies or retrieves an object that defines the text strings used within the widget, allowing for easy localization of the widget's interface. This property works together with the locale property to support multiple languages by providing translated strings as needed. Use this to customize the widget's displayed text based on the selected locale.object

      Specifies or retrieves an object that defines the text strings used within the widget, allowing for easy localization of the widget's interface. This property works together with the locale property to support multiple languages by providing translated strings as needed. Use this to customize the widget's displayed text based on the selected locale.

      Default value




      "en": {

      "propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

      "propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: '{{actualValue}}', Expected value: '{{value}}'!",

      "propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: '{{actualType}}', Expected type: '{{type}}'!",

      "methodInvalidValueType": "Invalid '{{name}}' method argument value type! Actual type: '{{actualType}}', Expected type: '{{type}}' for argument with index: '{{argumentIndex}}'!",

      "methodInvalidArgumentsCount": "Invalid '{{name}}' method arguments count! Actual arguments count: '{{actualArgumentsCount}}', Expected at least: '{{argumentsCount}}' argument(s)!",

      "methodInvalidReturnType": "Invalid '{{name}}' method return type! Actual type: '{{actualType}}', Expected type: '{{type}}'!",

      "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

      "moduleUndefined": "Module is undefined.",

      "missingReference": "{{elementType}}: Missing reference to '{{files}}'.",

      "htmlTemplateNotSuported": "{{elementType}}: Web Browser doesn't support HTMLTemplate elements.",

      "invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

      "invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}.",

      "redPrefix": "R:",

      "greenPrefix": "G:",

      "bluePrefix": "B:",

      "hexPrefix": "#:",

      "alphaPrefix": "Alpha:",

      "ok": "OK",

      "cancel": "CANCEL",

      "customColor": "CUSTOM COLOR ..."

      }

      Try a demo showcasing the messages property.

      Examples

      Markup and runtime examples for messages:

      HTML:

      <smart-color-panel messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","methodInvalidValueType":"Invalid '{{name}}' method argument value type! Actual type: '{{actualType}}', Expected type: '{{type}}' for argument with index: '{{argumentIndex}}'!","methodInvalidArgumentsCount":"Invalid '{{name}}' method arguments count! Actual arguments count: '{{actualArgumentsCount}}', Expected at least: '{{argumentsCount}}' argument(s)!","methodInvalidReturnType":"Invalid '{{name}}' method return type! Actual type: '{{actualType}}', Expected type: '{{type}}'!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlende Bezugnahme auf {{file}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}.","redPrefix":"R:","greenPrefix":"G:","bluePrefix":"B:","hexPrefix":"#:","alphaPrefix":"Alpha:","ok":"OK","cancel":"STORNIEREN","customColor":"FREIWAEHLBARE FARBE ..."}}"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: '{{actualValue}}', Expected value: '{{value}}'!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: '{{actualType}}', Expected type: '{{type}}'!","methodInvalidValueType":"Invalid '{{name}}' method argument value type! Actual type: '{{actualType}}', Expected type: '{{type}}' for argument with index: '{{argumentIndex}}'!","methodInvalidArgumentsCount":"Invalid '{{name}}' method arguments count! Actual arguments count: '{{actualArgumentsCount}}', Expected at least: '{{argumentsCount}}' argument(s)!","methodInvalidReturnType":"Invalid '{{name}}' method return type! Actual type: '{{actualType}}', Expected type: '{{type}}'!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to '{{files}}'.","htmlTemplateNotSuported":"{{elementType}}: Web Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}.","redPrefix":"R:","greenPrefix":"G:","bluePrefix":"B:","hexPrefix":"#:","alphaPrefix":"Alpha:","ok":"OK","cancel":"CANCEL","customColor":"CUSTOM COLOR ..."}};

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const messages = el.messages;

      nameSets or retrieves the value of the element's name attribute. This attribute assigns a unique identifier to the element within an HTML form, allowing its value to be included as a key when the form is submitted to a server. The name attribute is essential for processing form data, as the server uses these names to identify and handle the values submitted by users.string

      Sets or retrieves the value of the element's name attribute. This attribute assigns a unique identifier to the element within an HTML form, allowing its value to be included as a key when the form is submitted to a server. The name attribute is essential for processing form data, as the server uses these names to identify and handle the values submitted by users.

      Default value

      ""
      Try a demo showcasing the name property.

      Examples

      Markup and runtime examples for name:

      HTML:

      <smart-color-panel name="colorPanel1"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.name = "colorPanel2";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const name = el.name;

      paletteSpecifies the color palette used for rendering the color options within the 'spectrumGrid', 'grid', and 'hexagonal' display modes. This setting controls which color values are shown to users when these modes are active, directly affecting the available color choices in the UI."default" | "gray" | "red" | "green" | "blue" | "custom"

      Specifies the color palette used for rendering the color options within the 'spectrumGrid', 'grid', and 'hexagonal' display modes. This setting controls which color values are shown to users when these modes are active, directly affecting the available color choices in the UI.

      Allowed Values

      • "default" - The default colors are displayed inside the element.
      • "gray" - The spectrum of the gray color is displayed.
      • "red" - The spectrum of the red color is displayed.
      • "green" - The spectrum of the green color is displayed.
      • "blue" - The spectrum of the blue color is displayed.
      • "custom" - A custom array of colors is displayed inside the element. The array of colors is defined via the paletteColors property. Not applicable to displayMode 'hexagonal'

      Default value

      "default"
      Try a demo showcasing the palette property.

      Examples

      Markup and runtime examples for palette:

      HTML:

      <smart-color-panel palette="gray"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.palette = "red";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const palette = el.palette;

      paletteColorsSpecifies an array of colors to create a custom color palette. When the palette property is set to custom, this palette is available for selection in the 'grid' and 'spectrum grid' display modes. The array can contain either color strings (such as HEX, RGB, or RGBA formats) or objects that define valid color values. This allows for flexible customization of the color selection options shown to users.{name: string. value: string}[] | string[] | null

      Specifies an array of colors to create a custom color palette. When the palette property is set to custom, this palette is available for selection in the 'grid' and 'spectrum grid' display modes. The array can contain either color strings (such as HEX, RGB, or RGBA formats) or objects that define valid color values. This allows for flexible customization of the color selection options shown to users.

      Try a demo showcasing the paletteColors property.

      Examples

      Markup and runtime examples for paletteColors:

      HTML:

      <smart-color-panel palette-colors="[{ "name": "red", "value": "#e6194b" }, { "name": "green", "value": "#3cb44b" }, { "name": "yellow", "value": "#ffe119" }]"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.paletteColors = ["#e6194b", "#3cb44b", "#3cb44b"];

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const paletteColors = el.paletteColors;

      paletteCustomColorsSpecifies an array of colors that make up a predefined custom color palette. This palette is available for display modes 'grid', 'default', and 'spectrum grid'. When enabled via the enableCustomColors property, these custom colors appear at the bottom of the color grid, positioned below the button that allows users to select a custom color. If enableCustomColors is set to false, the custom color palette will not be visible to users.string[] | null

      Specifies an array of colors that make up a predefined custom color palette. This palette is available for display modes 'grid', 'default', and 'spectrum grid'. When enabled via the enableCustomColors property, these custom colors appear at the bottom of the color grid, positioned below the button that allows users to select a custom color. If enableCustomColors is set to false, the custom color palette will not be visible to users.

      Try a demo showcasing the paletteCustomColors property.

      Examples

      Markup and runtime examples for paletteCustomColors:

      HTML:

      <smart-color-panel palette-custom-colors="["#e6194b" , "#3cb44b" , "#ffe119"]"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.paletteCustomColors = ["#808080", "#ffd8b1", "#aaffc3"];

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const paletteCustomColors = el.paletteCustomColors;

      readonlyWhen the element has the "readonly" attribute, users can view its value but cannot modify, edit, or interact with its content in any way. The element remains visible and selectable, but user input and changes are disabled.boolean

      When the element has the "readonly" attribute, users can view its value but cannot modify, edit, or interact with its content in any way. The element remains visible and selectable, but user input and changes are disabled.

      Default value

      false

      Examples

      Markup and runtime examples for readonly:

      HTML attribute:

      <smart-color-panel readonly></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.readonly = true;

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const readonly = el.readonly;

      rightToLeftDetermines or retrieves whether the element’s text direction is set to right-to-left (RTL), enabling proper alignment and layout for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.boolean

      Determines or retrieves whether the element’s text direction is set to right-to-left (RTL), enabling proper alignment and layout for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.

      Default value

      false
      Try a demo showcasing the rightToLeft property.

      Examples

      Markup and runtime examples for rightToLeft:

      HTML attribute:

      <smart-color-panel right-to-left></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.rightToLeft = true;

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const rightToLeft = el.rightToLeft;

      themeSpecifies the theme to be applied to the element, which controls its overall appearance—including colors, fonts, and style variations—ensuring visual consistency with the rest of the user interface.string

      Specifies the theme to be applied to the element, which controls its overall appearance—including colors, fonts, and style variations—ensuring visual consistency with the rest of the user interface.

      Default value

      ""

      Examples

      Markup and runtime examples for theme:

      HTML:

      <smart-color-panel theme="blue"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.theme = "red";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const theme = el.theme;

      tooltipDisplayModeSpecifies the format and content used to display the color’s value in the tooltip when a user hovers over it. This setting controls how the color information (such as hexadecimal, RGB, or color name) appears in the tooltip for better clarity and user experience."none" | "rgb" | "rgba" | "hex"

      Specifies the format and content used to display the color’s value in the tooltip when a user hovers over it. This setting controls how the color information (such as hexadecimal, RGB, or color name) appears in the tooltip for better clarity and user experience.

      Allowed Values

      • "none" - The tooltip is never shown.
      • "rgb" - The tooltip displays the color in RGB format.
      • "rgba" - The tooltip displays the color in RGBA format ( includes the opacity of the color )
      • "hex" - The tooltip displays the color in HEX format.

      Default value

      "hex"
      Try a demo showcasing the tooltipDisplayMode property.

      Examples

      Markup and runtime examples for tooltipDisplayMode:

      HTML:

      <smart-color-panel tooltip-display-mode="rgb"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.tooltipDisplayMode = "hex";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const tooltipDisplayMode = el.tooltipDisplayMode;

      unfocusableWhen set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or other focus-related interactions.boolean

      When set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or other focus-related interactions.

      Default value

      false

      Examples

      Markup and runtime examples for unfocusable:

      HTML attribute:

      <smart-color-panel unfocusable></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.unfocusable = false;

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const unfocusable = el.unfocusable;

      unlockKeySets or retrieves the 'unlockKey' property, a unique key required to activate or grant access to the product. Assign a valid key string to unlock the product, or get the current key in use.string

      Sets or retrieves the 'unlockKey' property, a unique key required to activate or grant access to the product. Assign a valid key string to unlock the product, or get the current key in use.

      Default value

      ""

      Examples

      Markup and runtime examples for unlockKey:

      HTML:

      <smart-color-panel unlock-key=""></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.unlockKey = "1111-2222-3333-4444-5555";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const unlockKey = el.unlockKey;

      valueRepresents the currently selected color value, typically formatted as a hexadecimal code (e.g., "#FF5733"), RGB value, or other standard color representation. This value is updated whenever the user selects a new color and can be used to apply the chosen color to UI elements or store user preferences.string

      Represents the currently selected color value, typically formatted as a hexadecimal code (e.g., "#FF5733"), RGB value, or other standard color representation. This value is updated whenever the user selects a new color and can be used to apply the chosen color to UI elements or store user preferences.

      Default value

      "null"
      Try a demo showcasing the value property.

      Examples

      Markup and runtime examples for value:

      HTML:

      <smart-color-panel value="#ff2600"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.value = "rgba(166, 255, 0, 1)";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const value = el.value;

      valueFormatSpecifies the format in which the color value will be represented—either HEX, RGB, or RGBA. By default, the color format adapts automatically based on the selected displayMode."default" | "rgb" | "rgba" | "hex"

      Specifies the format in which the color value will be represented—either HEX, RGB, or RGBA. By default, the color format adapts automatically based on the selected displayMode.

      Allowed Values

      • "default" - The value is presented depending on the displayMode.
      • "rgb" - The value is presented as RGB color.
      • "rgba" - The value is presented as RGBA color.
      • "hex" - The value is presented as HEX color.

      Default value

      "default"

      Examples

      Markup and runtime examples for valueFormat:

      HTML:

      <smart-color-panel value-format="rgba"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.valueFormat = "rgb";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const valueFormat = el.valueFormat;

      valueMemberSpecifies which object property should be used as the color value when paletteColors is an array of objects. This option is useful when your color data is structured as objects and the property representing the color value does not use the default key name 'value'. Set this attribute to the name of the property that contains the color value within each object.string

      Specifies which object property should be used as the color value when paletteColors is an array of objects. This option is useful when your color data is structured as objects and the property representing the color value does not use the default key name 'value'. Set this attribute to the name of the property that contains the color value within each object.

      Default value

      "null"

      Examples

      Markup and runtime examples for valueMember:

      HTML:

      <smart-color-panel value-member="value"></smart-color-panel>

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-color-panel');
el.valueMember = "colorCode";

      Read the current value:

      const el = document.querySelector('smart-color-panel');
const valueMember = el.valueMember;

      Events

      cancelButtonClickThis event is triggered when the user clicks the "Cancel" button. Note: The "Cancel" button is displayed only when the applyValueMode property is set to useButtons. If applyValueMode has a different value, the "Cancel" button will not appear, and this event will not be triggered.CustomEvent

      This event is triggered when the user clicks the "Cancel" button. Note: The "Cancel" button is displayed only when the applyValueMode property is set to useButtons. If applyValueMode has a different value, the "Cancel" button will not appear, and this event will not be triggered.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onCancelButtonClick

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Examples

      Listen for cancelButtonClick using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-color-panel')?.addEventListener('cancelButtonClick', (event) => {
	// event handling code goes here.
})

      changeThis event is triggered whenever the selected color value is modified by the user. It occurs both when the user chooses a new color or adjusts the current color selection, allowing developers to respond dynamically to changes in color input.CustomEvent

      This event is triggered whenever the selected color value is modified by the user. It occurs both when the user chooses a new color or adjusts the current color selection, allowing developers to respond dynamically to changes in color input.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onChange

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.oldValue - The previously selected color.
      ev.detail.value - The new selected color.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Try a demo showcasing the change event.

      Examples

      Listen for change using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-color-panel')?.addEventListener('change', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

      customColorSelectionThis event is triggered whenever the custom color selection view is either opened or closed by the user. Note that the custom color selection view is only accessible when the enableCustomColors property is set to true. This event allows you to perform actions in response to users interacting with the custom color picker interface.CustomEvent

      This event is triggered whenever the custom color selection view is either opened or closed by the user. Note that the custom color selection view is only accessible when the enableCustomColors property is set to true. This event allows you to perform actions in response to users interacting with the custom color picker interface.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onCustomColorSelection

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.value - A boolean that indicates whether the custom color view is shown or not.

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Examples

      Listen for customColorSelection using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-color-panel')?.addEventListener('customColorSelection', (event) => {
    const detail = event.detail,
        value = detail.value;

	// event handling code goes here.
})

      okButtonClickThis event is triggered when the "OK" button is clicked by the user. Note that the "OK" button appears in the UI only if the applyValueMode property is set to useButtons. If applyValueMode has a different value, the "OK" button will not be displayed, and this event will not be triggered.CustomEvent

      This event is triggered when the "OK" button is clicked by the user. Note that the "OK" button appears in the UI only if the applyValueMode property is set to useButtons. If applyValueMode has a different value, the "OK" button will not be displayed, and this event will not be triggered.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onOkButtonClick

      Arguments

      evCustomEvent

      Methods

      isDefaultPrevented

      Returns true if the event was prevented by any of its subscribers.

      Returns

      boolean true if the default action was prevented. Otherwise, returns false.

      preventDefault

      The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

      stopPropagation

      The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

      Examples

      Listen for okButtonClick using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

      document.querySelector('smart-color-panel')?.addEventListener('okButtonClick', (event) => {
	// event handling code goes here.
})

      Methods

      CSS Variables

      --smart-color-panel-default-widthvar()

      Default value

      "auto"

      smartColorPanel default width

      --smart-color-panel-default-heightvar()

      Default value

      "auto"

      smartColorPanel default height

      --smart-color-panel-palette-sizevar()

      Default value

      "300px"

      smartColorPanel palette size

      --smart-color-panel-grid-mode-item-sizevar()

      Default value

      "20px"

      smartColorPanel item size

      --smart-color-panel-grid-mode-column-countvar()

      Default value

      "8"

      smartColorPanel column count

      --smart-color-panel-grid-mode-columns-gapvar()

      Default value

      "1px"

      smartColorPanel column gap size

      --smart-color-panel-brightnessvar()

      Default value

      "0"

      smartColorPanel brightness

      --smart-color-panel-default-mode-sections-gapvar()

      Default value

      "8px"

      smartColorPanel gap size in default mode

      --smart-color-panel-palette-widthvar()

      Default value

      "var(--smart-color-panel-palette-size)"

      smartColorPanel palette width

      --smart-color-panel-palette-heightvar()

      Default value

      "var(--smart-color-panel-palette-size)"

      smartColorPanel palette height

      --smart-color-panel-alpha-channel-colorvar()

      Default value

      "white"

      Used as a default color for the Alpha Scale