Let’s Build a Color Code Converter With React Together!

Next.js is an awesome React framework that makes building web apps a breeze, thanks to cool features like server-side rendering (SSR), static site generation (SSG), and more. Today, we’re diving into something exciting: creating our very own Color Code Converter using Next.js. Picture this: You input a color in hex format, and voilà—it instantly shows you the RGB and HSL equivalents. It even has a color picker for real-time updates. Sounds fun, right? Let’s get started! Installing Next.js First things first—let’s set up our Next.js project. Step 1: Check Your Tools Before we dive in, make sure your system has the following: Node.js (preferably version 16 or higher). npm or yarn (both come with Node.js). You can check if they’re installed by running these commands: node -v npm -v Step 2: Spin Up a New Project We’ll use Next.js’s CLI tool to create our project. Run this command: npx create-next-app@latest my-nextjs-app Replace my-nextjs-app with whatever name you like. This does all the heavy lifting—sets up the folder, installs dependencies, and more. If you prefer yarn: yarn create next-app my-nextjs-app Step 3: Open the Project Move into your new project’s folder: cd my-nextjs-app Step 4: Start the Dev Server Let’s see it in action. Run: npm run dev (or yarn dev if you’re using yarn). Visit http://localhost:3000 in your browser. You should see the Next.js welcome page. What Are We Building? We’re making a Color Code Converter. Here’s how it works: You pick or type a color in hex format. The app converts it into RGB and HSL formats. The interface updates dynamically with a color picker and input field. It’s user-friendly, interactive, and super satisfying to use. Breaking It Down: How We’ll Build It Let’s walk through the code step by step, so you understand the “why” behind each part. Code Walkthrough Here’s the code. Don’t worry—I’ll explain it as we go: 'use client' import { useState } from 'react'; import { ChromePicker, ColorResult } from 'react-color'; export default function Home() { const [color, setColor] = useState('#3498db'); const [rgb, setRgb] = useState({ r: 52, g: 152, b: 219 }); const [hsl, setHsl] = useState({ h: 204, s: 71, l: 53 }); const handleColorChange = (selectedColor : ColorResult) => { const hex = selectedColor.hex; const rgb = selectedColor.rgb; const hsl = selectedColor.hsl; setColor(hex); setRgb({ r: rgb.r, g: rgb.g, b: rgb.b }); setHsl({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) }); }; const handleHexInputChange = (e : React.ChangeEvent) => { const hex = e.target.value; setColor(hex); }; return ( Color Code Converter {/* Color Picker /} {/ Hex Input /} Enter Hex Code: {/ Converted Values /} Converted Values Hex: {color} RGB: rgb({rgb.r}, {rgb.g}, {rgb.b}) HSL: hsl({hsl.h}, {hsl.s}%, {hsl.l}%) ); } We start by importing the tools we’ll need. First, there’s React’s useState, which will help us manage the app’s state. Then, we import the ChromePicker component and the ColorResult type from the react-color library. This gives us a neat color picker UI and a structured way to handle selected colors. Next, we set up some state variables using useState. This is how we keep track of the selected color in different formats: const [color, setColor] = useState('#3498db'); const [rgb, setRgb] = useState({ r: 52, g: 152, b: 219 }); const [hsl, setHsl] = useState({ h: 204, s: 71, l: 53 }); Here, color holds the current hex code, while rgb and hsl keep track of the converted values. We initialize them with a nice default color (blue, in this case). Now, let’s talk about handling color changes. When we pick a new color using the color picker, this function gets triggered: const handleColorChange = (selectedColor : ColorResult) => { const hex = selectedColor.hex; const rgb = selectedColor.rgb; const hsl = selectedColor.hsl; setColor(hex); setRgb({ r: rgb.r, g: rgb.g, b: rgb.b }); setHsl({ h: Math.round(hsl.h), s: Math.round(hsl.s 100), l: Math.round(hsl.l * 100) }); }; Here’s what’s happening: First, we extract the hex, RGB, and HSL values from the selectedColor object (this is provided by the ChromePicker). We then update our state variables using setColor, setRgb, and setHsl. Notice how we round the HSL values to make them look cleaner. If the user decides to manually type in a hex code, we’ve got that covered too: const handleHexInputChange = (e : React.ChangeEvent) => { const hex = e.target.value; setColor(hex); }; This function listens for changes in the input field and updat

Jan 21, 2025 - 20:57

Let’s Build a Color Code Converter With React Together!

Next.js is an awesome React framework that makes building web apps a breeze, thanks to cool features like server-side rendering (SSR), static site generation (SSG), and more. Today, we’re diving into something exciting: creating our very own Color Code Converter using Next.js.

Picture this: You input a color in hex format, and voilà—it instantly shows you the RGB and HSL equivalents. It even has a color picker for real-time updates. Sounds fun, right? Let’s get started!

Installing Next.js

First things first—let’s set up our Next.js project.

Step 1: Check Your Tools

Before we dive in, make sure your system has the following:

Node.js (preferably version 16 or higher).
npm or yarn (both come with Node.js).

You can check if they’re installed by running these commands:

node -v
npm -v

Step 2: Spin Up a New Project

We’ll use Next.js’s CLI tool to create our project. Run this command:

npx create-next-app@latest my-nextjs-app

Replace my-nextjs-app with whatever name you like. This does all the heavy lifting—sets up the folder, installs dependencies, and more.

If you prefer yarn:

yarn create next-app my-nextjs-app

Step 3: Open the Project

Move into your new project’s folder:

cd my-nextjs-app

Step 4: Start the Dev Server

Let’s see it in action. Run:

npm run dev

(or yarn dev if you’re using yarn).

Visit http://localhost:3000 in your browser. You should see the Next.js welcome page.

What Are We Building?

We’re making a Color Code Converter. Here’s how it works:

You pick or type a color in hex format.
The app converts it into RGB and HSL formats.
The interface updates dynamically with a color picker and input field.

It’s user-friendly, interactive, and super satisfying to use.

Breaking It Down: How We’ll Build It

Let’s walk through the code step by step, so you understand the “why” behind each part.

Code Walkthrough

Here’s the code. Don’t worry—I’ll explain it as we go:

'use client'

import { useState } from 'react';
import { ChromePicker, ColorResult } from 'react-color';

export default function Home() {
  const [color, setColor] = useState('#3498db');
  const [rgb, setRgb] = useState({ r: 52, g: 152, b: 219 });
  const [hsl, setHsl] = useState({ h: 204, s: 71, l: 53 });

  const handleColorChange = (selectedColor : ColorResult) => {
    const hex = selectedColor.hex;
    const rgb = selectedColor.rgb;
    const hsl = selectedColor.hsl;

    setColor(hex);
    setRgb({ r: rgb.r, g: rgb.g, b: rgb.b });
    setHsl({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });
  };

  const handleHexInputChange = (e : React.ChangeEvent<HTMLInputElement>) => {
    const hex = e.target.value;
    setColor(hex);
  };

  return (
    <div className="min-h-screen bg-black flex items-center justify-center text-white">
      <div className="w-full max-w-md p-6 bg-gray-800 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-center mb-6">Color Code Converterh1>

        {/* Color Picker */}
        <div className="mb-6 flex justify-center">
          <ChromePicker color={color} onChangeComplete={handleColorChange} />
        div>

        {/* Hex Input */}
        <div className="flex flex-col items-center mb-4">
          <label className="mb-2 text-gray-300">Enter Hex Code:label>
          <input
            type="text"
            value={color}
            onChange={handleHexInputChange}
            className="bg-gray-700 text-white text-center p-2 rounded-lg w-32 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        div>

        {/* Converted Values */}
        <div className="mt-6">
          <h3 className="text-xl font-semibold mb-3 text-center">Converted Valuesh3>
          <div className="space-y-2">
            <p><span className="font-bold">Hex:span> {color}p>
            <p><span className="font-bold">RGB:span> rgb({rgb.r}, {rgb.g}, {rgb.b})p>
            <p><span className="font-bold">HSL:span> hsl({hsl.h}, {hsl.s}%, {hsl.l}%)p>
          div>
        div>
      div>
    div>
  );
}

We start by importing the tools we’ll need. First, there’s React’s useState, which will help us manage the app’s state. Then, we import the ChromePicker component and the ColorResult type from the react-color library. This gives us a neat color picker UI and a structured way to handle selected colors.

Next, we set up some state variables using useState. This is how we keep track of the selected color in different formats:

const [color, setColor] = useState('#3498db');
const [rgb, setRgb] = useState({ r: 52, g: 152, b: 219 });
const [hsl, setHsl] = useState({ h: 204, s: 71, l: 53 });

Here, color holds the current hex code, while rgb and hsl keep track of the converted values. We initialize them with a nice default color (blue, in this case).

Now, let’s talk about handling color changes. When we pick a new color using the color picker, this function gets triggered:

const handleColorChange = (selectedColor : ColorResult) => {
  const hex = selectedColor.hex;
  const rgb = selectedColor.rgb;
  const hsl = selectedColor.hsl;

  setColor(hex);
  setRgb({ r: rgb.r, g: rgb.g, b: rgb.b });
  setHsl({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });
};

Here’s what’s happening:

First, we extract the hex, RGB, and HSL values from the selectedColor object (this is provided by the ChromePicker).
We then update our state variables using setColor, setRgb, and setHsl. Notice how we round the HSL values to make them look cleaner.

If the user decides to manually type in a hex code, we’ve got that covered too:

const handleHexInputChange = (e : React.ChangeEvent<HTMLInputElement>) => {
  const hex = e.target.value;
  setColor(hex);
};

This function listens for changes in the input field and updates the color state accordingly.

Finally, we design the UI. The ChromePicker component is front and center for selecting colors:

<ChromePicker color={color} onChangeComplete={handleColorChange} />

We also add an input field for manually entering hex codes:

<input
  type="text"
  value={color}
  onChange={handleHexInputChange}
  className="bg-gray-700 text-white text-center p-2 rounded-lg w-32 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>

And, of course, we display the converted values below:

<p>RGB: rgb({rgb.r}, {rgb.g}, {rgb.b})p>
<p>HSL: hsl({hsl.h}, {hsl.s}%, {hsl.l}%)p>

To make everything look nice, we use Tailwind CSS for styling. It keeps our layout clean, responsive, and easy to read.

Wrap-Up

And that’s it! Together, we’ve built a fully functional Color Code Converter with Next.js. Now you can input colors, pick them, and see instant conversions. Keep experimenting—you might even add more features like saving favorite colors or copying values to the clipboard. The sky’s the limit!