Color Picker

<afp-color-picker>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A color picker component with format support (HEX, RGB, HSL, HSV).

<afp-color-picker></afp-color-picker>

<afp-color-picker></afp-color-picker>

<AfpColorPicker></AfpColorPicker>

<AfpColorPicker></AfpColorPicker>

Examples #

Shapes #

Use the shape attribute to change the shape of the color picker.

<div class="afp-cluster afp-align-center">
  <afp-color-picker shape="pill" value="#705d8b"></afp-color-picker>
  <afp-color-picker shape="rounded" value="#8130b8"></afp-color-picker>
  <afp-color-picker shape="soft" value="#0db0e3"></afp-color-picker>
  <afp-color-picker shape="square" value="#0071ee"></afp-color-picker>
</div>

<div class="afp-cluster afp-align-center">
  <afp-color-picker [shape]="'pill'" [value]="'#705d8b'"></afp-color-picker>
  <afp-color-picker [shape]="'rounded'" [value]="'#8130b8'"></afp-color-picker>
  <afp-color-picker [shape]="'soft'" [value]="'#0db0e3'"></afp-color-picker>
  <afp-color-picker [shape]="'square'" [value]="'#0071ee'"></afp-color-picker>
</div>

<div class="afp-cluster afp-align-center">
  <AfpColorPicker shape="pill" value="#705d8b"></AfpColorPicker>
  <AfpColorPicker shape="rounded" value="#8130b8"></AfpColorPicker>
  <AfpColorPicker shape="soft" value="#0db0e3"></AfpColorPicker>
  <AfpColorPicker shape="square" value="#0071ee"></AfpColorPicker>
</div>

<div class="afp-cluster afp-align-center">
  <AfpColorPicker :shape="'pill'" :value="'#705d8b'"></AfpColorPicker>
  <AfpColorPicker :shape="'rounded'" :value="'#8130b8'"></AfpColorPicker>
  <AfpColorPicker :shape="'soft'" :value="'#0db0e3'"></AfpColorPicker>
  <AfpColorPicker :shape="'square'" :value="'#0071ee'"></AfpColorPicker>
</div>

Formats #

Use the format attribute to change the format of the color picker.

<div class="afp-cluster afp-align-center">
  <afp-color-picker label="HEX" value="#705d8b" format="hex"></afp-color-picker>
  <afp-color-picker label="RGB" value="rgb(129, 48, 184)" format="rgb"></afp-color-picker>
  <afp-color-picker label="HSL" value="hsl(194, 89%, 47%)" format="hsl"></afp-color-picker>
  <afp-color-picker label="HSV" value="hsv(212, 100%, 93%)" format="hsv"></afp-color-picker>
</div>

<div class="afp-cluster afp-align-center">
  <afp-color-picker [label]="'HEX'" [value]="'#705d8b'" [format]="'hex'"></afp-color-picker>
  <afp-color-picker [label]="'RGB'" [value]="'rgb(129, 48, 184)'" [format]="'rgb'"></afp-color-picker>
  <afp-color-picker [label]="'HSL'" [value]="'hsl(194, 89%, 47%)'" [format]="'hsl'"></afp-color-picker>
  <afp-color-picker [label]="'HSV'" [value]="'hsv(212, 100%, 93%)'" [format]="'hsv'"></afp-color-picker>
</div>

<div class="afp-cluster afp-align-center">
  <AfpColorPicker label="HEX" value="#705d8b" format="hex"></AfpColorPicker>
  <AfpColorPicker label="RGB" value="rgb(129, 48, 184)" format="rgb"></AfpColorPicker>
  <AfpColorPicker label="HSL" value="hsl(194, 89%, 47%)" format="hsl"></AfpColorPicker>
  <AfpColorPicker label="HSV" value="hsv(212, 100%, 93%)" format="hsv"></AfpColorPicker>
</div>

<div class="afp-cluster afp-align-center">
  <AfpColorPicker :label="'HEX'" :value="'#705d8b'" :format="'hex'"></AfpColorPicker>
  <AfpColorPicker :label="'RGB'" :value="'rgb(129, 48, 184)'" :format="'rgb'"></AfpColorPicker>
  <AfpColorPicker :label="'HSL'" :value="'hsl(194, 89%, 47%)'" :format="'hsl'"></AfpColorPicker>
  <AfpColorPicker :label="'HSV'" :value="'hsv(212, 100%, 93%)'" :format="'hsv'"></AfpColorPicker>
</div>

Limited formats #

Restrict the available color formats by assigning a limited set of formats to the formats property. Only the specified formats will be available for selection.

<div class="afp-cluster afp-align-center">
  <afp-color-picker id="picker2" label="HEX" value="#78b873" format="hex" ></afp-color-picker>
    <script type="module">
        picker2.formats = ['hex', 'rgb'];
    </script>
</div>

<div class="afp-cluster afp-align-center">
  <afp-color-picker [id]="'picker2'" [label]="'HEX'" [value]="'#78b873'" [format]="'hex'" ></afp-color-picker>
    <script type="module">
        picker2.formats = ['hex', 'rgb'];
    </script>
</div>

<div class="afp-cluster afp-align-center">
  <AfpColorPicker id="picker2" label="HEX" value="#78b873" format="hex" ></AfpColorPicker>
    <script type="module">
        picker2.formats = ['hex', 'rgb'];
    </script>
</div>

<div class="afp-cluster afp-align-center">
  <AfpColorPicker :id="'picker2'" :label="'HEX'" :value="'#78b873'" :format="'hex'" ></AfpColorPicker>
    <script type="module">
        picker2.formats = ['hex', 'rgb'];
    </script>
</div>

Single-format #

Limit the color picker to one format only by providing a single value in the formats array. When only one format is available, the format selector is hidden.

