ColorPanel JAVASCRIPT UI Component API

ColorPanel Javascript API

Class

ColorPanel

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

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"

Example

Set the animation property.

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

Set the animation property by using the HTML Element's instance.

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

 colorpanel.animation = 'simple';

Get the animation property.

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

 let animation = colorpanel.animation;

applyValueMode"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.

Example

Set the applyValueMode property.

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

Set the applyValueMode property by using the HTML Element's instance.

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

 colorpanel.applyValueMode = 'instantly';

Get the applyValueMode property.

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

 let applyValueMode = colorpanel.applyValueMode;

columnCountnumber

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

Try a demo showcasing the columnCount property.

Example

Set the columnCount property.

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

Set the columnCount property by using the HTML Element's instance.

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

 colorpanel.columnCount = 3;

Get the columnCount property.

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

 let columnCount = colorpanel.columnCount;

disabledboolean

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

Example

Set the disabled property.

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

Set the disabled property by using the HTML Element's instance.

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

 colorpanel.disabled = false;

Get the disabled property.

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

 let disabled = colorpanel.disabled;

displayMode"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"

Example

Set the displayMode property.

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

Set the displayMode property by using the HTML Element's instance.

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

 colorpanel.displayMode = 'hexagonal';

Get the displayMode property.

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

 let displayMode = colorpanel.displayMode;

disableUndoboolean

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

Example

Set the disableUndo property.

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

Set the disableUndo property by using the HTML Element's instance.

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

 colorpanel.disableUndo = false;

Get the disableUndo property.

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

 let disableUndo = colorpanel.disableUndo;

editAlphaChannelboolean

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.

Example

Set the editAlphaChannel property.

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

Set the editAlphaChannel property by using the HTML Element's instance.

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

 colorpanel.editAlphaChannel = false;

Get the editAlphaChannel property.

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

 let editAlphaChannel = colorpanel.editAlphaChannel;

enableCustomColorsboolean

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.

Example

Set the enableCustomColors property.

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

Set the enableCustomColors property by using the HTML Element's instance.

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

 colorpanel.enableCustomColors = false;

Get the enableCustomColors property.

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

 let enableCustomColors = colorpanel.enableCustomColors;

gridThemeColorsstring[] | 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.

Example

Set the gridThemeColors property.

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

Set the gridThemeColors property by using the HTML Element's instance.

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

 colorpanel.gridThemeColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridThemeColors property.

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

 let gridThemeColors = colorpanel.gridThemeColors;

gridShadeColorsstring[] | 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.

Example

Set the gridShadeColors property.

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

Set the gridShadeColors property by using the HTML Element's instance.

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

 colorpanel.gridShadeColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridShadeColors property.

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

 let gridShadeColors = colorpanel.gridShadeColors;

gridStandardColors[] | 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.

Example

Set the gridStandardColors property.

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

Set the gridStandardColors property by using the HTML Element's instance.

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

 colorpanel.gridStandardColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridStandardColors property.

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

 let gridStandardColors = colorpanel.gridStandardColors;

hideAlphaEditorboolean

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.

Example

Set the hideAlphaEditor property.

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

Set the hideAlphaEditor property by using the HTML Element's instance.

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

 colorpanel.hideAlphaEditor = false;

Get the hideAlphaEditor property.

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

 let hideAlphaEditor = colorpanel.hideAlphaEditor;

hideContentToFitstring[]

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.

Example

Set the hideContentToFit property.

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

Set the hideContentToFit property by using the HTML Element's instance.

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

 colorpanel.hideContentToFit = [ 'RGB', 'HEX', 'previewContainer', 'alpha' ];

Get the hideContentToFit property.

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

 let hideContentToFit = colorpanel.hideContentToFit;

hideHEXEditorboolean

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.

Example

Set the hideHEXEditor property.

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

Set the hideHEXEditor property by using the HTML Element's instance.

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

 colorpanel.hideHEXEditor = false;

Get the hideHEXEditor property.

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

 let hideHEXEditor = colorpanel.hideHEXEditor;

hidePreviewContainerboolean

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.

Example

Set the hidePreviewContainer property.

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

Set the hidePreviewContainer property by using the HTML Element's instance.

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

 colorpanel.hidePreviewContainer = false;

Get the hidePreviewContainer property.

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

 let hidePreviewContainer = colorpanel.hidePreviewContainer;

hideRGBEditorboolean

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.

Example

Set the hideRGBEditor property.

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

Set the hideRGBEditor property by using the HTML Element's instance.

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

 colorpanel.hideRGBEditor = false;

Get the hideRGBEditor property.

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

 let hideRGBEditor = colorpanel.hideRGBEditor;

invertedboolean

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.

Example

Set the inverted property.

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

Set the inverted property by using the HTML Element's instance.

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

 colorpanel.inverted = false;

Get the inverted property.

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

 let inverted = colorpanel.inverted;

unlockKeystring

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

Example

Set the unlockKey property.

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

Set the unlockKey property by using the HTML Element's instance.

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

 colorpanel.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property.

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

 let unlockKey = colorpanel.unlockKey;

localestring

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.

Example

Set the locale property.

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

Set the locale property by using the HTML Element's instance.

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

 colorpanel.locale = 'fr';

Get the locale property.

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

 let locale = colorpanel.locale;

localizeFormatFunctionfunction | 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.

Example

Set the localizeFormatFunction property.

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

