ColorCode Pro – RGB to Hex Converter
/* — CSS SEPARATION START — */
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap’);:root {
–primary: #6366F1; /* Indigo-500 */
–bg-dark: #111827;
}body {
font-family: ‘Inter’, sans-serif;
transition: background-color 0.3s, color 0.3s;
}.font-mono {
font-family: ‘JetBrains Mono’, monospace;
}/* Range Slider Styling – Colored Tracks */
input[type=range] {
-webkit-appearance: none;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: white;
border: 2px solid #e5e7eb;
margin-top: -8px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
border-radius: 3px;
}#range-r::-webkit-slider-runnable-track { background: linear-gradient(to right, #000, #ff0000); }
#range-g::-webkit-slider-runnable-track { background: linear-gradient(to right, #000, #00ff00); }
#range-b::-webkit-slider-runnable-track { background: linear-gradient(to right, #000, #0000ff); }/* Dark Mode */
.dark body {
background-color: var(–bg-dark);
color: #F9FAFB;
}
.dark .card {
background-color: #1F2937;
border-color: #374151;
}
.dark input[type=text], .dark input[type=number] {
background-color: #374151;
color: white;
border-color: #4B5563;
}
/* — CSS SEPARATION END — */
tailwind.config = {
darkMode: ‘class’,
theme: {
extend: {
colors: {
primary: ‘#6366F1’,
}
}
}
}
Convert color values instantly. Drag sliders or type codes.
Current Color
#6366F1 rgb(99, 102, 241)
CSS Snippet
background-color: #6366F1 ;rgb(99, 102, 241) ;
Copy
// — JAVASCRIPT SEPARATION START —// DOM Elements
const rangeR = document.getElementById(‘range-r’);
const rangeG = document.getElementById(‘range-g’);
const rangeB = document.getElementById(‘range-b’);
const valR = document.getElementById(‘val-r’);
const valG = document.getElementById(‘val-g’);
const valB = document.getElementById(‘val-b’);
const hexInput = document.getElementById(‘hex-input’);
const colorPreview = document.getElementById(‘color-preview’);
const previewText = document.getElementById(‘preview-text’);
const previewRgb = document.getElementById(‘preview-rgb’);
const cssCode = document.getElementById(‘css-code’);let isDarkMode = false;// — Event Listeners —// Sync Sliders -> Inputs -> Logic
[rangeR, rangeG, rangeB].forEach(el => {
el.addEventListener(‘input’, () => {
syncInputsFromSliders();
updateFromRGB();
});
});[valR, valG, valB].forEach(el => {
el.addEventListener(‘input’, () => {
syncSlidersFromInputs();
updateFromRGB();
});
});hexInput.addEventListener(‘input’, updateFromHex);// — Logic Functions —function syncInputsFromSliders() {
valR.value = rangeR.value;
valG.value = rangeG.value;
valB.value = rangeB.value;
}function syncSlidersFromInputs() {
rangeR.value = valR.value;
rangeG.value = valG.value;
rangeB.value = valB.value;
}function updateFromRGB() {
let r = parseInt(valR.value) || 0;
let g = parseInt(valG.value) || 0;
let b = parseInt(valB.value) || 0;// Clamp values
r = Math.max(0, Math.min(255, r));
g = Math.max(0, Math.min(255, g));
b = Math.max(0, Math.min(255, b));const hex = rgbToHex(r, g, b);
// Update UI
hexInput.value = hex;
updatePreview(r, g, b, hex);
}function updateFromHex() {
let hex = hexInput.value.replace(‘#’, ”);
// Handle shorthand (e.g. F00 -> FF0000)
if (hex.length === 3) {
hex = hex.split(”).map(char => char + char).join(”);
}if (hex.length === 6 && /^[0-9A-Fa-f]{6}$/.test(hex)) {
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);// Update Inputs
valR.value = r; rangeR.value = r;
valG.value = g; rangeG.value = g;
valB.value = b; rangeB.value = b;updatePreview(r, g, b, hex.toUpperCase());
}
}function updatePreview(r, g, b, hex) {
const hexFormatted = `#${hex}`;
const rgbFormatted = `rgb(${r}, ${g}, ${b})`;colorPreview.style.backgroundColor = hexFormatted;
previewText.innerText = hexFormatted;
previewRgb.innerText = rgbFormatted;// Update CSS Snippet
cssCode.innerHTML = `background-color:
${hexFormatted} ;
color:
${rgbFormatted} ;`;
}function rgbToHex(r, g, b) {
return ((1 << 24) + (r << 16) + (g < {
const original = previewText.innerText;
previewText.innerText = “COPIED!”;
setTimeout(() => previewText.innerText = original, 1000);
});
}function copyCSS() {
const css = `background-color: #${hexInput.value}; color: rgb(${valR.value}, ${valG.value}, ${valB.value});`;
navigator.clipboard.writeText(css).then(() => {
alert(“CSS copied to clipboard!”);
});
}// — Dark Mode —
function toggleDarkMode() {
isDarkMode = !isDarkMode;
document.documentElement.classList.toggle(‘dark’);
const icon = document.getElementById(‘theme-icon’);
if(isDarkMode) {
icon.classList.remove(‘fa-moon’);
icon.classList.add(‘fa-sun’);
} else {
icon.classList.remove(‘fa-sun’);
icon.classList.add(‘fa-moon’);
}
}// Init
updateFromRGB();// — JAVASCRIPT SEPARATION END —
About the RGB To Hex tool The RGB To Hex page is part of Articles Stock’s online utilities collection. Use the tool above for the task described in its interface, and check the available file types, settings and output before proceeding. This utility relates to digital productivity.
How to use this tool Review the tool’s supported input and options. Select or enter the required input and choose the settings that suit your task. Run the tool and check the result before saving or sharing it. Related online tools Meta Tags Analyzer and Image Compressor can help with related tasks.