Kendo UI for Vue

Vue ColorGradient

  • The Vue GradientColorPicket helps users select and edit colors by rendering shades of a base color from which users click to pick.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
  • Help Users Pick the Colors they Need

    The Vue ColorGradient helps users select colors by rendering a gradient map of shades of a particular color and allowing the users to click on the map to select. Also included are a hue slider to select the base color, and opacity slider, and inputs for RBG or HEX values.


    See the Vue ColorGradient Component


    ColorGradient - Overview
  • Opacity Inputs

    In some cases, the opacity of the gradient is not required, and we can remove the opacity input to make the component more compact. This can be done by setting just a single option that can also be set dynamically.

    See the Vue Opacity Inputs demo

    colorgradient opacity inputs
  • Controlled and Uncontrolled Modes

    By default, the Vue ColorGradient is in uncontrolled mode and it updates its value internally out of the box. Developers can also set it in controlled mode and sync its value with the application state.

    See the Vue ColorGradient Controlled State demo

  • Color Contrast Tool

    To assist you in creating accessible web pages, the Vue ColorGradient 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
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka