Temperature To Color

Convert temperature, or any other quantity, to a RGB color

Installation

npm i temp-color

yarn add temp-color

Usage

import { tempToColor } from 'temp-color';

const { r, g, b } = tempToColor(10, -30, 30);

const { r, g, b } = tempToColor(10, 0, 100, 'half');

const { r, g, b } = tempToColor(10, -30, 30, 'extended');

Parameters

tempToColor = (t: number, min: number, max: number, mode?: string) : {r: number, g: number, b: number}

Function takes four parameters:

• t - value that will be scaled into RGB
• min - lowest possible value (scale begins there)
• max - highest possible value (scale ends there)
• mode - OPTIONAL

Mode

• default - scaling from blue to red -> no need to provide any additional parameters
• extended - scaling from violet-blue to violet-red -> add 'extended' parameter at the end
• half - scaling from green to red (from good to bad); no blue colors -> add 'half' parameter at the end

Function returns an object with calculated RGB values

Examples

Change background dynamically based on a value set by a range slider

import {tempToColor} from 'temp-color';

let isHeld = false;
const box = document.querySelector("#box");
const slider = document.querySelector("#slider");

slider.addEventListener('mousedown', () => {
    isHeld = true;
});

slider.addEventListener('mouseup', () => {
    isHeld = false;
});

slider.addEventListener('mousemove', () => {
    if (isHeld) {
        const {r,g,b} = tempToColor(parseFloat(slider.value), parseInt(slider.min), parseInt(slider.max));
        box.style.background = `rgb(${r},${g},${b})`;
    }
});