MyDevTools
ES

Convertidor de colores

Convierte colores entre HEX, RGB, HSL y CMYK, genera una paleta de 9 tonos y comprueba el contraste WCAG entre dos colores en tu navegador.

Tus datos de entrada y archivos no salen del navegador

Color

Ejemplos: #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

Formatos convertidos

Comprobador de Contraste

Texto de ejemplo16 px

Texto de ejemplo24 px

Texto grande significa al menos 24 px en peso normal o unos 18,67 px en negrita.

Relación de contraste—

    Tintes y sombras

    Mezcla con negro (sombras) y blanco (tintes) en sRGB de luz lineal. Haz clic en una muestra para copiar su HEX.

    En esta página

    Pega un color CSS en cualquier notación habitual y obtén el mismo color en HEX, RGB, HSL y CMYK, listo para copiar. La página también crea una paleta de tonos más claros y oscuros y comprueba el contraste WCAG entre un texto y su fondo.

    Funcionalidad detallada

    El formato se detecta solo: #3b82f6, la forma corta #38f (la almohadilla es opcional), rgb(59, 130, 246) o rgba(…) con canales de 0 a 255 o en porcentaje, hsl(217, 91%, 60%) con deg opcional y cmyk(76%, 47%, 0%, 4%). También funciona la sintaxis CSS separada por espacios, como rgb(59 130 246 / 50%); el alfa se acepta pero se ignora, porque los resultados no tienen transparencia. Los valores no válidos o fuera de rango se marcan con un error en lugar de adivinarse. También puedes elegir el color con el selector nativo.

    La paleta de tintes y sombras mezcla el color actual con negro (sombras) y blanco (tintes) al 20, 40, 60 y 80 % en sRGB de luz lineal: nueve muestras con el original en el centro; al hacer clic en una muestra se copia su código HEX. El comprobador de contraste recibe un color de texto y uno de fondo y muestra la relación junto con los cuatro umbrales de WCAG 2.x: AA 4.5:1 y AAA 7:1 para texto normal, AA 3:1 y AAA 4.5:1 para texto grande.

    Todas las conversiones son fórmulas de JavaScript que se ejecutan en la página; no se sube nada. El CMYK usa la fórmula simple sin perfil ICC, así que sirve como referencia, no para preimpresión. HSL y CMYK se redondean a enteros, por lo que al convertirlos de vuelta pueden diferir en una unidad.

    Ejemplos prácticos

    De HEX a todo: #3b82f6 da rgb(59, 130, 246), hsl(217, 91%, 60%) y cmyk(76%, 47%, 0%, 4%).

    De HSL a HEX: hsl(0, 100%, 50%) se convierte en #FF0000, igual que cmyk(0%, 100%, 100%, 0%).

    Contraste: texto gris #777777 sobre fondo blanco #ffffff tiene una relación de 4.48:1: cumple AA para texto grande (3:1) pero no AA para texto normal (4.5:1).

    Par por defecto: el par predefinido #1e3a8a sobre #ffffff llega a 10.36:1 y cumple los cuatro niveles WCAG.

    Cómo usar esta herramienta

    1. Introduce un color

      Escribe o pega un valor en Entrada manual (HEX, rgb(), hsl() o cmyk()) y pulsa Convertir o Enter, o elige un color con el Selector de color.

    2. Copia el formato que necesitas

      En Formatos convertidos, pulsa el botón de copiar junto a HEX, RGB, HSL o CMYK.

    3. Copia un tinte o una sombra

      En Tintes y sombras, haz clic en una muestra para copiar su código HEX.

    4. Comprueba el contraste

      En el Comprobador de Contraste, ajusta el Color del texto y el Color de fondo y revisa la relación y los resultados AA/AAA.

    Consejos y mejores prácticas

    • La # es opcional y la forma de tres dígitos funciona: 38f se lee como #3388FF.
    • El matiz puede llevar deg o no; saturación y luminosidad van de 0 a 100.
    • Los valores fuera de rango (por ejemplo rgb(300, 0, 0)) se rechazan en lugar de recortarse en silencio.
    • Para texto de párrafo apunta a 4.5:1 como mínimo; 3:1 solo basta para texto grande (24 px o 18,66 px en negrita).
    • No uses este CMYK para producción impresa: pide a la imprenta valores según su perfil ICC.