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 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
  • 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

  • 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


Get Started with Kendo UI for Vue

Kendo UI