Convertidor de Color

Herramienta gratuita en línea convert between color formats instantly. free online color converter supports hex, rgb, hsl, hsv, cmyk, and named colors. get color previews and accessibility info. no sign-up.

¿Te ha ayudado esta calculadora?

¿Qué es Convertidor de Color?

Un conversor de colores transforma colores entre los modelos de color HEX, RGB y HSL. Esencial para desarrolladores web y diseñadores que trabajan con CSS, herramientas de diseño y teoría del color. Incluye una muestra de vista previa en vivo.

Cuándo Usar Esta Calculadora

Al convertir especificaciones de color de diseño de Figma o Sketch a valores compatibles con CSS
Al construir un sistema de diseño y necesitar valores de color consistentes en HEX, RGB y HSL
Al crear paletas o esquemas de color usando HSL para mantener saturación y luminosidad consistentes
Al verificar el contraste de color para cumplimiento de accesibilidad (estándares WCAG AA/AAA)
Al convertir valores de color heredados en código existente a un formato diferente para consistencia
Al depurar problemas de color CSS verificando cómo se ve un color realmente en todos los formatos

Pasos:

Enter your input in the field above.
Configure any available options to customize the output.
View the results instantly with real-time updates.
Copy or export your results for use in your projects.

Fórmula

HEX → RGB: split #RRGGBB into decimal valors RGB → HSL: normalize RGB → find hue/saturation/lightness HSL → RGB: convertir via chroma fórmulas HEX: #RRGGBB (0-255 each) RGB: rgb(R, G, B) (0-255) HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)

Casos de uso

convertiring CSS color valors
Creando color schemes from base colors
coincidenciIAng design system colors
Comprender las relaciones de color a través de HSL

Beneficios Clave

Get accurate results instantly in your browser.
Save time with real-time calculations as you type.
No data leaves your device - complete privacy.
Free to use on any device, no sign-up required.

Consejos Profesionales

uso HSL for intuitive color adjustments
uso HEX for CSS compatibility
uso the preview to verify su color before usando it
Keep a reference of común color conversions

Errores Comunes que Debes Evitar

Olvidar el prefijo # para colores HEX
usando RGB valors above 255 or below 0
Confundir el rango de tono HSL (0-360) con RGB (0-255)

Términos Clave Explicados

HEX: Representación RGB hexadecimal
RGB: Red Green Blue color modelo
HSL: Modelo de tono, saturación y luminosidad
color space: Mathematical modelo for colors

Conceptos relacionados

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

Ejemplo

entrada: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). entrada: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.

Interpretación de sus resultados

El convertidor soporta tres formatos de color y muestra el valor equivalente en los tres simultáneamente. HEX (#RRGGBB) es el formato más común en el desarrollo web. RGB (rgb(R, G, B)) da control directo sobre canales individuales. HSL (hsl(H, S%, L%)) es el más intuitivo para humanos. El indicador de relación de contraste muestra si su combinación de color de primer plano/fondo cumple con los estándares de accesibilidad WCAG.

Preguntas frecuentes

Herramientas relacionadas

Explorar más herramientas

Calculadora de relación de aspecto

Calculadora de ancho de banda

Calculadora de tiempo de descarga

Calculadora de Costo de Hosting en la Nube

Calculadora de costos de CDN

Calculadora de monetización de API

Cuándo Usar Esta Calculadora

Al convertir especificaciones de color de diseño de Figma o Sketch a valores compatibles con CSS

Al construir un sistema de diseño y necesitar valores de color consistentes en HEX, RGB y HSL

Al crear paletas o esquemas de color usando HSL para mantener saturación y luminosidad consistentes

Al verificar el contraste de color para cumplimiento de accesibilidad (estándares WCAG AA/AAA)

Al convertir valores de color heredados en código existente a un formato diferente para consistencia

Al depurar problemas de color CSS verificando cómo se ve un color realmente en todos los formatos

Interpretación de sus resultados