Just finished my first little tool on the tools page. I envisioned from the start of this site, a page with small useful every day developer tools. Maybe a simple color picker, css helpers like box-shadow generator and a hex-to-rgb converter. Well, the last one is finished now. Feel free to try it out and bookmark the page because I intend to add more in the future.
The Hex/RGB Color Converter consists of a form with inputs. I used flex-box for easy styling and then use a combination of php and javascript for functionality. I didn't intend to make it this robust from the start, but for user friendliness I decided to stretch a bit and make it validate different input formats. To make sure I didn't forget any variants I asked Codepilot for suggestions and ultimately decided on these:
For RGB:
#abcabc#aabbccaabbcc
For RGB:
rgb(100, 50, 20)100, 50, 20100 50 20
The javascript for handling validation took some time to get right, and I used both Google Search and Codepilot to get it right in the end (patience is not one of my strong suites, but I always force myself to start out solving a problem myself before getting help). First I have a small script getting the color input from the user:
colorinput.addEventListener('input', (e) => {
const value = e.target.value.trim();
updateColorSample(value);
});
This presented a problem since I use PHP to handle switching between RGB and Hex input. But a simple querySelector of the first input solved the problem.
When it has captured the input I call updateColorSample to update the background-color of the div below, to give the user feedback on what color is being input:
const sample = document.getElementById('colorsample');
// Try to detect HEX
let hex = null;
// Remove leading # if present
let cleaned = value.replace('#', '').trim();
// Validate HEX (3 or 6 hex characters)
if (/^[0-9a-fA-F]{3}$/.test(cleaned)) {
// Expand shorthand: abc -> aabbcc
hex = cleaned.split('').map(c => c + c).join('');
}
else if (/^[0-9a-fA-F]{6}$/.test(cleaned)) {
hex = cleaned;
}
// If valid HEX, apply it
if (hex) {
sample.style.backgroundColor = "#" + hex;
sample.style.opacity = 1;
return;
}
// Try to detect RGB
let rgb = value
.replace(/rgb|\(|\)/gi, '') // remove rgb(...) syntax
.replace(/\s+/g, '') // remove spaces
.split(',')
.map(Number);
if (
rgb.length === 3 &&
rgb.every(n => Number.isInteger(n) && n >= 0 && n <= 255)
) {
sample.style.backgroundColor = `rgb(${rgb.join(',')})`;
sample.style.opacity = 1;
return;
}
// If invalid color, hide sample
sample.style.opacity = 0;
}
The trick here was to find the correct patterns to interprete the input. This required some googling and tips from Codepilot to get it right in the end. All in all it was done over the course of a couple of days and while there are still improvements to be made, I'm satisfied with the result for now. Hope you find the tool useful.