background

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 the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
ColorPicker
  • 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

     

    Color Picker - Overview
  • 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

    ColorPicker View Types
  • 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 Picker - Custom Rendering
  • 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

    Contrast Tool ColorGradient
  • 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

    Keyboard Navigation
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka