Color Palette Generator app using React
Color Palette Generator App using ReactJS is a web application which enables users to effortlessly generate random color palettes, view the colors, and copy the color codes to the clipboard with just a single click. There is also a search bar which allows the user to check different color themes for their specified color.
Preview of Finla Output:
Prerequisitesa and Technologies Used:
Approach:
- The generateColorPalette method creates a random color palette by performing iterations based on the maxColorBoxes value, which is set to 21. During each iteration, it generates random hex color codes and adds them to an array called colorList, which resides within the component’s state.
- On the other hand, copyColorToClipboard function serves the purpose of accepting a hexValue and an index as inputs. It makes use of the navigator.clipboard.writeText method to copy the provided hexValue to the clipboard.
- Upon successful completion, it updates the copiedColorIndex in the state with the current index value. Consequently, it highlights the copied color and displays a message stating “Copied” to provide visual feedback.
- Each block consists of a colored rectangle representing a specific shade, followed by its corresponding hex code. Additionally, when clicking on any given block, an event handler invokes copyColorToClipboard function to facilitate copying that particular code.
- Lastly, a “Refresh Palette” button triggers the generateColorPalette method when clicked, generating a fresh set of random colors.
Steps to Create the project:
Step 1: Create a react application by using this command
npx create-react-app colorPaletteGenerator
Step 2: After creating your project folder, i.e. colorPaletteGenerator, use the following command to navigate to it:
cd colorPaletteGenerator
Project Structure:
The updated dependencies in package.json file will look like
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Write the below code in App.js file and App.css in the src directory
Javascript
// App.js import React, { Component } from "react" ; import "./App.css" ; class App extends Component { constructor() { super (); this .state = { colorList: [], copiedColorIndex: null , searchInput: "" , matchingColors: [], // Store matching colors }; } componentDidMount() { this .generateColorPalette(); } generateColorPalette = () => { const maxColorBoxes = 21; const colorList = []; for (let i = 0; i < maxColorBoxes; i++) { const randomHexColor = ` #${Math.floor(Math.random() * 0xffffff) .toString(16) .padStart(6, "0" )}`; colorList.push(randomHexColor); } this .setState({ colorList, copiedColorIndex: null }); }; copyColorToClipboard = (hexValue, index) => { navigator.clipboard .writeText(hexValue) .then(() => { this .setState({ copiedColorIndex: index }); }) . catch (() => { alert( "Failed to copy the color code!" ); }); }; handleSearchChange = (e) => { const searchInput = e.target.value.toLowerCase(); // Color mapping with arrays of related colors const colorMapping = { red: [ "#FF0000" , "#FF5733" , "#c21919" , "#FF6347" , "#FF4500" ], green: [ "#00FF00" , "#33FF73" , "#C3FF00" , "#228B22" , "#008000" ], blue: [ "#0000FF" , "#3373FF" , "#00C3FF" , "#1E90FF" , "#4169E1" ], yellow: [ "#FFFF00" , "#FFD700" , "#FFEA00" , "#F0E68C" , "#FFAC33" ], pink: [ "#FFC0CB" , "#FF69B4" , "#FF1493" , "#FF6EB4" , "#FF82AB" ], purple: [ "#800080" , "#9932CC" , "#8A2BE2" , "#A020F0" , "#8000FF" ], orange: [ "#FFA500" , "#FFD700" , "#FF8C00" , "#FF7F50" , "#FF4500" ], brown: [ "#A52A2A" , "#8B4513" , "#D2691E" , "#CD853F" , "#DEB887" ], cyan: [ "#00FFFF" , "#20B2AA" , "#40E0D0" , "#00CED1" , "#00C5CD" ], magenta: [ "#FF00FF" , "#FF69B4" , "#DA70D6" , "#BA55D3" , "#FFA0B4" ], teal: [ "#008080" , "#008B8B" , "#00FFFF" , "#20B2AA" , "#40E0D0" ], navy: [ "#000080" , "#00008B" , "#0000FF" , "#4169E1" , "#0000CD" ], lime: [ "#00FF00" , "#32CD32" , "#7FFF00" , "#00FA9A" , "#00FF7F" ], maroon: [ "#800000" , "#8B0000" , "#B22222" , "#A52A2A" , "#800000" ], olive: [ "#808000" , "#6B8E23" , "#556B2F" , "#8FBC8B" , "#9ACD32" ], silver: [ "#C0C0C0" , "#D3D3D3" , "#DCDCDC" , "#BEBEBE" , "#A9A9A9" ], black: [ "#000000" , "#080808" , "#121212" , "#1C1C1C" , "#262626" ], white: [ "#FFFFFF" , "#F5F5F5" , "#FAFAFA" , "#E0E0E0" , "#D3D3D3" ], // Add more color mappings as needed }; // Check if the search input matches any color name const matchingColors = colorMapping[searchInput] || []; this .setState({ searchInput, matchingColors }); }; render() { const filteredColorList = this .state.matchingColors.length > 0 ? this .state.matchingColors : this .state.colorList; return ( <div> <h1>Color Palette Generator</h1> <div className= "search-container" > <input type= "text" className= "search-input" placeholder= "Search for a color" value={ this .state.searchInput} onChange={ this .handleSearchChange} /> </div> { /* Render matching colors */ } <ul className= "container" > {filteredColorList.map((hexValue, index) => ( <li className= "color" key={index} onClick={() => this .copyColorToClipboard(hexValue, index) } > <div className= "rect-box" style={{ background: hexValue }} ></div> <span className= "hex-value" > {hexValue} { this .state.copiedColorIndex === index && ( <p className= "copied-message" >Copied</p> )} </span> </li> ))} </ul> <button className= "refresh-btn" onClick={ this .generateColorPalette} > Refresh Palette </button> </div> ); } } export default App; |
CSS
/* App.css */ * { margin : 0 ; padding : 0 ; box-sizing: border-box; } .container { margin : 20px ; display : flex; justify- content : center ; flex-wrap: wrap; } .container .color { margin : 12px ; padding : 7px ; list-style : none ; cursor : pointer ; text-align : center ; background : #fff ; border-radius: 16px ; box-shadow: 0 0px 30px 0px rgb ( 207 , 206 , 206 ); transition: all 0.3 s ease; } h 1 { text-align : center ; padding : 10px ; color : green ; } .container . color :active { transform: scale( 0.95 ); } .color .rect-box { width : 185px ; height : 188px ; border-radius: 10px ; } . color :hover .rect-box { filter: brightness( 107% ); } .color .hex-value { display : block ; color : #444 ; user-select: none ; font-weight : 500 ; font-size : 1.15 rem; margin : 12px 0 8px ; text-transform : uppercase ; } .refresh-btn { position : fixed ; left : 50% ; bottom : 40px ; color : #fff ; cursor : pointer ; outline : none ; font-weight : 500 ; font-size : 1.1 rem; border-radius: 5px ; background : green ; padding : 13px 20px ; border : none ; transform: translateX( -50% ); box-shadow: 0 0px 30px 0px grey; transition: all 0.3 s ease; } .refresh-btn:hover { background : rgb ( 4 , 95 , 4 ); } .copied-message { margin : 10px ; color : crimson; font-weight : bold ; font-family : 'Courier New' , Courier , monospace ; } .search-container { position : relative ; margin : 20px auto ; width : 300px ; } .search-input { width : 100% ; padding : 15px ; border : 2px solid #ccc ; border-radius: 15px ; font-size : 16px ; outline : none ; transition: border-color 0.3 s; box-shadow: 0 0px 10px 0px #b3b2b2 ; } .search-input:hover { border-color : #007bff ; } @media screen and ( max-width : 500px ) { .container { margin : 10px ; } .container .color { margin : 8px ; padding : 5px ; width : calc( 100% / 2 - 20px ); } .color .rect-box { width : 100% ; height : 148px ; } .color .hex-value { font-size : 1.05 rem; } .refresh-btn { font-size : 1 rem; } } |
Steps to run the Application:
Step 1:Type the following command in the terminal:
npm start
Step 2: Type the following URL in the browser:
http://localhost:3000/
Output: