color-helper Component Documentation

Color Helper Component

The Color Helper component displays color swatches with information and copy functionality. It helps designers and developers use colors consistently by providing easy access to color values in different formats.

Usage

<qds-color-helper
  color="#445E89"
  variable-name="brand-blue"
  name="Brand Blue"
  description="Primary brand color used for buttons and interactive elements">
</qds-color-helper>

Attributes

Name	Type	Default	Description
`color`	String	`#445E89`	The color to display (hex, rgb, hsl, or CSS variable)
`variable-name`	String	`''`	The CSS variable name (optional)
`name`	String	`'Color'`	Display name for the color
`description`	String	`'Color description'`	Description of when to use the color

CSS Parts

The component’s shadow DOM structure can be styled using CSS ::part selectors:

Part	Description
`container`	The container element
`swatch`	The color swatch element
`info`	The information section element
`toolbar`	The toolbar with copy buttons

Events

Event	Detail	Description
`copied`	`{ color, name, format, value }`	Fired when a color value is copied to clipboard

Methods

These methods are mainly for internal use:

Method	Description
`_getHexValue()`	Gets the color in hex format
`_getRgbValue()`	Gets the color in RGB format
`_getCssVarValue()`	Gets the color as a CSS variable

Styling

The component has default styling but can be customized using CSS parts:

qds-color-helper::part(container) {
  /* Custom styles for the container */
}

qds-color-helper::part(swatch) {
  /* Custom styles for the color swatch */
}

Accessibility

Color information is visible as text for screen readers
Interactive elements have appropriate roles and labels
Copy buttons provide visual feedback after interaction

Browser Support

Works in all modern browsers:

Chrome
Firefox
Safari
Edge

Examples

Basic Example

<qds-color-helper
  color="#445E89"
  variable-name="brand-blue"
  name="Brand Blue"
  description="Primary brand color used for buttons">
</qds-color-helper>

CSS Variable Example

<qds-color-helper
  color="var(--q-primary-color)"
  variable-name="q-primary-color"
  name="Primary Color"
  description="Main color used throughout the application">
</qds-color-helper>

Listening for Copy Events

const colorHelper = document.querySelector('qds-color-helper');
colorHelper.addEventListener('copied', (event) => {
  console.log(`Copied ${event.detail.name} as ${event.detail.format}: ${event.detail.value}`);
});