Alright Raj, let’s dig into CSS HEX Colors and break them down so you know exactly how they work and when to use them.

---

1. What are HEX Colors in CSS?

• HEX stands for hexadecimal, a base-16 numbering system.
• In CSS, HEX colors represent Red, Green, and Blue values in hexadecimal form.
• Each color channel (R, G, B) is written as a two-digit hex value (00–FF).

---

2. Syntax

#RRGGBB

• RR = red value (00–FF)
• GG = green value (00–FF)
• BB = blue value (00–FF)
• 00 = no intensity, FF = full intensity

---

3. Examples

color: #ff0000; /* Red  */
color: #00ff00; /* Green */
color: #0000ff; /* Blue  */
color: #ffff00; /* Yellow (red + green) */
color: #00ffff; /* Cyan   (green + blue) */
color: #ff00ff; /* Magenta (red + blue) */
color: #ffffff; /* White  (all colors max) */
color: #000000; /* Black  (all colors zero) */

---

4. HEX Short Notation

If both digits of each channel are the same, you can shorten:

#rgb

• #f00 → #ff0000 (red)
• #0f0 → #00ff00 (green)
• #00f → #0000ff (blue)
• #fff → #ffffff (white)

---

5. HEX with Alpha Transparency

In modern CSS, you can add alpha (opacity) using 8-digit HEX:

#RRGGBBAA

• AA = alpha value (00–FF)
• 00 = fully transparent, FF = fully opaque

Examples:

color: #ff000080; /* Semi-transparent red */
color: #000000cc; /* Semi-transparent black */

Short version also works:

#RGBA
#f008 → #ff000088 (semi-transparent red)

---

6. Where HEX is Used in CSS

/* Text color */
p {
  color: #333333;
}

/* Background color */
body {
  background-color: #f0f0f0;
}

/* Border color */
div {
  border: 2px solid #ff6600;
}

---

7. RGB ↔ HEX Conversion Basics

• Decimal 255 = hex FF
• Decimal 0 = hex 00
• Decimal 128 = hex 80

Example:
rgb(255, 165, 0) =
R: 255 → FF
G: 165 → A5
B: 0 → 00
HEX = #FFA500 (Orange)

---

A live HEX color picker demo :

import React, { useState, useMemo } from "react";

function hexToRgb(hex) {
  let clean = hex.replace("#", "");
  if (clean.length === 3) {
    clean = clean.split("").map(c => c + c).join("");
  }
  const bigint = parseInt(clean, 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return { r, g, b };
}

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
      default: break;
    }
    h /= 6;
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

export default function HexColorPickerDemo() {
  const [hex, setHex] = useState("#ff6600");
  const [alpha, setAlpha] = useState(1);

  const { rgbString, rgbaString, hslString, hslaString, textColor } = useMemo(() => {
    const { r, g, b } = hexToRgb(hex);
    const rgbString = `rgb(${r}, ${g}, ${b})`;
    const rgbaString = `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})`;
    const { h, s, l } = rgbToHsl(r, g, b);
    const hslString = `hsl(${h}, ${s}%, ${l}%)`;
    const hslaString = `hsla(${h}, ${s}%, ${l}%, ${alpha.toFixed(2)})`;
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    const textColor = luminance > 0.5 ? "#000" : "#fff";
    return { rgbString, rgbaString, hslString, hslaString, textColor };
  }, [hex, alpha]);

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-6">
      <h1 className="text-2xl font-bold mb-6">CSS HEX Color Picker</h1>
      <div className="bg-white p-6 rounded-xl shadow-lg w-full max-w-md space-y-4">
        <div>
          <label className="block text-sm font-medium mb-1">Pick a HEX Color:</label>
          <input
            type="color"
            value={hex}
            onChange={e => setHex(e.target.value)}
            className="w-full h-12 cursor-pointer"
          />
          <input
            type="text"
            value={hex}
            onChange={e => setHex(e.target.value)}
            className="w-full mt-2 border rounded-lg p-2 text-center"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">Alpha (Transparency):</label>
          <input
            type="range"
            min="0"
            max="1"
            step="0.01"
            value={alpha}
            onChange={e => setAlpha(parseFloat(e.target.value))}
            className="w-full"
          />
        </div>
        <div
          className="h-32 rounded-lg flex items-center justify-center text-lg font-semibold"
          style={{ backgroundColor: rgbaString, color: textColor }}
        >
          {rgbaString}
        </div>
        <div className="space-y-1 text-sm">
          <div><strong>HEX:</strong> {hex}</div>
          <div><strong>RGB:</strong> {rgbString}</div>
          <div><strong>RGBA:</strong> {rgbaString}</div>
          <div><strong>HSL:</strong> {hslString}</div>
          <div><strong>HSLA:</strong> {hslaString}</div>
        </div>
      </div>
    </div>
  );
}

Run / Output :