Kendo UI for Vue

Vue ColorPicker

  • A full-featured Vue ColorPicker that allows users to choose and edit colors via gradient or palette view.
  • Part of Kendo UI for Vue library together with other best-in-class native components for building fast and beautiful apps.
  • Comes with outstanding technical support, detailed documentation and demos.
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • The Vue ColorPicker component helps your users choose colors from a gradient or palette view. It’s a complete color editor that gives users controls for simply selecting a color or altering opacity, hue, RBG, and Hex values. This component is an alternative to the Vue FlatColorPicker. The ColorPicker component displays the color editor in a popup while the FlatColorPicker renders the editor right on the page.


    See the Vue ColorPicker Component


  • Controlled or Uncontrolled Modes

    To ensure that the Vue ColorPicker component can fit in any Vue application, it supports both controlled and uncontrolled modes. This lets the component either maintain its own state, or have its state controlled by the developer.

    See the Vue ColorPicker Controlled Mode demo

  • Default Value

    In its closed state, the Vue ColorPicker is represented by a dropdown button with a preview swatch of the selected color. You can set which color is initially set and displayed in that swatch.

    See the Vue ColorPicker Default Value demo

  • Views

    By default, the Vue ColorPicker provides a gradient and a palette view. users can switch between them and use the one they like. You can choose to only show one or the other by setting a simple property.

    See the Vue ColorPicker Views demo

  • Appearance

    The first thing a user sees when you load a Vue ColorPicker is the dropdown button that opens it. The component provides options for size, fill mode, and border radius to ensure you can fit it seamlessly into your application.

    See the Vue ColorPicker Appearance demo

  • Color Contrast Tool

    To assist you in creating accessible web pages, the Vue ColorPicker includes a contrast tool. This tool will analyze the contrast ratio between two colors, visualize it and output a pass/fail report for WCAG standards.

    See the Vue Color Contrast Tool demo

  • Custom Color Picker

    The Vue ColorPicker gives you many options to customize it to fit your needs. Customize the palette colors and tile appearance, the gradient options, and the button icons with straightforward properties. 

    See the Vue Custom ColorPicker demo

  • 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 ColorPicker Keyboard Navigation demo

    Telerik UI for ASP.NET Core Keyboard Navigation

Get Started with Kendo UI for Vue

Kendo UI