messages

Object

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  messages: {
    apply: "Update",
    cancel: "Discard"
  }
})
</script>

messages.alpha

String

Allows customization of the rgb's alpha input's aria-label in the Gradient's input editor.

Default: "Alpha"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    opacity: true,
    messages: {
      alpha: "Transparency"
    }
  });
</script>

messages.apply

String

Allows customization of the "Apply" button text.

Default: "Apply"

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  messages: {
    apply: "Update"
  }
})
</script>

messages.blue

String

Allows customization of the rgb's blue input's aria-label in the Gradient's input editor.

Default: "Blue"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    format: "rgb",
    messages: {
      blue: "Blue Component"
    }
  });
</script>

messages.cancel

String

Allows customization of the "Cancel" button text.

Default: "Cancel"

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  messages: {
    cancel: "Discard"
  }
})
</script>

messages.clearColor

String

Allows customization of the Clear Color button label.

Default: "Clear color"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    clearButton: true,
    messages: {
      clearColor: "Remove Color"
    }
  });
</script>

messages.contrastRatio

String

Allows customization of the "Contrast ratio" text in the contrast tool.

Default: "Contrast ratio"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    contrastTool: true,
    messages: {
      contrastRatio: "Color Contrast"
    }
  });
</script>

messages.fail

String

Allows customization of the "Fail" text in the contrast tool.

Default: "Fail"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    contrastTool: true,
    messages: {
      fail: "Poor"
    }
  });
</script>

messages.gradient

String

Allows customization of the Gradient view button.

Default: "Gradient view"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    views: ["gradient", "palette"],
    messages: {
      gradient: "Color Gradient"
    }
  });
</script>

messages.green

String

Allows customization of the rgb's green input's aria-label in the Gradient's input editor.

Default: "Green"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    format: "rgb",
    messages: {
      green: "Green Component"
    }
  });
</script>

messages.hex

String

Allows customization of the hex input's aria-label in the Gradient's input editor.

Default: "HEX"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    format: "hex",
    messages: {
      hex: "Hexadecimal"
    }
  });
</script>

messages.palette

String

Allows customization of the Palette view button.

Default: "Palette view"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    views: ["gradient", "palette"],
    messages: {
      palette: "Color Palette"
    }
  });
</script>

messages.pass

String

Allows customization of the "Pass" text in the contrast tool.

Default: "Pass"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    contrastTool: true,
    messages: {
      pass: "Good"
    }
  });
</script>

messages.previewInput

String

Overrides the messages.hex property. Legacy option.

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  messages: {
    previewInput: "Edit Color"
  }
})
</script>

messages.red

String

Allows customization of the rgb's red input's aria-label in the Gradient's input editor.

Default: "Red"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    format: "rgb",
    messages: {
      red: "Red Component"
    }
  });
</script>

messages.toggleFormat

String

Allows customization of the toggle format button's title in the Gradient's input editor.

Default: "Toggle format"

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    messages: {
      toggleFormat: "Switch Format"
    }
  });
</script>