<div class="afp-cluster afp-align-center">
  <afp-color-picker id="picker" label="HEX" value="#ef9388" format="hex"></afp-color-picker>
</div>
<script type="module">
    picker.formats = ['hex'];
</script>

<div class="afp-cluster afp-align-center">
  <afp-color-picker [id]="'picker'" [label]="'HEX'" [value]="'#ef9388'" [format]="'hex'"></afp-color-picker>
</div>
<script type="module">
    picker.formats = ['hex'];
</script>

<div class="afp-cluster afp-align-center">
  <AfpColorPicker id="picker" label="HEX" value="#ef9388" format="hex"></AfpColorPicker>
</div>
<script type="module">
    picker.formats = ['hex'];
</script>

<div class="afp-cluster afp-align-center">
  <AfpColorPicker :id="'picker'" :label="'HEX'" :value="'#ef9388'" :format="'hex'"></AfpColorPicker>
</div>
<script type="module">
    picker.formats = ['hex'];
</script>

Disabled #

Use the disabled attribute to specify whether the color-picker is disabled.

<afp-color-picker disabled></afp-color-picker>

<afp-color-picker disabled></afp-color-picker>

<AfpColorPicker disabled></AfpColorPicker>

<AfpColorPicker disabled></AfpColorPicker>

Customization #

Use CSS custom properties to customize the color picker.

<afp-color-picker style="--afp-color-picker-size: 3rem; --afp-color-picker-gradient-height: 100px;"></afp-color-picker>

<afp-color-picker [style]="'--afp-color-picker-size: 3rem; --afp-color-picker-gradient-height: 100px;'"></afp-color-picker>

<AfpColorPicker style="--afp-color-picker-size: 3rem; --afp-color-picker-gradient-height: 100px;"></AfpColorPicker>

<AfpColorPicker :style="'--afp-color-picker-size: 3rem; --afp-color-picker-gradient-height: 100px;'"></AfpColorPicker>

Properties

Learn more about properties.

Name Description Reflects

disabled

Whether the color picker is disabled

Type boolean

Default false

shape

shape of the color picker

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.ROUNDED

strategy

Positioning strategy for the color picker panel. Either `absolute` or `fixed`.

Type

AfpStrategy

Name	Description
`ABSOLUTE`	Positioning using absolute positioning.
`FIXED`	Positioning using fixed positioning.

AfpStrategy

Default AfpStrategy.FIXED

value

The current color value in the selected format

Type string

Default ''

format

format of the color picker

Type

AfpColorFormat

Name	Description
`HEX`	HEX color format (e.g. #RRGGBB as #00FF00)
`RGB`	RGB color format (e.g. rgb(255, 0, 0)).
`HSL`	HSL color format (e.g. hsl(120, 50%, 50%)).
`HSV`	HSV (also called HSB) color format (e.g. hsv(120, 100%, 50%)).

AfpColorFormat

Default AfpColorFormat.HEX

formats

Available color formats to choose from. If only one format is provided, the format selector is hidden.

Type

AfpColorFormat

Name	Description
`HEX`	HEX color format (e.g. #RRGGBB as #00FF00)
`RGB`	RGB color format (e.g. rgb(255, 0, 0)).
`HSL`	HSL color format (e.g. hsl(120, 50%, 50%)).
`HSV`	HSV (also called HSB) color format (e.g. hsv(120, 100%, 50%)).

AfpColorFormat

Default [AfpColorFormat.HEX, AfpColorFormat.RGB, AfpColorFormat.HSL, AfpColorFormat.HSV]

ariaLabel
arialabel

Aria label for the color picker. This is used for accessibility purposes to provide a text alternative for screen readers.

Type string

Events

Learn more about events.

Name	Return	Description
`afp-value-changed`	`string`	Emitted when the color value changes.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.

Internationalization

Learn more about internationalization.

Key	Description
`color-picker.aria-label`	The default `aria-label` text for Color Picker

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`trigger`	The part for trigger button.	`::part(trigger)`
`swatch`	The part for the color swatch inside the trigger.	`::part(swatch)`
`popover`	The part for the popover container.	`::part(popover)`
`popover-content`	The part for the popover content.	`::part(popover-content)`
`gradient-area-wrapper`	The part for the gradient area wrapper.	`::part(gradient-area-wrapper)`
`gradient-area`	The part for the gradient area.	`::part(gradient-area)`
`gradient-cursor`	The part for the gradient cursor.	`::part(gradient-cursor)`
`hue-slider-wrapper`	The part for the hue slider wrapper.	`::part(hue-slider-wrapper)`
`hue-slider-label`	The part for the hue slider label.	`::part(hue-slider-label)`
`hue-slider`	The part for the hue slider.	`::part(hue-slider)`
`color-value-input`	The part for the color value input field.	`::part(color-value-input)`
`format-selector-wrapper`	The part for the format selector wrapper.	`::part(format-selector-wrapper)`

CSS Custom Properties

Name	Description	Default
`--afp-color-picker-size`	The size of the color picker trigger button.	`--afp-size-s`
`--afp-color-picker-disabled-opacity`	The opacity of the color picker when disabled.	`0.5`
`--afp-color-picker-hover-opacity`	The opacity of the color picker when hovered.	`0.8`
`--afp-input-label-disabled-opacity`	The opacity of the input label when disabled.	`0.5`
`--afp-color-picker-gradient-height`	The height of the gradient area.	`200px`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-popover	`popover` - The part for the popover container. `popover-content` - The part for the popover content.
afp-input	`color-value-input` - The part for the color value input field.
afp-button	`button` - The button component.
afp-button-group	`button-group` - The button-group component.

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/color-picker/color-picker.js';