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

Articulos recientes

Introducción
2026-08-03

Cómo generar sentencias CREATE TABLE desde un diseño visual | Generador de DDL

Un vistazo al interior del Generador de DDL, que convierte un diseño visual de tablas en sentencias CREATE TABLE y un diagrama ER. Incluye las reglas de conversión de tipos para MySQL/PostgreSQL/SQLite y el algoritmo de inferencia de columnas desde JSON.

Caso de uso
2026-07-21

Patrones de diseño de needs en GitHub Actions: acelere la CI y evite los antipatrones

Referencia de patrones para las dependencias entre jobs (needs) en GitHub Actions. Cubre la ramificación en diamante, la cancelación con concurrency, el equilibrio de fail-fast, las trampas de matrix con needs y los workflows reutilizables, con ejemplos YAML listos para copiar.

Caso de uso
2026-07-21

Referencia de sintaxis de diagramas ER en Mermaid: símbolos de relación y ejemplos reales

Referencia completa de la sintaxis erDiagram de Mermaid: chuleta de cardinalidad (pata de gallo), relaciones uno a muchos frente a muchos a muchos, atributos con PK/FK y un ejemplo completo de comercio electrónico.

Introducción
2026-07-21

Cómo construir consultas SELECT y JOIN visualmente con un SQL Builder

Ensamble cláusulas SELECT, WHERE y JOIN en su navegador con un constructor visual de SQL. Cómo funciona el entrecomillado automático de valores, tabla de uso de JOIN y cómo unir varias tablas.

Caso de uso
2026-07-21

Referencia completa de JOIN en SQL: diferencias entre INNER, LEFT, RIGHT y FULL

Referencia de los tipos de JOIN en SQL (INNER/LEFT/RIGHT/FULL/CROSS/SELF) con una chuleta y ejemplos de conteo de filas. Explica por qué los JOIN uno a muchos duplican filas, la trampa de NULL entre WHERE y ON, y cómo escribir JOINs con varias tablas.

Introducción
2026-07-16

Case Converter ― convierta a 9 estilos de nomenclatura a la vez: camelCase, snake_case, kebab-case

Cómo convertir identificadores y nombres de variables a 9 estilos de nomenclatura simultáneamente: camelCase, PascalCase, snake_case, CONSTANT_CASE, kebab-case y más. Cubre el manejo de mayúsculas consecutivas (HTTPServer), dígitos y conversión de listas completas.

Anuncio

Anuncio