Set the localizeFormatFunction property by using the HTML Element's instance.

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

 colorpanel.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = colorpanel.localizeFormatFunction;

messagesobject

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 ..."

}

Example

Set the messages property.

 <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>

Set the messages property by using the HTML Element's instance.

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

 colorpanel.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 ..."}};

Get the messages property.

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

 let messages = colorpanel.messages;

namestring

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

Example

Set the name property.

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

Set the name property by using the HTML Element's instance.

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

 colorpanel.name = 'colorPanel2';

Get the name property.

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

 let name = colorpanel.name;

palette"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.

Example

Set the palette property.

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

Set the palette property by using the HTML Element's instance.

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

 colorpanel.palette = 'red';

Get the palette property.

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

 let palette = colorpanel.palette;

paletteColors{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.

Example

Set the paletteColors property.

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

Set the paletteColors property by using the HTML Element's instance.

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

 colorpanel.paletteColors = ["#e6194b", "#3cb44b", "#3cb44b"];

Get the paletteColors property.

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

 let paletteColors = colorpanel.paletteColors;

paletteCustomColorsstring[] | 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.

Example

Set the paletteCustomColors property.

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

Set the paletteCustomColors property by using the HTML Element's instance.

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

 colorpanel.paletteCustomColors = ["#808080", "#ffd8b1", "#aaffc3"];

Get the paletteCustomColors property.

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

 let paletteCustomColors = colorpanel.paletteCustomColors;

readonlyboolean

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

Example

Set the readonly property.

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

Set the readonly property by using the HTML Element's instance.

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

 colorpanel.readonly = true;

Get the readonly property.

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

 let readonly = colorpanel.readonly;

rightToLeftboolean

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.

Example

Set the rightToLeft property.

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

Set the rightToLeft property by using the HTML Element's instance.

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

 colorpanel.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = colorpanel.rightToLeft;

themestring

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

Example

Set the theme property.

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

Set the theme property by using the HTML Element's instance.

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

 colorpanel.theme = 'red';

Get the theme property.

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

 let theme = colorpanel.theme;

tooltipDisplayMode"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.

Example

Set the tooltipDisplayMode property.

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

Set the tooltipDisplayMode property by using the HTML Element's instance.

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

 colorpanel.tooltipDisplayMode = 'hex';

Get the tooltipDisplayMode property.

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

 let tooltipDisplayMode = colorpanel.tooltipDisplayMode;

valuestring

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.

Example

Set the value property.

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

Set the value property by using the HTML Element's instance.

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

 colorpanel.value = 'rgba(166, 255, 0, 1)';

Get the value property.

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

 let value = colorpanel.value;

valueFormat"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"

Example

Set the valueFormat property.

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

Set the valueFormat property by using the HTML Element's instance.

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

 colorpanel.valueFormat = 'rgb';

Get the valueFormat property.

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

 let valueFormat = colorpanel.valueFormat;

valueMemberstring

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"

Example

Set the valueMember property.

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

Set the valueMember property by using the HTML Element's instance.

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

 colorpanel.valueMember = 'colorCode';

Get the valueMember property.

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

 let valueMember = colorpanel.valueMember;

unfocusableboolean

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

Example

Set the unfocusable property.

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

Set the unfocusable property by using the HTML Element's instance.

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

 colorpanel.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = colorpanel.unfocusable;

Events

changeCustomEvent

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.

Example

Set up the event handler of change event.

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

	// event handling code goes here.
})

cancelButtonClickCustomEvent

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.

Example

Set up the event handler of cancelButtonClick event.

const colorpanel = document.querySelector('smart-color-panel');
colorpanel.addEventListener('cancelButtonClick', function (event) {
	// event handling code goes here.
})

customColorSelectionCustomEvent

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.

Example

Set up the event handler of customColorSelection event.

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

	// event handling code goes here.
})

okButtonClickCustomEvent

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.

Example

Set up the event handler of okButtonClick event.

const colorpanel = document.querySelector('smart-color-panel');
colorpanel.addEventListener('okButtonClick', function (event) {
	// event handling code goes here.
})

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

ColorPanel Javascript API

Class

ColorPanel

ColorPanel

Selector

Properties

Events

Properties

animation"none" | "simple" | "advanced"

Default value

Example

applyValueMode"instantly" | "useButtons"

Default value

Example

columnCountnumber

Default value

Example

disabledboolean

Default value

Example

displayMode"default" | "grid" | "palette" | "radial" | "hexagonal" | "spectrumGrid" | "materialGrid"

Default value

Example

disableUndoboolean

Default value

Example

editAlphaChannelboolean

Default value

Example

enableCustomColorsboolean

Default value

Example

gridThemeColorsstring[] | null

Example

gridShadeColorsstring[] | null

Example

gridStandardColors[] | null

Example

hideAlphaEditorboolean

Default value

Example

hideContentToFitstring[]

Example

hideHEXEditorboolean

Default value

Example

hidePreviewContainerboolean

Default value

Example

hideRGBEditorboolean

Default value

Example

invertedboolean

Default value

Example

unlockKeystring

Default value

Example

localestring

Default value

Example

localizeFormatFunctionfunction | null

Example

messagesobject

Default value

Example

namestring

Default value

Example

palette"default" | "gray" | "red" | "green" | "blue" | "custom"

Default value

Example

paletteColors{name: string. value: string}[] | string[] | null

Example

paletteCustomColorsstring[] | null

Example

readonlyboolean