Files
VibeCoding/.agents/skills/display-glasses-with-jetpack-compose-glimmer/references/material-hct-source.md

217 lines
6.3 KiB
Markdown

Use the following calculation metrics for color contrast in `hct.ts`:
```typescript
/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* A color system built using CAM16 hue and chroma, and L* from
* L*a*b*.
*
* Using L* creates a link between the color system, contrast, and thus
* accessibility. Contrast ratio depends on relative luminance, or Y in the XYZ
* color space. L*, or perceptual luminance can be calculated from Y.
*
* Unlike Y, L* is linear to human perception, allowing trivial creation of
* accurate color tones.
*
* Unlike contrast ratio, measuring contrast in L* is linear, and simple to
* calculate. A difference of 40 in HCT tone guarantees a contrast ratio >= 3.0,
* and a difference of 50 guarantees a contrast ratio >= 4.5.
*/
import * as utils from '../utils/color_utils.js';
import {Cam16} from './cam16.js';
import {HctSolver} from './hct_solver.js';
import {ViewingConditions} from './viewing_conditions.js';
/**
* HCT, hue, chroma, and tone. A color system that provides a perceptually
* accurate color measurement system that can also accurately render what colors
* will appear as in different lighting environments.
*/
export class Hct {
/**
* @param hue 0 <= hue < 360; invalid values are corrected.
* @param chroma 0 <= chroma < ?; Informally, colorfulness. The color
* returned may be lower than the requested chroma. Chroma has a different
* maximum for any given hue and tone.
* @param tone 0 <= tone <= 100; invalid values are corrected.
* @return HCT representation of a color in default viewing conditions.
*/
internalHue: number;
internalChroma: number;
internalTone: number;
static from(hue: number, chroma: number, tone: number) {
return new Hct(HctSolver.solveToInt(hue, chroma, tone));
}
/**
* @param argb ARGB representation of a color.
* @return HCT representation of a color in default viewing conditions
*/
static fromInt(argb: number) {
return new Hct(argb);
}
toInt(): number {
return this.argb;
}
/**
* A number, in degrees, representing ex. red, orange, yellow, etc.
* Ranges from 0 <= hue < 360.
*/
get hue(): number {
return this.internalHue;
}
/**
* @param newHue 0 <= newHue < 360; invalid values are corrected.
* Chroma may decrease because chroma has a different maximum for any given
* hue and tone.
*/
set hue(newHue: number) {
this.setInternalState(
HctSolver.solveToInt(
newHue,
this.internalChroma,
this.internalTone,
),
);
}
get chroma(): number {
return this.internalChroma;
}
/**
* @param newChroma 0 <= newChroma < ?
* Chroma may decrease because chroma has a different maximum for any given
* hue and tone.
*/
set chroma(newChroma: number) {
this.setInternalState(
HctSolver.solveToInt(
this.internalHue,
newChroma,
this.internalTone,
),
);
}
/** Lightness. Ranges from 0 to 100. */
get tone(): number {
return this.internalTone;
}
/**
* @param newTone 0 <= newTone <= 100; invalid valids are corrected.
* Chroma may decrease because chroma has a different maximum for any given
* hue and tone.
*/
set tone(newTone: number) {
this.setInternalState(
HctSolver.solveToInt(
this.internalHue,
this.internalChroma,
newTone,
),
);
}
/** Sets a property of the Hct object. */
setValue(propertyName: string, value: number) {
(this as any)[propertyName] = value;
}
toString(): string {
return `HCT(${this.hue.toFixed(0)}, ${this.chroma.toFixed(0)}, ${
this.tone.toFixed(0)})`;
}
static isBlue(hue: number): boolean {
return hue >= 250 && hue < 270;
}
static isYellow(hue: number): boolean {
return hue >= 105 && hue < 125;
}
static isCyan(hue: number): boolean {
return hue >= 170 && hue < 207;
}
private constructor(private argb: number) {
const cam = Cam16.fromInt(argb);
this.internalHue = cam.hue;
this.internalChroma = cam.chroma;
this.internalTone = utils.lstarFromArgb(argb);
this.argb = argb;
}
private setInternalState(argb: number) {
const cam = Cam16.fromInt(argb);
this.internalHue = cam.hue;
this.internalChroma = cam.chroma;
this.internalTone = utils.lstarFromArgb(argb);
this.argb = argb;
}
/**
* Translates a color into different [ViewingConditions].
*
* Colors change appearance. They look different with lights on versus off,
* the same color, as in hex code, on white looks different when on black.
* This is called color relativity, most famously explicated by Josef Albers
* in Interaction of Color.
*
* In color science, color appearance models can account for this and
* calculate the appearance of a color in different settings. HCT is based on
* CAM16, a color appearance model, and uses it to make these calculations.
*
* See [ViewingConditions.make] for parameters affecting color appearance.
*/
inViewingConditions(vc: ViewingConditions): Hct {
// 1. Use CAM16 to find XYZ coordinates of color in specified VC.
const cam = Cam16.fromInt(this.toInt());
const viewedInVc = cam.xyzInViewingConditions(vc);
// 2. Create CAM16 of those XYZ coordinates in default VC.
const recastInVc = Cam16.fromXyzInViewingConditions(
viewedInVc[0],
viewedInVc[1],
viewedInVc[2],
ViewingConditions.make(),
);
// 3. Create HCT from:
// - CAM16 using default VC with XYZ coordinates in specified VC.
// - L* converted from Y in XYZ coordinates in specified VC.
const recastHct = Hct.from(
recastInVc.hue,
recastInVc.chroma,
utils.lstarFromY(viewedInVc[1]),
);
return recastHct;
}
}
```