---
title: "Color Generator | LemonadeJS v5"
description: "LemonadeJS v5 archive. A simple reactive color generator using the mouse move event."
source: https://lemonadejs.com/docs/v5/examples/color-generator/
---
# Colour Changer
This example demonstrates using a native JavaScript `mousemove` event in LemonadeJS to update the DOM dynamically with a generated hexadecimal colour code.
## A Working Example
Please move your mouse over the cards below to see their colours change dynamically.
```html
```
```javascript
import lemonade from 'lemonadejs';
export default function ColorChanger() {
const rand = function() {
return parseInt(Math.random() * 255);
}
const applyColor = (e) => {
// Get a RANDOM RGB number
let color = [ rand(), rand(), rand() ];
// Set background of the DOM
e.target.style.backgroundColor = 'rgb(' + color + ')';
// Set text of the DOM
e.target.innerText = color;
}
// Color changer template.
return render => render`
Hover here
Hover here
Hover here
`;
}
```
### CSS for the Color Generator Example
To style the grid for the Color Generator example, use the following CSS:
```css
.grid {
display: flex;
flex-direction: row;
width: 300px;
}
.grid > div {
width: 100px;
height: 100px;
margin: 2px;
color: #fff;
text-align: center;
transition: 0.5s;
background-color: #cecece;
}
```
## Related Documentation
- [LemonadeJS Color Picker](/docs/v5/plugins/color-picker/) - Main color picker documentation
- [Jsuites Color Picker](https://jsuites.net/docs/color-picker) - Lightweight alternative