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

Artículos para esta herramienta

Artículos recientes

Caso de uso
2026-08-07

Opciones de curl: qué hacen realmente -X, -H y -d

Referencia de las opciones de curl que aparecen en el trabajo diario con APIs: por qué -d ya implica POST, en qué se diferencia de --data-raw, la @ inicial que lee un archivo sin avisar, comillas simples frente a dobles, y por qué -k y -L merecen más cuidado del habitual.

Introducción
2026-08-06

Convertir entre JSON Schema y Zod: cómo se corresponden required y .optional()

Por dentro de un conversor bidireccional que transforma JSON Schema en un esquema de Zod y el código Zod de vuelta a JSON Schema. Incluye los valores por defecto invertidos entre required y .optional(), la tabla de correspondencia de restricciones y cómo se analiza Zod sin ejecutar código.

Caso de uso
2026-08-06

Orden de evaluación en SQL: por qué WHERE no ve el alias del SELECT

El orden en que escribe las cláusulas de SQL no es el orden en que se ejecutan. Referencia del orden lógico (FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT), por qué fallan los alias en WHERE, cuándo usar WHERE y cuándo HAVING, ONLY_FULL_GROUP_BY y la trampa de LEFT JOIN con WHERE.

Caso de uso
2026-08-06

Formato unified diff: cómo leer las cabeceras @@ de git diff

Cómo leer el formato unified diff que genera git: qué significan los cuatro números de @@ -12,7 +12,9 @@, por qué un cambio de un solo carácter aparece como línea completa reemplazada, las trampas de los espacios y los finales de línea, \ No newline at end of file, los diffs combinados @@@ en los merges y la detección de renombrados.

Caso de uso
2026-08-06

Conversión UTC⇄JST: tabla del desfase de 9 horas y errores de zona horaria

Convierta entre UTC y la hora de Japón (JST) con una tabla de referencia, y vea por qué la diferencia con España cambia entre 7 y 8 horas según el horario de verano. Incluye el significado de Z y +09:00 en ISO 8601, cuándo JavaScript desplaza las fechas, el comportamiento de MySQL/PostgreSQL y por qué el cron de GitHub Actions siempre corre en UTC.

Caso de uso
2026-08-04

Referencia de CREATE TABLE: tipos y restricciones en MySQL, PostgreSQL y SQLite

Referencia de CREATE TABLE (DDL) con tablas comparativas entre bases de datos: tipos de datos, autoincremento (AUTO_INCREMENT / IDENTITY / rowid), comportamiento de ON DELETE en claves foráneas y la restricción CHECK que MySQL ignora en silencio.

Anuncio

Anuncio