Chapter 10. Building a Color Picker with Hex RGB Conversion

Chapter 9, Creating Widgets Using the Widget Factory, was a complex one where we created two widgets using jQuery UI's widget factory. In this chapter, we will relax a bit and build something simple.

We are going to create a color selector, or color picker, that will allow the users to change the text and background color of a page using the slider widget. We will also use the spinner widget to represent individual colors. Any change in colors using the slider will update the spinner and vice versa. The hex value of both text and background colors will also be displayed dynamically on the page.

This is how our page will look after we have finished building it:

Setting up the folder structure ...

Get Mastering jQuery UI now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.