Aclarar/Oscurecer Color

Ajusta el brillo de los colores y crea variaciones

-100 20 100

Cantidad de ajuste para el brillo del color (-100% a +100%)

Solo se aplica cuando "Gradiente (rango completo)" está seleccionado. Controla cuántos colores generar en la secuencia del gradiente (2-20 pasos)

Datos clave

Categoría
Diseño y color
Tipos de entrada
color, select, range, number, checkbox
Tipo de salida
html
Cobertura de muestras
3
API disponible
Yes

Resumen

Esta herramienta permite ajustar con precisión el brillo de cualquier color, facilitando la creación de paletas consistentes, sombras suaves o resaltes brillantes para tus proyectos de diseño.

Cuándo usarlo

  • •Cuando necesitas generar variantes de un color corporativo para estados de botones o elementos de interfaz.
  • •Al crear una paleta de colores completa a partir de un solo tono base para mantener la armonía visual.
  • •Para ajustar la legibilidad de un texto sobre un fondo modificando ligeramente su luminosidad.

Cómo funciona

  • •Selecciona tu color base utilizando el selector de color o ingresando el código hexadecimal.
  • •Elige el tipo de ajuste deseado: aclarar, oscurecer, generar un gradiente o aplicar una configuración personalizada.
  • •Define el porcentaje de ajuste o el número de pasos si optas por crear una escala de gradiente.
  • •Obtén instantáneamente los nuevos códigos de color listos para copiar y usar en tu código CSS o herramientas de diseño.

Casos de uso

Diseño de sistemas de diseño (Design Systems) para definir estados 'hover' y 'active' de botones.
Creación de esquemas de colores para gráficos y visualización de datos que requieren jerarquía visual.
Desarrollo web para generar sombras suaves o fondos sutiles basados en el color principal de la marca.

Ejemplos

1. Creación de estados para botones

Diseñador UI
Contexto
Necesito definir los estados de interacción para un botón principal de color azul (#4A90E2).
Problema
El botón necesita oscurecerse ligeramente al pasar el cursor (hover) para indicar interactividad.
Cómo usarlo
Selecciono el color base, elijo 'Oscurecer' y aplico un ajuste del 15%.
Configuración de ejemplo
baseColor: #4A90E2, adjustmentType: darken, adjustmentValue: 15
Resultado
Obtengo un tono azul más profundo que mantiene la identidad de marca pero comunica claramente el estado de interacción.

2. Generación de paleta de gradiente

Desarrollador Frontend
Contexto
Estoy creando una barra de progreso que debe mostrar una transición suave de color.
Problema
Necesito 5 variaciones del color base para representar diferentes niveles de carga.
Cómo usarlo
Selecciono el color base, elijo 'Gradiente' y configuro 5 pasos.
Configuración de ejemplo
baseColor: #4A90E2, adjustmentType: gradient, steps: 5
Resultado
La herramienta genera una secuencia de 5 colores que van desde el más claro al más oscuro, perfectos para el gradiente de la barra.

Probar con muestras

design
Ejemplos de Códigos de Color
Colección de códigos de color en varios formatos (Hex, RGB, HSL, colores con nombre) para pruebas de validación
title token color
sample
Muestras ICS del Planificador por Zona Horaria
Archivos ICS con la misma estructura devuelta por Time Zone Workflow Scheduler, incluyendo varios VEVENT de candidatos
task generate
sample
Muestras PDF
Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10
task generate
sample

Hubs relacionados

Herramientas de Design para Generate
Explora 19 herramientas de design para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Design para Convert
Explora 98 herramientas de design para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Json para Generate
Explora 33 herramientas de json para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Pdf para Generate
Explora 11 herramientas de pdf para flujos de generate y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Puedo generar múltiples variaciones a la vez?

Sí, seleccionando la opción 'Gradiente' puedes definir el número de pasos para obtener una escala completa de tonos.

¿Qué hace la opción 'Preservar Saturación Relativa'?

Mantiene la intensidad del color original mientras ajusta únicamente su luminosidad, evitando que el color se vuelva grisáceo al aclararlo.

¿Es posible obtener colores complementarios?

Sí, activando la casilla 'Incluir Colores Complementarios' la herramienta generará automáticamente el tono opuesto en el círculo cromático.

¿Qué rango de ajuste puedo aplicar?

Puedes ajustar el brillo desde -100% (negro total) hasta +100% (blanco total) con incrementos precisos.

¿En qué formato se entregan los resultados?

Los resultados se presentan en formato HTML/CSS, mostrando los códigos hexadecimales listos para implementar.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/color-lighten-darken

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
baseColor color Sí -
adjustmentType select Sí -
adjustmentValue range No Cantidad de ajuste para el brillo del color (-100% a +100%)
steps number No Solo se aplica cuando "Gradiente (rango completo)" está seleccionado. Controla cuántos colores generar en la secuencia del gradiente (2-20 pasos)
includeComplementary checkbox No -
preserveSaturation checkbox No -

Formato de respuesta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-color-lighten-darken": {
      "name": "color-lighten-darken",
      "description": "Ajusta el brillo de los colores y crea variaciones",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-lighten-darken",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]