Conversor de RGB a Hex: Códigos de Color para Diseño CSS con Conversión a HSL en Vivo

Estás maquetando y tienes el color en un formato, pero tu CSS, tu herramienta de diseño o tu compañero usan otro. Este conversor pasa entre RGB, hexadecimal y HSL en las dos direcciones, con la muestra del color siempre visible y los valores listos para copiar a tu hoja de estilos. Conversor de rgb a hex codigos de color diseño css gratis en IlmHunt, en línea y sin registro.

Herramientas relacionadas

Explora también estas herramientas gratuitas en español:

• Generador de Códigos de Barra EAN 13 Gratis para Imprimir: con el Dígito de Control Calculado
• Generador de Códigos QR Dinámicos Gratis con Logotipo vCard: QR Personalizables con Logo y la Verdad sobre los Dinámicos
• Generador de Consultas SQL Básicas: Constructor Visual SELECT sin Escribir Código
• Extractor de Comentarios de Código: Eliminar Comentarios de JavaScript sin Tocar Cadenas ni Regex
• Convertir Códigos ASCII a Caracteres Legibles Tabla de Traducción: Decimal, Hexadecimal, Binario y Octal
• Conversor de cm a px Píxeles Diseño Web Resolución DPI: También mm, Pulgadas y Puntos
• Separador de Nombres y Apellidos en Excel Online Gratis: Divide Nombre Completo en Tres Columnas y Descarga el CSV
• Limpiador de Bases de Datos de Nombres y Direcciones con Caracteres Raros: Quita Símbolos, Duplicados y Espacios

Ver todas las herramientas gratis en español

