Code to Image Converter
Free online code to image converter: turn code snippets into beautiful social media screenshots with themes and gradients. 100% private with zero uploads.
HEX to RGB Converter
Convert HEX color codes to RGB, RGBA, and HSL formats instantly with live color swatch preview and one-click CSS copy. 100% free developer utility.
Click swatch to pick color
Preset Palette
Converted Formats
RGB Stringrgb(59, 130, 246)
RGBA Stringrgba(59, 130, 246, 1)
HSL Stringhsl(217, 91%, 60%)
CSS Rulebackground-color: #3B82F6;
Cómo usar: HEX to RGB Converter
Enter a 3-digit, 6-digit, or 8-digit hexadecimal color code in the input field.
Alternatively, click on the live color swatch to open your operating system's native color picker.
View the instant real-time color swatch preview and contrast balance.
Inspect the converted color representations: RGB, RGBA (with alpha transparency), HSL, and CSS rule.
Click 'Copy' next to any desired format to paste clean code directly into CSS, Tailwind, or Figma.
Ejemplos
- Entrada
- HEX Code: #3B82F6 (Tailwind Blue 500).
- Salida
- RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%) | CSS: background-color: #3B82F6;
Instant cross-format translation for UI styling and modern frontend web design.
- Entrada
- 3-digit shorthand HEX: #FFF.
- Salida
- RGB: rgb(255, 255, 255) | RGBA: rgba(255, 255, 255, 1).
Automatically expands shorthand 3-character notation to full 24-bit RGB values.
Precision Color Format Conversion for Designers & Web Developers
Modern UI styling frequently requires translating between design file hex codes and dynamic CSS variables, Tailwind configurations, or canvas rendering contexts. Toolhast gives you instant real-time conversions across HEX, RGB, RGBA, and HSL.
Preguntas frecuentes
What is the difference between HEX and RGB color models?
HEX (hexadecimal) represents colors as base-16 strings prefixed by a hash (e.g., #FF5733), whereas RGB defines colors as three integer channels (Red, Green, Blue) from 0 to 255. Both specify identical colors in the sRGB color space.
Does this tool support HEX colors with alpha transparency?
Yes. You can input 8-digit HEX codes (like #FF000080), and Toolhast will accurately calculate the alpha channel and output standard CSS rgba() values.
Can I input 3-character shorthand HEX codes?
Yes. Shorthand codes like #FFF or #F00 are automatically expanded to full 6-character hex equivalents (#FFFFFF and #FF0000) according to W3C CSS specifications.
What is HSL and why do designers use it?
HSL stands for Hue (color angle 0-360°), Saturation (intensity 0-100%), and Lightness (brightness 0-100%). It is much more intuitive for human designers when creating harmonious color palettes, hover states, and dark mode variants.
Does this color converter work offline?
Yes. All mathematical conversions and color swatch renderings run client-side in your web browser with zero network calls.
Is this color conversion tool free?
Yes, 100% free with unlimited conversions and instant one-click clipboard copying.
Herramientas relacionadas
Codificador Base64
Codifica y decodifica texto, archivos binarios e imágenes a formato Base64 con soporte UTF-8 completo.
Generador de Códigos de Barras
Crea códigos de barras comerciales UPC-A, EAN-13 y Code 128 listos para Amazon, empaques y vector SVG.
Privado: esta herramienta se ejecuta en su navegador. Nada de lo que escribe se sube.
Última actualización