<md-color-picker 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 |
---|---|---|
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) | - | The color which is selected. Must be a hex number with a hashtag followed by 6 digits |