Inserta esta herramienta en tu web — gratis

Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;es&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Conversor de RGB a Hex y HSL&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:640px;margin:0 auto} h2{margin-top:0;font-size:20px} label{display:block;margin:10px 0 4px;font-weight:bold} input{width:100%;padding:8px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;font-family:inherit} .fila{display:flex;gap:8px} .fila&gt;div{flex:1} button{margin-top:14px;background:#0b5ed7;color:#fff;border:0;padding:10px 18px;border-radius:4px;cursor:pointer;font-size:16px} .muestra{height:90px;border-radius:8px;border:1px solid #ccc;margin-top:14px} .res{margin-top:14px;background:#eef6ee;border:1px solid #bcd8bc;padding:12px;border-radius:6px;line-height:1.7} .err{margin-top:14px;background:#fdeeee;border:1px solid #e5b4b4;padding:12px;border-radius:6px;display:none} code{background:#eef;padding:1px 5px;border-radius:3px} .nota{font-size:13px;color:#555;margin-top:12px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;h2&gt;Conversor de color RGB ↔ HEX ↔ HSL&lt;/h2&gt; &lt;div class=&quot;fila&quot;&gt; &lt;div&gt;&lt;label for=&quot;r&quot;&gt;Rojo (R)&lt;/label&gt;&lt;input id=&quot;r&quot; type=&quot;number&quot; min=&quot;0&quot; max=&quot;255&quot; value=&quot;26&quot;&gt;&lt;/div&gt; &lt;div&gt;&lt;label for=&quot;g&quot;&gt;Verde (G)&lt;/label&gt;&lt;input id=&quot;g&quot; type=&quot;number&quot; min=&quot;0&quot; max=&quot;255&quot; value=&quot;43&quot;&gt;&lt;/div&gt; &lt;div&gt;&lt;label for=&quot;b&quot;&gt;Azul (B)&lt;/label&gt;&lt;input id=&quot;b&quot; type=&quot;number&quot; min=&quot;0&quot; max=&quot;255&quot; value=&quot;60&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;label for=&quot;hex&quot;&gt;Código hexadecimal&lt;/label&gt; &lt;input id=&quot;hex&quot; type=&quot;text&quot; value=&quot;#1A2B3C&quot;&gt; &lt;div class=&quot;fila&quot;&gt; &lt;div&gt;&lt;label for=&quot;h&quot;&gt;Tono H (0-360)&lt;/label&gt;&lt;input id=&quot;h&quot; type=&quot;number&quot; min=&quot;0&quot; max=&quot;360&quot; value=&quot;210&quot;&gt;&lt;/div&gt; &lt;div&gt;&lt;label for=&quot;s&quot;&gt;Saturación S %&lt;/label&gt;&lt;input id=&quot;s&quot; type=&quot;number&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;40&quot;&gt;&lt;/div&gt; &lt;div&gt;&lt;label for=&quot;l&quot;&gt;Luminosidad L %&lt;/label&gt;&lt;input id=&quot;l&quot; type=&quot;number&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;17&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;muestra&quot; id=&quot;muestra&quot;&gt;&lt;/div&gt; &lt;div class=&quot;err&quot; id=&quot;err&quot;&gt;&lt;/div&gt; &lt;div class=&quot;res&quot; id=&quot;res&quot;&gt;&lt;/div&gt; &lt;button type=&quot;button&quot; id=&quot;btnCopiar&quot;&gt;Copiar HEX&lt;/button&gt; &lt;p class=&quot;nota&quot;&gt;Escribe en cualquier grupo (RGB, HEX o HSL) y los demás se actualizan al instante, todo en tu navegador.&lt;/p&gt; &lt;/div&gt; &lt;script&gt; // es-573: conversor RGB &lt;-&gt; HEX (+ HSL) function clamp255(n){n=Math.round(Number(n));if(isNaN(n))return 0;return Math.max(0,Math.min(255,n));} function rgbAHex(r,g,b){ function h(x){var s=clamp255(x).toString(16).toUpperCase();return s.length===1?'0'+s:s;} return '#'+h(r)+h(g)+h(b); } function hexARgb(hex){ if(typeof hex!=='string')return null; var h=hex.trim().replace(/^#/,''); if(/^[0-9a-fA-F]{3}$/.test(h)){h=h.split('').map(function(c){return c+c;}).join('');} if(!/^[0-9a-fA-F]{6}$/.test(h))return null; return {r:parseInt(h.substr(0,2),16),g:parseInt(h.substr(2,2),16),b:parseInt(h.substr(4,2),16)}; } function rgbAHsl(r,g,b){ r=clamp255(r)/255;g=clamp255(g)/255;b=clamp255(b)/255; var max=Math.max(r,g,b),min=Math.min(r,g,b),l=(max+min)/2,h=0,s=0,d=max-min; if(d!==0){ s=l&gt;0.5?d/(2-max-min):d/(max+min); if(max===r)h=(g-b)/d+(g&lt;b?6:0); else if(max===g)h=(b-r)/d+2; else h=(r-g)/d+4; h=h/6; } return {h:Math.round(h*360),s:Math.round(s*100),l:Math.round(l*100)}; } function hslARgb(h,s,l){ h=((h%360)+360)%360/360;s=Math.max(0,Math.min(100,s))/100;l=Math.max(0,Math.min(100,l))/100; if(s===0){var v=Math.round(l*255);return {r:v,g:v,b:v};} var q=l&lt;0.5?l*(1+s):l+s-l*s,p=2*l-q; function f(t){ if(t&lt;0)t+=1;if(t&gt;1)t-=1; if(t&lt;1/6)return p+(q-p)*6*t; if(t&lt;1/2)return q; if(t&lt;2/3)return p+(q-p)*(2/3-t)*6; return p; } return {r:Math.round(f(h+1/3)*255),g:Math.round(f(h)*255),b:Math.round(f(h-1/3)*255)}; } function invalido(msg){var e=document.getElementById('err');e.textContent=msg;e.style.display='block';} function valido(){document.getElementById('err').style.display='none';} function pintar(r,g,b,origen){ var hex=rgbAHex(r,g,b),hsl=rgbAHsl(r,g,b); if(origen!=='rgb'){document.getElementById('r').value=r;document.getElementById('g').value=g;document.getElementById('b').value=b;} if(origen!=='hex'){document.getElementById('hex').value=hex;} if(origen!=='hsl'){document.getElementById('h').value=hsl.h;document.getElementById('s').value=hsl.s;document.getElementById('l').value=hsl.l;} document.getElementById('muestra').style.background=hex; document.getElementById('res').innerHTML= '&lt;strong&gt;HEX:&lt;/strong&gt; &lt;code&gt;'+hex+'&lt;/code&gt;&lt;br&gt;'+ '&lt;strong&gt;RGB:&lt;/strong&gt; &lt;code&gt;rgb('+clamp255(r)+', '+clamp255(g)+', '+clamp255(b)+')&lt;/code&gt;&lt;br&gt;'+ '&lt;strong&gt;HSL:&lt;/strong&gt; &lt;code&gt;hsl('+hsl.h+', '+hsl.s+'%, '+hsl.l+'%)&lt;/code&gt;&lt;br&gt;'+ '&lt;strong&gt;CSS:&lt;/strong&gt; &lt;code&gt;color: '+hex+';&lt;/code&gt; · &lt;code&gt;background-color: '+hex+';&lt;/code&gt;'; } function desdeRgb(){ var r=parseInt(document.getElementById('r').value,10),g=parseInt(document.getElementById('g').value,10),b=parseInt(document.getElementById('b').value,10); if(isNaN(r)||isNaN(g)||isNaN(b)||r&lt;0||r&gt;255||g&lt;0||g&gt;255||b&lt;0||b&gt;255){invalido('RGB necesita tres números enteros entre 0 y 255.');return;} valido();pintar(r,g,b,'rgb'); } function desdeHex(){ var v=document.getElementById('hex').value; var rgb=hexARgb(v); if(!rgb){invalido('Ese código no es válido: usa 3 o 6 dígitos hexadecimales (0-9, A-F), por ejemplo #1A2B3C.');return;} valido();pintar(rgb.r,rgb.g,rgb.b,'hex'); } function desdeHsl(){ var h=parseFloat(document.getElementById('h').value),s=parseFloat(document.getElementById('s').value),l=parseFloat(document.getElementById('l').value); if(isNaN(h)||isNaN(s)||isNaN(l)||s&lt;0||s&gt;100||l&lt;0||l&gt;100){invalido('HSL necesita tono 0-360 y saturación/luminosidad entre 0 y 100.');return;} valido();var rgb=hslARgb(h,s,l);pintar(rgb.r,rgb.g,rgb.b,'hsl'); } ['r','g','b'].forEach(function(id){document.getElementById(id).addEventListener('input',desdeRgb);}); document.getElementById('hex').addEventListener('input',desdeHex); ['h','s','l'].forEach(function(id){document.getElementById(id).addEventListener('input',desdeHsl);}); document.getElementById('btnCopiar').addEventListener('click',function(){ var hex=document.getElementById('hex').value; if(navigator.clipboard)navigator.clipboard.writeText(hex); alert('Copiado: '+hex); }); desdeRgb(); &lt;/script&gt; &lt;script&gt;(function(){var ID=9103;function post(){try{parent.postMessage({wpcId:ID,wpcH:document.body.scrollHeight},'*');}catch(e){}}window.addEventListener('load',post);setInterval(post,600);})();&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-9103" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/conversor-de-rgb-a-hex-codigos-de-color/" target="_blank" rel="noopener">Conversor de RGB a Hex: Códigos de Color para Diseño CSS con Conversión a HSL en Vivo</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — herramientas gratis en línea</p>