Files
acad-ia-2/src/utils/colors.ts
T
Guillermo.Arrieta 8ae3469e10 mejoras de diseño de mapa curricular parte 3
- Se cambió el layout para ser más claro de usar
- El botón de agregar linea abre un dialog donde eliges como llamar tu nueva línea curricular
- Al agregar lineas curriculares se les asigna un color al azar que persiste en la base de datos
- al quitarle zoom a la pagina los margenes permanecen
2026-03-26 22:24:17 -06:00

37 lines
1.1 KiB
TypeScript

// Convierte HSL a Hexadecimal
function hslToHex(h: number, s: number, l: number): string {
l /= 100
const a = (s * Math.min(l, 1 - l)) / 100
const f = (n: number) => {
const k = (n + h / 30) % 12
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
return Math.round(255 * color)
.toString(16)
.padStart(2, '0')
}
return `#${f(0)}${f(8)}${f(4)}`
}
/**
* Genera un color contrastante.
* @param prevHue El tono (0-360) del color anterior. Null si es el primero.
* @returns Objeto con el hex y el nuevo hue para guardar como referencia.
*/
export function generarColorContrastante(prevHue: number | null = null) {
let newHue: number
if (prevHue === null) {
// Primer color: completamente al azar
newHue = Math.floor(Math.random() * 360)
} else {
// Siguientes: Salto aleatorio entre 130° y 230° para forzar contraste
const salto = 130 + Math.floor(Math.random() * 100)
newHue = (prevHue + salto) % 360
}
// Mantenemos saturación al 70% y luminosidad al 50% para colores vivos pero no fosforescentes
const hex = hslToHex(newHue, 70, 50)
return { hex, hue: newHue }
}