> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/3-color-picker-with-hex-code-display.md).

# 3 - Color Picker with Hex Code Display

### **Description**

Create a React application that displays a color picker. The color picker should allow users to select a color and display the corresponding hex code.

### **Algorithm**

1. Initialize a state variable to store the selected color's hex code.
2. Render a color picker component that allows users to select a color.
3. Update the state variable when a color is selected.
4. Render the selected color's hex code.

### **Classes**

`ColorPicker`: A React component that manages the selected color and renders the color picker and hex code display.

### **Code**

```javascript
import React, { useState } from 'react';

function ColorPicker() {
  const [selectedColor, setSelectedColor] = useState('#ffffff');

  const handleColorChange = (event) => {
    setSelectedColor(event.target.value);
  };

  return (
    <div>
      <input
        type="color"
        value={selectedColor}
        onChange={handleColorChange}
      />
      <p>Selected Color: {selectedColor}</p>
    </div>
  );
}

export default ColorPicker;
```

### **Explanation**

The code defines a `ColorPicker` component that utilizes the `useState` hook to initialize a state variable `selectedColor` to a default hex code. A color picker input is rendered, allowing users to select a color. When a color is selected, the `handleColorChange` function updates the `selectedColor` state variable. The selected color's hex code is then rendered below the color picker.

### Possible Future Enhancements

* Add a color palette to display recently selected colors.
* Implement a color preview feature to display the selected color as a swatch.
* Use a library like TinyColor to convert the hex code to other color formats (e.g., RGB, HSL).
* Integrate with a design app to allow users to apply the selected color to a design project.