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.

Artículos recientes

Story
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.

Read more
Story
2026-03-09

Verificación segura de JWT en el navegador: la perspectiva de un ingeniero de seguridad

Manejo seguro de tokens confidenciales. Por qué utilizamos la librería 'jose' y el procesamiento local para el diseño de nuestra herramienta JWT.

Read more
Story
2026-03-09

Generar códigos QR: más rápido y seguro

Uso de la API Canvas y node-qrcode para lograr una generación en tiempo real y protección de la privacidad íntegramente en el navegador.

Read more
Story
2026-03-09

Seguro sin transmisión de datos: antecedentes de nuestra herramienta Diff basada en el navegador

Cómo diseñamos una herramienta de comparación de texto privada y de alta velocidad utilizando computación en el navegador para priorizar la privacidad del usuario.

Read more
Story
2026-03-09

Conversión de zona horaria sin librerías: el poder de la API Intl

La historia detrás de una herramienta de procesamiento de zona horaria ligera implementada usando solo la API Intl nativa del navegador, sin Moment.js o date-fns.

Read more
Story
2026-03-03

La historia detrás de la conversión de SQL a diagrama ER: compromiso con la ejecución solo en el navegador

Descubra los antecedentes de nuestra herramienta de SQL a ER y los desafíos técnicos de equilibrar la seguridad con la conveniencia.

Read more

Anuncio

Anuncio