Design HEX To RGB Converter using ReactJS

In this article, we will create a HEX to RGB and RGB to HEX color Converter using React.js. This web application is developed with the use of ReactJS which converts color codes from HEX to RGB and vice versa. It is a user-friendly color converter with real-time color preview, error correction, and copying converted color values into the clipboard.

👁 Screenshot-2023-10-31-114005

Prerequisite

• React JS
• CSS
• React Hooks
• NPM and NPX

Steps to Create the Project

Create a react application by using this command

npx create-react-app hex-to-rgb-converter

After creating your project folder, i.e. hex-to-rgb-converter, use the following command to navigate to it:

cd hex-to-rgb-converter

Project Structure

👁 Image

Package.json

"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"
 }

Approach

• It uses state variables to store HEX and RGB values, and useRef for input field references.
• 'valid' and 'invalid' functions handle input validation and error messages.
• 'toRgb' converts HEX to RGB and sets the document background color.
• 'toHex' converts RGB to HEX and does the same.
• Functions 'copyRgbToClipboard' and 'copyHexToClipboard' copy values to the clipboard.
• The component provides input fields, copy buttons, and a color picker.
• Errors are displayed in red text, and the document background color is updated.

Example:

Step to Run the Application

Type the following command in the terminal:

npm start

Type the following URL in the browser:

http://localhost:3000/

Output