ColorPicker Web Component

Regular Input

  • manually initialized via JavaScript;
  • componentLabels option is default;
  • colorLabels option is default;
  • data-format="hsl" attribute is used;
  • colorPresets option is set to Material Colors via JavaScript API;
  • colorKeywords option is set via JavaScript API;
  • manually initialized with the default selector;
  • when changed, creates a colour tetrad with the others in the line;
  • format option is default (rgb);
  • componentLabels option is default;
  • colorLabels option is default;
  • colorPresets option is default (false);
  • colorKeywords option is set via DATA API with a couple of web colors.
  • manually initialized via JavaScript;
  • data-format="hex" attribute is used;
  • componentLabels option is default;
  • colorLabels option is default;
  • colorPresets option is set to Bootstrap Colors;
  • colorKeywords option is set to use some non-color values.
  • manually initialized via JavaScript;
  • format option is set via JavaScript to hwb;
  • componentLabels option is set via JavaScript;
  • colorLabels option is set to via JavaScript;
  • colorPresets option is set via JavaScript to Tailwind Colors;
  • colorKeywords option is set via JavaScript;
  • manually initialized via JavaScript;
  • componentLabels option is default;
  • colorLabels option is default;
  • data-format="hsl" attribute is used;
  • colorPresets option is set to Material Colors via JavaScript API;
  • colorKeywords option is set via JavaScript API;