typescript - Hur man konverterar HCT till RGB

Jag undrade vad algoritmen är för att konvertera Googles nya färgrymd, HCT, till RGB. Till exempel, när du börjar med de tre HCT-värdena (nyans, kroma och ton) som: hct(156, 122, 50), hur skulle du då konvertera det till rgb(0, 137, 75)?

Google har släppt sina Material Color Utilities som öppen källkod, och det finns ett TypeScript-bibliotek, vilket i teorin låter användbart... Men jag kunde inte hitta något enkelt sätt att använda deras verktyg för att göra det jag behöver, eller ens algoritmen begravd någonstans i koden.

Svar #1

Med hjälp av Material Color Utilities kan du omvandla HCT till en RGB-hexkod.

import { Hct } from "@material/material-color-utilities";

const color = { hue: 156, chroma: 122, tone: 50 };
const hctObj = Hct.from(color.hue, color.chroma, color.tone);
const rgbHex = hctObj.argb.toString(16).slice(2);

console.log('Your hex is #' + rgbHex); // Your hex is #00894b

Börja med nyans, kroma och tonvärden, skapa ett Hct färgobjekt med hjälp av .from() metoden. Det färgobjektet innehåller en argb egenskap som är ett heltal. Du kan använda .toString(16) metoden för att konvertera heltalet till hexadecimal, och sedan .slice(2) för att ta bort alfa-data från hexkoden.

Med allt detta sagt skulle det vara mycket intressant att se den faktiska algoritmen beskriven på ett mer direkt sätt.

Svar #2

Property argb har markerats som privat.

export declare class Hct {
    // ...
    private argb;
    // ...
}

Farligt beteende, vi kan fortsätta använda det. Det rekommenderas att använda formen [] för att undvika TypeScript-felmeddelanden.

const sourceColor: [number, number, number] = [200, 50, 50]

// HCT to ARGB（type of the hctArgb is string）
const hctArgb = Hct.from(...sourceColor)['argb']

// ARGB string to RGBA object
/* the output like： 
 * {
 *   "r": 0,
 *   "g": 132,
 *   "b": 136,
 *   "a": 255
 * }
 */
const rgba = rgbaFromArgb(hctArgb)
console.log(rgba)

/* the output like：
 * rgb(0, 132, 136)
 */
const { r, g, b} = rgba
const rgb = `rgb(${r}, ${g}, ${b})`
console.log(rgb);