Custom Color Picker – HEX with Opacity & RGBA Converter

Color Code Conversion Explained

HEX (Hexadecimal)

A six- or eight-digit code used in CSS to represent colors. For example, #d97706 is an orange shade. If an alpha channel (opacity) is included, it becomes 8 digits (e.g. #d97706ff).

RGB (Red, Green, Blue)

A numerical format where each color component ranges from 0 to 255. Example: rgb(217, 119, 6).

RGBA (RGB + Alpha)

Adds an alpha value to RGB to control transparency. The alpha ranges from 0 (fully transparent) to 1 (fully opaque). Example: rgba(217, 119, 6, 0.7).

HSL (Hue, Saturation, Lightness)

A more intuitive model for color design, especially in UI/UX. Hue is a value from 0–360° on the color wheel, Saturation and Lightness are percentages. Example: hsl(32, 95%, 44%).

Color Conversion Math Behind the Tool

This color picker doesn’t just display colors — it performs real-time mathematical conversions between color models using JavaScript. Here’s a breakdown of the math:

🎨 HEX to RGB

A HEX value like #FF8800 is split into pairs:

 Red = parseInt("FF", 16) = 255 Green = parseInt("88", 16) = 136 Blue = parseInt("00", 16) = 0

🔄 RGB to HEX

Convert RGB (255, 136, 0) to HEX by converting each component to hex:

HEX = "#" + toHex(255) + // "ff" toHex(136) + // "88" toHex(0) // "00" // Result: "#ff8800"

🌓 RGB to HSL

Here’s the logic to convert RGB to HSL:

r = r / 255 g = g / 255 b = b / 255 max = Math.max(r, g, b) min = Math.min(r, g, b) l = (max + min) / 2 if (max === min) { s = 0 h = 0 } else { d = max - min s = l > 0.5 ? d / (2 - max - min) : d / (max + min) if (max === r) { h = (g - b) / d + (g < b ? 6 : 0) } else if (max === g) { h = (b - r) / d + 2 } else { h = (r - g) / d + 4 } h = h / 6 }

This produces something like hsl(32, 95%, 44%) for warm orange tones.

💡 RGBA and Alpha Transparency

RGBA includes an alpha value between 0 (transparent) and 1 (opaque). For example:

rgba(255, 136, 0, 0.5)

The alpha can also be represented in HEX by converting it to a value between 00 and FF:

0.5 × 255 = 127.5 ≈ 127 → hex = "7f" Final 8-digit HEX = #ff88007f

Why Use a Custom Color Picker?

• 🎯 Convert between HEX, RGBA, RGB, and HSL effortlessly
• 🎨 Preview and adjust opacity in real time
• 🧑‍💻 Built for frontend developers, UI designers, and CSS enthusiasts
• ⚡ Blazing fast, lightweight, and no third-party dependencies

Built with Performance and Precision

This tool uses a layered canvas rendering strategy to simulate saturation and brightness over a hue range. With pixel-perfect sampling and real-time code generation, it's ideal for development, theming, and CSS optimization workflows.

Coming Soon: How to Build This with JavaScript

I’ll be publishing a full tutorial on how to create this color picker from scratch using:

• ✔️ HTML5 Canvas
• ✔️ JavaScript hue + alpha sliders
• ✔️ RGB to HSL & HEX math
• ✔️ Clipboard integration & field syncing

Stay tuned on the Codestructor Blog to learn how to build your own version step-by-step!