Step-by-Step Implementation of Our Color Picker App

In this module, we’ll build the Color Picker App from scratch. We’ll scaffold our React project using Vite, understand the directory structure, render the main component, add color picking logic, enhance it with blending and random color features, and finally style it with CSS for an interactive and polished interface.

1) Set up the environment

We’ll use Vite to set up our React project quickly.

Open your terminal and run:

npm create vite@latest color-picker-app

Choose the following options:

• Project name: color-picker-app
• Framework: React
• Variant: JavaScript

Next, move into the project folder and install dependencies:

cd color-picker-app

npm install

Start the development server:

npm run dev

This will give you a local URL like http://localhost:5173/.
Opening it in your browser will show the Vite + React starter page.

2) Create Application Structure (Directory Structure)

After setup, your project will look like this:

color-picker-app/

├── index.html

├── package.json

├── vite.config.js

├── public/

└── src/

├── App.jsx

├── App.css

├── index.css

└── main.jsx

• index.html: Contains <div id="root"></div>, the container where React mounts the app.
• src/main.jsx: The entry point that renders the <App /> component into the root.
• src/App.jsx: Our main component that holds the logic for the Color Picker.
• src/App.css and src/index.css: Styling files for layout and design.

3) Rendering App in main.jsx

By default, main.jsx looks like this:

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

createRoot(document.getElementById('root')).render(

<StrictMode>

<App />

</StrictMode>,

)

This finds the root element in index.html and mounts our <App /> component inside it. From here, everything the user sees will be managed by React.

4) Building the Color Picker Logic in App.jsx

Now open src/App.jsx and replace it with our app code.

Step 1: Import React hooks and CSS

We’ll use useState to handle user input, selected colors, and dynamic updates.

import { useState } from "react";

import "./App.css";

Step 2: Define available color names

We’ll store a dictionary of named colors with their hex values. This allows users to type names like “red” or “cyan”.

const colorNames = {

red: "#FF0000", pink: "#FFC0CB", blue: "#0000FF", green: "#008000",

yellow: "#FFFF00", orange: "#FFA500", purple: "#800080", black: "#000000",

white: "#FFFFFF", gray: "#808080", brown: "#A52A2A", cyan: "#00FFFF",

magenta: "#FF00FF", lime: "#00FF00", navy: "#000080", teal: "#008080",

olive: "#808000", maroon: "#800000", silver: "#C0C0C0", gold: "#FFD700",

coral: "#FF7F50", salmon: "#FA8072", lavender: "#E6E6FA", violet: "#EE82EE",

indigo: "#4B0082", orchid: "#DA70D6", turquoise: "#40E0D0", beige: "#F5F5DC",

khaki: "#F0E68C", mint: "#98FF98", peach: "#FFE5B4", chocolate: "#D2691E",

tan: "#D2B48C", plum: "#DDA0DD", sky: "#87CEEB", wheat: "#F5DEB3",

rose: "#FF007F", azure: "#007FFF", sienna: "#A0522D", blush: "#DE5D83",

navyblue: "#000080", periwinkle: "#CCCCFF", fuchsia: "#FF00FF", amber: "#FFBF00",

cerulean: "#007BA7", emerald: "#50C878", ruby: "#E0115F", sapphire: "#0F52BA",

};

Step 3: Utility functions

We add helper functions to:

• Convert hex to RGB
• Convert RGB back to hex
• Blend multiple colors together

function hexToRgb(hex) {

const bigint = parseInt(hex.slice(1), 16);

return { r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255 };

}

function rgbToHex({ r, g, b }) {

return `#${r.toString(16).padStart(2,"0")}${g.toString(16).padStart(2,"0")}${b.toString(16).padStart(2,"0")}`.toUpperCase();

}

function blendColors(colors) {

let r = 0, g = 0, b = 0;

colors.forEach(color => {

const rgb = hexToRgb(color);

r += rgb.r; g += rgb.g; b += rgb.b;

});

r = Math.round(r / colors.length);

g = Math.round(g / colors.length);

b = Math.round(b / colors.length);

return rgbToHex({ r, g, b });

}

Step 4: Component state

We’ll manage:

• input: user’s typed value
• color: the main displayed color
• selectedPalette: array of colors when blending

const [input, setInput] = useState("");

const [color, setColor] = useState("#FF0000");

const [selectedPalette, setSelectedPalette] = useState([]);

Step 5: Event handlers

We define functions to handle:

• Picking a color (from text or hex input)
• Blending palette colors (when clicking multiple swatches)
• Random color generation

Each function updates color and selectedPalette accordingly.

Step 6: Return the UI

Our UI includes:

• Input box with buttons (“Pick Color”, “Surprise Me!”)
• Small swatches for selected palette
• Large display box showing chosen color
• Interactive palette grid for choosing colors

5) Styling with CSS

In App.css, we give the app a dark theme with cyan highlights.
Key features:

• Input and buttons styled with glowing cyan outlines
• Palette colors are clickable squares that enlarge on hover
• Main color display box with smooth transitions

This makes the app feel interactive and modern.

6) Final Touches and Deployment

We add a footer credit linking to GUVI.

To build for deployment:

npm run build

This generates a dist/ folder. You can deploy it to Netlify or Vercel easily by uploading that folder.