New table temperature colour gradients
This commit is contained in:
Fraxle
2026-05-24 19:19:15 +01:00
parent 69788f1069
commit 5574690887
5 changed files with 91 additions and 88 deletions
+28 -13
View File
@@ -34,19 +34,19 @@
// utciCategory() reads from this array - do not duplicate elsewhere.
// -------------------------------------------------------------------
export const UTCI_BANDS = [
{ max: -20, label: 'Extreme cold', bg: '#0e1a50', fg: '#c8d4f0' },
{ max: -10, label: 'Arctic', bg: '#2a52b0', fg: '#dce8ff' },
{ max: 0, label: 'Freezing', bg: '#5c90cc', fg: '#ffffff' },
{ max: 5, label: 'Very cold', bg: '#90bcd8', fg: '#08182e' },
{ max: 10, label: 'Cold', bg: '#b8d4dc', fg: '#08182e' },
{ max: 15, label: 'Chilly', bg: '#c8dfc0', fg: '#082010' },
{ max: 19, label: 'Cool', bg: '#8aca78', fg: '#082010' },
{ max: 24, label: 'Comfortable', bg: '#157018', fg: '#b8f0b8' },
{ max: 29, label: 'Warm', bg: '#e8d840', fg: '#201800' },
{ max: 34, label: 'Hot', bg: '#eca030', fg: '#201800' },
{ max: 39, label: 'Very hot', bg: '#d84818', fg: '#ffffff' },
{ max: 44, label: 'Extremely hot', bg: '#a81810', fg: '#ffc8b8' },
{ label: 'Danger', bg: '#3a0404', fg: '#ffffff' },
{ max: -20, label: 'Extreme cold', bg: '#5e668a', fg: '#ffffff' },
{ max: -10, label: 'Arctic', bg: '#708bca', fg: '#ffffff' },
{ max: 0, label: 'Freezing', bg: '#92b5dd', fg: '#1a1200' },
{ max: 5, label: 'Very cold', bg: '#b5d2e5', fg: '#1a1200' },
{ max: 10, label: 'Cold', bg: '#cfe2e8', fg: '#1a1200' },
{ max: 15, label: 'Chilly', bg: '#daead5', fg: '#1a1200' },
{ max: 19, label: 'Cool', bg: '#b1dba5', fg: '#1a1200' },
{ max: 24, label: 'Comfortable', bg: '#90d090', fg: '#157a15', fontWeight: 700 },
{ max: 29, label: 'Warm', bg: '#f8e554', fg: '#1a1200' },
{ max: 34, label: 'Hot', bg: '#f5aa54', fg: '#1a1200' },
{ max: 39, label: 'Very hot', bg: '#f07f6a', fg: '#1a1200' },
{ max: 44, label: 'Extremely hot', bg: '#dd5454', fg: '#000000' },
{ label: 'Danger', bg: '#880000', fg: '#ffffff', fontWeight: 700, darkenAmt: 0.18, textShadow: '-1px -1px 0 #3a0000, 1px -1px 0 #3a0000, -1px 1px 0 #3a0000, 1px 1px 0 #3a0000', solid: true },
];
export function utciCategory(u) {
@@ -55,6 +55,21 @@ export function utciCategory(u) {
}
}
// Diagonal sweep gradient for a band background hex colour.
// Pre-blends with 50% white to sit harmoniously alongside lighter table cells,
// then applies a light→mid→dark sweep for depth.
export function bandGradient(hex, darkenAmt = 0.04) {
const n = parseInt(hex.replace('#',''), 16);
const wb = (c) => Math.min(255, Math.round(c + (255 - c) * 0.50));
const [r, g, b] = [wb((n>>16)&255), wb((n>>8)&255), wb(n&255)];
const lighten = (c) => Math.min(255, Math.round(c + (255 - c) * 0.30));
const darken = (c) => Math.round(c * (1 - darkenAmt));
const light = '#' + [lighten(r), lighten(g), lighten(b)].map(x => x.toString(16).padStart(2,'0')).join('');
const mid = '#' + [r, g, b].map(x => x.toString(16).padStart(2,'0')).join('');
const dark = '#' + [darken(r), darken(g), darken(b) ].map(x => x.toString(16).padStart(2,'0')).join('');
return `linear-gradient(135deg, ${light} 0%, ${mid} 60%, ${dark} 100%)`;
}
// -------------------------------------------------------------------
// SOAK-FACTOR - SunScope's original rain/snow penalty.
// -------------------------------------------------------------------