Convertidor de Unidades y Colores CSS

Entendiendo los colores y unidades CSS

Formatos de color HEX, RGB y HSL

CSS admite varios formatos de color, cada uno con ventajas únicas. <strong>Los colores HEX</strong> usan una notación hexadecimal de seis caracteres (ej. <code>#22c55e</code>) y son el formato más común en diseño web por su brevedad.

<strong>RGB (Rojo, Verde, Azul)</strong> usa valores decimales de 0 a 255 para cada canal. El formato <code>rgb(34, 197, 94)</code> es más legible y permite manipular canales individuales fácilmente.

<strong>HSL (Tono, Saturación, Luminosidad)</strong> es el más intuitivo para diseñadores. El tono es un grado en la rueda de colores (0–360), mientras que la saturación y luminosidad son porcentajes.

CSS Named Colors

CSS provides 147 named colors like coral, steelblue, and rebeccapurple. While convenient for prototyping, named colors offer limited precision. Converting a CSS color name to HEX or RGB gives you exact values you can fine-tune for production use.

CMYK para diseño de impresión

<strong>CMYK</strong> es el modelo de color estándar para impresión. Convertir colores web de HEX o RGB a CMYK ayuda a preparar activos para producción impresa.

HSV en herramientas de diseño

<strong>HSV</strong> es el modelo de color nativo en herramientas como Photoshop, Figma y Sketch.

PX vs REM: Unidades CSS explicadas

<strong>Los píxeles (PX)</strong> son unidades absolutas. <strong>REM</strong> son relativas al tamaño de fuente del elemento raíz (típicamente 16px). Usar REM asegura que tus diseños escalen proporcionalmente.

La conversión es sencilla: divide los píxeles por 16 para obtener valores REM. Por ejemplo, 24px es igual a 1.5rem.

<strong>Las unidades EM</strong> son relativas al tamaño de fuente del elemento padre, a diferencia de REM que referencia la raíz.

• 1rem = 16px (default browser setting)
• 1em = parent font-size (context-dependent)
• 0.75rem = 12px — common for small/caption text
• 1.25rem = 20px — common for subheadings
• 2rem = 32px — common for section headings

¿Por qué usar convertidores CSS?

Convertir manualmente entre formatos de color es tedioso y propenso a errores. Las herramientas de conversión automática ahorran tiempo y eliminan errores.

• Instant results — paste a value and get the converted output immediately, no formulas needed.
• Copy-ready output — every result includes a one-click copy button with properly formatted CSS syntax.
• Color preview — see a live swatch of the converted color to visually confirm accuracy.
• No installation — works in any browser, on any device. No extensions, downloads, or signups.
• Developer-friendly — shareable URLs with pre-filled values for easy team collaboration.

Common CSS Conversion Workflows

• Design handoff: Figma and Sketch export colors as HEX. Convert to RGB or HSL if your codebase uses those formats.
• Dark mode generation: Take your light-mode HSL palette, adjust lightness values, and convert back to HEX.
• Accessibility checks: Convert colors to RGB to calculate contrast ratios using the WCAG luminance formula.
• Legacy migration: Convert pixel-based layouts to rem-based responsive systems during refactors.
• Cross-browser debugging: Quickly convert colors to match your source code format.

Supported Conversions