background

Kendo UI for Vue

Vue ColorPalette

  • Show users a set of predefined colors from which to choose. Use a predetermined set or choose your own.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
ColorPalette Component Overview
  • Give Your Users a Palette of Colors to Choose from

    The Vue ColorPalette renders a set of predefined colors from which users can select for color input needs. You can choose from a predefined set or define your own. A simple use case is helping users select a color for a product they are buying online. A more complex example is using the ColorPalette in a full-featured color picker took such as the Vue ColorPicker component.

     

    See the Vue ColorPalette Component

     

    ColorPalette - Overview
  • Controlled and Uncontrolled modes

    The Vue ColorPalette supports both controlled and uncontrolled mode. This allows it to dynamically update other components on the page, if needed, when the value is changed.

    See the Vue ColorPalette Controlled mode demo

  • Color Presets

    The Vue ColorPalette includes various predefine sets of colors you can choose from for your palette. You can also chose to create your own.

    See the Vue ColorPallet Color Presets demo

    ColorPalette - Presets
  • Custom Configuration

    The Vue ColorPalette gives you options to endure that it fits correcting into the space you allocated for it. To set the number of columns to make up its table or the tile size, you only need to set a few properties.

    See the Vue Custom ColorPalette demo

    ColorPalette - Custom configuration
  • Keyboard Navigation

    In order to fully support accessibility and give users a choice of how they want to interact, the Vue ColorPalette fully supports keyboard shortcuts for navigating though, selecting, and editing colors. 

    See the Vue ColorPalette Keyboard Navigation demo

    Keyboard Navigation
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka