1/**
2 * Convert a value in range [0, max] to an RGB color using a smooth perceptually uniform gradient
3 * This gradient goes from dark purple/blue (low values) to bright yellow/orange (high values)
4 * Similar to the plasma colormap - attractive and perceptually linear
5 */
6export function valueToColor(value: number, max: number): string {
7 const t = value / max;
9 // Smooth gradient from dark purple-blue to bright yellow-orange
10 // Carefully tuned for perceptual uniformity and attractiveness
11 let r: number, g: number, b: number;
13 // Red channel: smooth increase
14 r = Math.floor(13 + 242 * Math.pow(t, 0.5));
16 // Green channel: gentle S-curve for smoothness
17 g = Math.floor(8 + 247 * Math.pow(t, 1.5));
19 // Blue channel: decrease from purple to yellow
20 b = Math.floor(135 * Math.pow(1 - t, 2));
22 // Clamp values to valid range
23 r = Math.min(255, Math.max(0, r));
24 g = Math.min(255, Math.max(0, g));
25 b = Math.min(255, Math.max(0, b));
27 return `rgb(${r}, ${g}, ${b})`;
28}
30/**
31 * Get an array of colors for the color bar
32 */
33export function getColorGradient(steps: number): string[] {
34 const colors: string[] = [];
35 for (let i = 0; i < steps; i++) {
36 colors.push(valueToColor(i, steps - 1));
37 }
38 return colors;
39}