Saltar al contenido
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.

Cambia rápidamente entre las utilidades más usadas sin salir de DevToolKits.

Artículos
1
Índice de artículos
IA y LLM
2
Generador de reglas para IA Contador de tokens LLM
Desarrollo y DevOps
8
Visualizador GitHub Actions Formateador SQL Constructor SQL Visual SQL → Diagrama ER Convertidor Curl Calculadora Chmod Editor y Parser de Cron Constructor de Diagramas de Infraestructura
Datos y Esquemas
6
Formateador JSON JSON → TypeScript JSON → Zod JSON → OpenAPI Conversor JSON ⇔ YAML Convertidor CSV ⇔ JSON
Seguridad y Criptografía
5
Base64 / 58 / 32 Herramienta JWT Generador Hash y HMAC Generador JWKS Generador UUID
Ayudas de Texto y Código
4
Generador Tablas Markdown Utilidades de Texto Probador de Regex Visor de Diferencias
URL, QR y Red
5
Codificar / Decodificar URL Calculadora IP / CIDR Parámetros URL → JSON Generador QR Lector QR
Diseño y UI
2
Utilidades de Color Generador de Favicon
Fecha y Hora
3
Conversor de Zona Horaria Unidades de Tiempo Conversor Timestamp UNIX