Kendo UI for Vue

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