¿Cómo usar esta herramienta?
- Introduzca un código HEX (p. ej. #FF5733)
- Los valores RGB, HSL y OKLCH aparecen al instante
- Copie formatos individualmente o todos a la vez
¿Qué hace el conversor?
El conversor transforma un código HEX en valores RGB decimales y muestra además los equivalentes HSL y OKLCH. Acepta todos los formatos HEX comunes: abreviado de 3 dígitos (#F0A), estándar de 6 dígitos (#FF00AA) y de 8 dígitos con canal alfa (#FF00AA88). Espacios y el símbolo hash se limpian automáticamente.
¿Cuál es la fórmula?
Un código HEX codifica tres canales (rojo, verde, azul) en dos dígitos hexadecimales cada uno. La conversión divide el código en pares de bytes y convierte cada par de base 16 a base 10:
R = parseInt(hex[0:2], 16) → valor 0–255
G = parseInt(hex[2:4], 16) → valor 0–255
B = parseInt(hex[4:6], 16) → valor 0–255
Ejemplo: #FF5733 → R = FF₁₆ = 255, G = 57₁₆ = 87, B = 33₁₆ = 51 → rgb(255, 87, 51).
En el abreviado de 3 dígitos, cada dígito se duplica: #F0A → #FF00AA. En el HEX de 8 dígitos, los dos últimos codifican el alfa: AA₁₆ = 170, normalizado a 170/255 ≈ 0,67.
La conversión es sin pérdida matemática — HEX y RGB describen el mismo espacio sRGB en notaciones distintas. Ambos vienen de los primeros tiempos de la web: HEX de HTML 2.0 (1995), rgb() de CSS1 (1996).
¿Qué ejemplos de uso hay?
| HEX | RGB | HSL |
|---|---|---|
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FF5733 | rgb(255, 87, 51) | hsl(11, 100%, 60%) |
| #8F3A0C | rgb(143, 58, 12) | hsl(21, 85%, 30%) |
Además, el conversor calcula para cada entrada el valor OKLCH — relevante para autoría CSS moderna y generación de paletas.
¿Qué áreas de uso hay?
Exportar de Figma a CSS: las herramientas de diseño exportan colores como HEX. Para la configuración de Tailwind, las propiedades personalizadas de CSS o las paletas OKLCH se necesitan los valores decimales.
Traducir guías de marca: los PDF corporativos definen los colores normalmente en HEX. Para construir una hoja de estilos web se convierte sistemáticamente a rgb() o oklch() según el espacio deseado.
Comprobación de accesibilidad: los valores RGB son la entrada para el cálculo de contraste WCAG. Saber que #FF5733 corresponde al triplete (255, 87, 51) permite calcular la luminancia relativa y el ratio de contraste frente a negro o blanco.
Depuración de plantillas de correo: muchos clientes de correo solo soportan HEX o rgb() — no HSL ni OKLCH. Para depurar se convierte entre formatos.
Preguntas frecuentes
¿Cómo se convierte HEX a RGB?
Cada HEX consta de tres pares de bytes. Cada par se convierte de base 16 a base 10: #FF5733 → R=255, G=87, B=51.
¿Qué diferencia hay entre HEX y RGB?
Ambos describen sRGB. HEX es notación hexadecimal compacta (#RRGGBB), RGB es decimal de 0 a 255. Conversión sin pérdida.
¿Se puede indicar HEX con transparencia?
Sí, con HEX 8 dígitos (#RRGGBBAA). Los dos últimos definen alfa: 00 = transparente, FF = opaco. Equivalente CSS: rgba().
¿Qué significa #000000?
Negro. Tres canales en 0. Contrapuesto #FFFFFF es blanco.
¿Por qué OKLCH en lugar de solo RGB?
OKLCH es perceptualmente uniforme — iguales distancias numéricas dan iguales diferencias percibidas. Desde 2024 todos los navegadores soportan oklch() en CSS.
¿Qué herramientas de color están relacionadas?
Otras herramientas del ecosistema kittokit:
- Centímetros a pulgadas — conversión de longitud con cálculo paso a paso y tabla.
- Metros a pies — conversión métrico-imperial para estaturas, arquitectura y DIY.
- Kilogramos a libras — conversión de masa con factor exacto y ejemplos.
Última actualización: