Color Picker

Color picker provides a customizable interface for selecting a color using a two-dimensional slider for luminosity and saturation and standard sliders for hue and opacity.

<quiet-color-picker 
  label="Select a color"
  value="#7578c5" 
  with-input
  with-alpha
  with-eye-dropper
  swatches="
    #09090b #71717a #ef4444 #f97316 
    #f59e0b #eab308 #84cc16 #22c55e 
    #10b981 #14b8a6 #06b6d4 #3b82f6 
    #6366f1 #a855f7 #d946ef #ec4899
  "
></quiet-color-picker>

Examples Jump to heading #

Labels Jump to heading #

Use the label attribute to provide an accessible label for the color picker. This won't be shown, but it will be read to assistive devices.

<quiet-color-picker label="Select a color"></quiet-color-picker>

Setting an initial value Jump to heading #

Use the value attribute to provide an initial value for the color picker. You can specify values in a variety of formats as well as CSS colors names. Parsing of color values is very permissive. See the TinyColor docs for more details on acceptable color formats.

<quiet-color-picker 
  label="Select a color"
  value="#71e0f3"
>
</quiet-color-picker>

Enabling alpha Jump to heading #

Add the with-alpha attribute to allow the user to adjust opacity.

<quiet-color-picker 
  label="Select a color"
  value="#ce238088" 
  with-alpha
></quiet-color-picker>

Enabling the eye dropper Jump to heading #

Add the with-eye-dropper attribute to show the eye dropper button, which allows the user to select a color from anywhere on the screen.

<quiet-color-picker 
  label="Select a color"
  with-eye-dropper
></quiet-color-picker>

Enabling the color input Jump to heading #

Add the with-input attribute to show the color input, a text field the user can type into.

<quiet-color-picker 
  label="Select a color"
  value="#4716ce" 
  with-input
></quiet-color-picker>

Showing swatches Jump to heading #

Set the swatches attribute to one or more space-delimited hex colors or CSS color names, e.g. lightblue, to show as preset swatches below the color picker. This is useful for providing users with access to recent colors or a predefined color palette.

<quiet-color-picker
  label="Select a color"
  swatches="
    #09090b #71717a #ef4444 #f97316 
    #f59e0b #eab308 #84cc16 #22c55e 
    #10b981 #14b8a6 #06b6d4 #3b82f6 
    #6366f1 #a855f7 #d946ef #ec4899
  "
></quiet-color-picker>

Setting the format Jump to heading #

Use the format attribute to set the format of the value. Valid options include hex (default), rgb, and hsl.

<quiet-color-picker 
  label="Select a color"
  value="#ffcc00"
  format="rgb"
  with-input
  id="color-picker__format"
></quiet-color-picker>

<script>
  const colorPicker = document.getElementById('color-picker__format');

  // This will output an RGB string when the color changes
  colorPicker.addEventListener('quiet-change', () => {
    console.log(colorPicker.value);
  });
</script>

Getting the value programmatically Jump to heading #

If you need to access the value in a specific format, use the getValueAs() method. You can pass rgb (default), hsl, hex, or hex8 to get a corresponding value.

For rgb, an object with { r, g, b, a } properties will be returned where r, g, and b range from 0-255 and a (alpha) ranges from 0–1. For hsl, an object with { h, s, l, a } properties will be returned where h ranges from 0–360 and s, l, and a range from 0–1. For hex and hex8, a string in the format of #RRGGBB and #RRGGBBAA will be returned, respectively.

<quiet-color-picker 
  label="Select a color"
  value="tomato"
  format="rgb"
  id="color-picker__object"
></quiet-color-picker>

<script>
  const colorPicker = document.getElementById('color-picker__object');

  // Outputs two objects when the color changes
  colorPicker.addEventListener('quiet-change', () => {
    console.log(
      colorPicker.getValueAs('rgb'),
      colorPicker.getValueAs('hex'),
      colorPicker.getValueAs('hex8'),
      colorPicker.getValueAs('hsl')
    );
  });
</script>

Changing the size Jump to heading #

Use the size attribute to change the color pickers's size.

<quiet-select label="Select a size" style="max-width: 18rem; margin-block-end: 2rem;">
  <option value="xs">Extra small</option>
  <option value="sm">Small</option>
  <option value="md">Medium</option>
  <option value="lg">Large</option>
  <option value="xl">Extra large</option>
</quiet-select>

<quiet-color-picker 
  size="xs" 
  label="Color picker sizes"
    swatches="
    #09090b #71717a #ef4444 #f97316 
    #f59e0b #eab308 #84cc16 #22c55e 
    #10b981 #14b8a6 #06b6d4 #3b82f6 
    #6366f1 #a855f7 #d946ef #ec4899
  "
  with-input
  with-alpha
  with-eye-dropper
  id="color-picker__size"
></quiet-color-picker>

<script>
  const colorPicker = document.getElementById('color-picker__size');
  const select = colorPicker.previousElementSibling;

  select.addEventListener('quiet-change', () => {
    colorPicker.size = select.value;
  });  
</script>

Disabling Jump to heading #

To disable a color picker, add the disabled attribute.

<quiet-color-picker 
  label="Select a color"
  disabled
  value="#6366f1"
  with-alpha 
  with-input
  with-eye-dropper
  swatches="
    #09090b #71717a #ef4444 #f97316 
    #f59e0b #eab308 #84cc16 #22c55e 
    #10b981 #14b8a6 #06b6d4 #3b82f6 
    #6366f1 #a855f7 #d946ef #ec4899  
  "
></quiet-color-picker>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/color-picker/color-picker.js';

import '@quietui/quiet/dist/components/color-picker/color-picker.js';

Properties Jump to heading #

Color Picker has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Methods Jump to heading #

Color Picker supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

Events Jump to heading #

Color Picker dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

CSS parts Jump to heading #

Color Picker exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Custom States Jump to heading #

Color Picker has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states

Dependencies Jump to heading #

Color Picker automatically imports the following elements. Sub-dependencies are also included in this list.

• <quiet-button>
• <quiet-copy>
• <quiet-icon>
• <quiet-slider>
• <quiet-spinner>
• <quiet-text-field>
• <quiet-tooltip>