Convertidor de colores

Convierte colores entre HEX, Formatos RGB y HSL

Elija un color

O ingrese los valores a continuación

HEX

RGB

HSL

Comprensión Formatos de color

Los colores digitales se pueden representar en múltiples formatos, cada uno con diferentes ventajas. esta herramienta convierte sin problemas entre los tres formatos de color web más comunes: HEX, RGB y HSL. Todos el procesamiento ocurre en su navegador: sus elecciones de color nunca se rastrean ni almacenan.

#️⃣ HEX (Hexadecimal)

Formato: #RRGGBB (6 caracteres) o #RGB (taquigrafía de 3 caracteres)
Ejemplo: #2563EB o #F00 (rojo)
Ideal para: CSS, atributos HTML, herramientas de diseño. Formato más compacto para desarrollo web.

🔴🟢🔵 RGB (rojo, verde, azul)

Formato: rgb(R, G, B) donde cada valor es 0-255
Ejemplo: rgb(37, 99, 235)
Ideal para: Funciones CSS, manipulación de color JavaScript, programática generación de color. Fácil de entender como mezcla ligera.

🌈HSL (Tono, Saturación, Luminosidad)

Formato: hsl(H, S%, L%) donde H es 0-360°, S y L son 0-100%
Ejemplo: hsl(221, 83%, 53%)
Ideal para: Creación de combinaciones de colores, ajuste de brillo/saturación. la mayoría intuitivo para la percepción humana.

Casos de uso comunes

Estilo CSS: Convertir entre formatos para diferentes propiedades CSS y compatibilidad del navegador
Transferencia de diseño: Traducir colores de herramientas de diseño (a menudo HEX) a formatos compatibles con el código
Esquemas de color: Utilice HSL para crear variaciones (ajustar la luminosidad para los estados de desplazamiento)
Accesibilidad: Calcular el contraste proporciones utilizando valores RGB
Directrices de marca: Colores del documento en múltiples formatos para diferentes casos de uso

Consejos rápidos sobre teoría del color

Creación Estados de desplazamiento

Utilice HSL: disminuya la luminosidad entre un 10 y un 15 % para efectos de desplazamiento más oscuros o aumente para efectos más claros. unos. Mucho más fácil que calcular los cambios RGB.

Garantizar Contraste

Para cumplir con WCAG AA, el texto necesita una relación de contraste de 4,5:1. HSL Diferencias de luminosidad de Más del 40% suelen cumplir con este requisito.

Preguntas frecuentes

¿Qué formato debo usar? en CSS?

Los tres funcionan en navegadores modernos. HEX es el más común y compacto. Utilice RGB/HSL cuando lo necesite transparencia (rgba() o hsla()) o Manipulación dinámica del color.

¿Qué significa el # en HEX? significa?

El símbolo # indica un valor de color hexadecimal. Es obligatorio en CSS pero a menudo opcional en herramientas de diseño. Los siguientes 6 caracteres representan rojo, verde y azul en base 16 (00-FF = 0-255).

¿Cómo funciona HSL Hue?

El tono es un grado en la rueda de colores: 0° = Rojo, 60° = Amarillo, 120° = Verde, 180° = Cian, 240° = Azul, 300° = Magenta, 360° = volver a Rojo. Facilita la selección de colores complementarios (180° aparte) intuitivo.

¿Puedo agregar transparencia?

¡Sí! Utilice rgba(R, G, B, A) o hsla(H, S%, L%, A) donde A es 0-1. CSS moderno también admite 8 caracteres HEX: #RRGGBBAA.

Referencia de color CSS

                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);