DevToolKits.app
Diseño

Utilidad de Color

Convierta colores HEX, RGB, HSL y verifique la relación de contraste WCAG para accesibilidad.

Guía: Cómo usarlo y características

  • Introduce un color en HEX, RGB o HSL para ver las conversiones al instante.
  • Configura colores de primer plano y fondo para ver la relación de contraste y el estado WCAG.
  • Usa el texto de vista previa para ajustar la legibilidad.
  • Copia los valores resultantes y úsalos en CSS o herramientas de diseño.

Ejemplos: Ejemplos de entrada y salida

HEX から RGB/HSL に変換

Entrada

#1d4ed8

Salida

RGB: rgb(29, 78, 216)
HSL: hsl(221, 76%, 48%)

FAQ: Preguntas frecuentes

  • ¿Qué formatos de color se admiten?

    Puedes convertir entre HEX (#RGB / #RRGGBB), RGB y HSL.
  • ¿Qué comprobaciones WCAG se muestran?

    Se muestran las relaciones de contraste para texto normal y grande con estado de aprobado/reprobado.
  • ¿Se guarda mi entrada?

    Todo se procesa en el navegador. Al cerrar la página, la entrada se reinicia.

Casos de uso: Usos habituales

  • Convertir colores a formatos CSS

    Transforma valores HEX en RGB/HSL para guías de estilo o variables CSS.

  • Comprobar contraste

    Verifica combinaciones de texto y fondo según los requisitos WCAG.

  • Ajustar paletas y compartir valores

    Previsualiza legibilidad, ajusta colores y comparte códigos con tu equipo.

Notas: Notas y limitaciones

  • Todo se queda en el navegador

    Las entradas y salidas permanecen en tu dispositivo. Al cerrar la pestaña o borrar la caché, se eliminan los estados temporales.

  • Valida los datos críticos

    Los resultados son un apoyo; revísalos antes de enviarlos a sistemas productivos o compartirlos externamente.

  • Cargas grandes dependen del dispositivo

    Textos o archivos muy extensos pueden ir más lentos en algunos navegadores. Para tareas pesadas, usa un entorno de escritorio.

Conversión de Color

HEX
#007BFF
RGB
rgb(0, 123, 255)
HSL
hsl(211, 100%, 50%)

Verificador de Contraste (WCAG)

Relación de Contraste 21.00
Texto Normal
AA (4.5:1)
AAA (7.0:1)
Texto Grande
AA (3.0:1)
AAA (4.5:1)
Vista Previa

El veloz murciélago hindú comía feliz cardillo y escabeche.

Conversor de colores y verificador de contraste

Convierte colores entre HEX, RGB y HSL, y revisa el contraste entre texto y fondo. Es útil para implementar diseños en CSS, ajustar estados de interfaz y mejorar la legibilidad.

Cuándo usarlo

  • Convertir colores CSS: pasa entre formatos según la herramienta o código.
  • Comprobar contraste: revisa botones, enlaces, etiquetas y alertas.
  • Crear variaciones: ajusta luminosidad y saturación con HSL.

El contraste afecta a la accesibilidad. No comuniques estados importantes solo con color.

Articulos recientes

Introducción
2026-05-02

Convertir CSV y JSON: cómo elegir el formato correcto para APIs y migraciones

Aprende a convertir entre CSV y JSON con seguridad, incluyendo cabeceras, delimitadores, tipos de valores, datos anidados y flujos de trabajo prácticos.

Introducción
2026-05-02

Formatear y validar JSON: cómo revisar respuestas de API con seguridad

Aprende a formatear JSON, detectar errores de sintaxis, revisar tipos de valores y convertir respuestas de API en tipos, esquemas o documentación.

Historia de Desarrollo
2026-04-06

El problema de 'Nadie actualizó el diagrama de arquitectura'

¿Alguna vez sentiste ese escalofrío cuando alguien pregunta: 'Espera, ¿no hay otro servidor en medio?' Esta es la historia de cómo se creó un visualizador de infraestructura con Mermaid en tiempo real.

Historia de Desarrollo
2026-04-05

Perdiendo la cabeza en el infierno de YAML: Por qué construí un visualizador de CI/CD

Cuando las dependencias 'needs' en GitHub Actions se volvieron demasiado caóticas para los ojos humanos, decidí convertir el laberinto de YAML en un diagrama de flujo limpio.

Historia de Desarrollo
2026-04-04

Deja de llorar por los JOIN: Detrás del Visual SQL Builder

'Espera, ¿cómo funciona un LEFT JOIN?' Construí esta herramienta SQL sin código para que podamos dejar de perder horas depurando comas faltantes y errores de sintaxis.

Historia de Desarrollo
2026-03-09

Conversión de JSON a TypeScript mediante recursividad: la fuerza de las cero dependencias

Genere definiciones de tipos al instante a partir de respuestas de API. Una mirada entre bastidores a una implementación ligera y de alta velocidad utilizando algoritmos recursivos.