<md-color-picker
back-button-at-end="false"
back-button-color="#000000"
color-margin="6" colors-per-row="5"
color-size="54" default-tint="500"
fixedMinHeight="true" palette="material-full"
use-spectrum-picker="true" value="#1e88e5"><md-color-picker>
Note: In html the attributes are seperated by a hyphen instead of using camelCase in JavaScript
| Attribute (JS / HTML) | Value | Description |
|---|---|---|
| backButtonAtEnd / back-button-at-end | If activated, the back-button will show at the end of each subpalette | |
| backButtonColor / back-button-color | The color of the back button icon | |
| colorMargin / color-margin (in px) | The distance between the colors | |
| colorsPerRow / colors-per-row | The number of colors per row | |
| colorSize / color-size (in px) | The size of each color circle | |
| defaultTint / default-tint | This is the tint for each color wich will be shown at the beginning. Material colors default tint is 500. For custom palettes you can also use strings | |
| fixedMinHeight / fixed-min-height | If disabled, the picker will become less high, when the current subpalette has less colors than the mainpalette | |
| palette | The palette with all colors. If it is a string, the picker will use a built in palette instead of your own | |
| useSpectrumPicker / use-spectrum-picker | If false, the other color tints can not be selected, so only the color wich matches default tint is selectable | |
| value (not recommended to change manually) | - | Use the value property to read the selected Color in JS. Must be a hex number with a hashtag followed by 6 digits |