Kendo UI for Vue
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.
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.
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.
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.