Herramienta de Temperatura de Color

Ajustar la temperatura del color desplazando colores entre tonos cálidos (rojo/amarillo) y fríos (azul), perfecto para iluminación de ambiente y efectos atmosféricos

Desplazamiento hacia tonos cálidos (positivo) o fríos (negativo)

Mantener brillo original al ajustar temperatura

Datos clave

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

Resumen

La Herramienta de Temperatura de Color permite ajustar con precisión el tono de cualquier color base, desplazándolo entre matices cálidos y fríos para lograr la atmósfera visual perfecta en tus diseños.

Cuándo usarlo

  • •Cuando necesitas armonizar una paleta de colores para que todos los elementos compartan una temperatura visual coherente.
  • •Al diseñar esquemas de iluminación de ambiente o efectos atmosféricos que requieren transiciones sutiles entre tonos cálidos y fríos.
  • •Para corregir o modificar el impacto psicológico de un color base, ajustándolo hacia una sensación más acogedora o más técnica y profesional.

Cómo funciona

  • •Selecciona tu color base utilizando el selector de color integrado.
  • •Ajusta el desplazamiento de temperatura mediante el control deslizante para mover el tono hacia el espectro cálido o frío.
  • •Elige el modo de ajuste preferido, como Balance RGB o Temperatura Kelvin, para obtener resultados técnicos precisos.
  • •Activa la opción de preservar luminosidad si deseas mantener el brillo original mientras modificas la temperatura del color.

Casos de uso

Creación de paletas de colores para interfaces de usuario que requieren modos diurnos (cálidos) y nocturnos (fríos).
Ajuste de activos gráficos para que coincidan con la iluminación de una fotografía o entorno específico.
Desarrollo de guías de estilo donde se necesita estandarizar la calidez de los colores corporativos.

Ejemplos

1. Adaptación de paleta para modo nocturno

Diseñador UI
Contexto
El diseñador necesita adaptar una interfaz brillante a un modo oscuro que sea menos fatigante para la vista.
Problema
Los colores actuales son demasiado vibrantes y cálidos para un entorno de baja luz.
Cómo usarlo
Selecciona el color principal, aplica un desplazamiento negativo hacia tonos fríos y activa 'Preservar Luminosidad'.
Configuración de ejemplo
temperatureShift: -40, mode: 'rgb_balance', preserveLuminance: true
Resultado
Se obtiene una versión fría y equilibrada del color original que mantiene la legibilidad sin causar fatiga visual.

2. Ajuste de iluminación para renderizado

Artista 3D
Contexto
Se requiere que los colores de los materiales de un renderizado coincidan con una iluminación de atardecer.
Problema
Los materiales base se ven demasiado neutros y no transmiten la calidez del entorno.
Cómo usarlo
Utiliza el modo 'Calor Psicológico' para desplazar el color base hacia tonos amarillos y rojos.
Configuración de ejemplo
temperatureShift: 60, mode: 'psychological', showHexCodes: true
Resultado
El color base se transforma en un tono cálido y envolvente, ideal para simular la luz dorada del atardecer.

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 de Análisis de Logs ELK Stack
Muestras completas de ELK Stack para agregación, procesamiento y visualización de logs en sistemas distribuidos
task process
sample

Hubs relacionados

Herramientas de conversion de espacios de color para web e impresion
Herramientas reunidas para conversion de espacios de color entre web e impresion en un solo hub.
Generadores de efectos CSS, paletas y tokens de diseno
Herramientas reunidas para efectos visuales CSS, construccion de paletas y generacion de tokens de diseno en un solo hub.

Preguntas frecuentes

¿Qué diferencia hay entre el modo de desplazamiento de tono y el balance RGB?

El desplazamiento de tono utiliza la rueda de color para rotar el matiz, mientras que el balance RGB ajusta directamente los canales rojo, verde y azul para alterar la temperatura.

¿Puedo ver los valores técnicos del nuevo color generado?

Sí, la herramienta permite mostrar automáticamente los códigos HEX, valores RGB y valores HSL del color resultante.

¿Qué hace la opción 'Preservar Luminosidad'?

Mantiene el nivel de brillo original del color base, asegurando que el ajuste de temperatura solo afecte al matiz y no a la intensidad lumínica.

¿Es posible comparar el color original con el modificado?

Sí, al activar la opción 'Mostrar Color Original', la interfaz presentará una comparativa lado a lado para facilitar la evaluación del cambio.

¿Cómo puedo generar múltiples variantes de un mismo color?

Activa la opción 'Generar Variaciones de Temperatura' para obtener una gama de tonos basados en diferentes niveles de desplazamiento.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/color-temperature

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
baseColor color Sí -
temperatureShift number No Desplazamiento hacia tonos cálidos (positivo) o fríos (negativo)
mode select No -
preserveLuminance checkbox No Mantener brillo original al ajustar temperatura
showOriginal checkbox No -
showHexCodes checkbox No -
showRgbValues checkbox No -
showHslValues checkbox No -
generateVariations 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-temperature": {
      "name": "color-temperature",
      "description": "Ajustar la temperatura del color desplazando colores entre tonos cálidos (rojo/amarillo) y fríos (azul), perfecto para iluminación de ambiente y efectos atmosféricos",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-temperature",
      "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]