@w3h/material-color-utilities
Version:
Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and creating tones of colors; all in a new color space.
94 lines (93 loc) • 3.71 kB
TypeScript
/**
* @license
* Copyright 2023 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.
*/
import { Hct } from '../hct/hct.js';
/**
* Design utilities using color temperature theory.
*
* Analogous colors, complementary color, and cache to efficiently, lazily,
* generate data for calculations when needed.
*/
export declare class TemperatureCache {
input: Hct;
constructor(input: Hct);
hctsByTempCache: Hct[];
hctsByHueCache: Hct[];
tempsByHctCache: Map<Hct, number>;
inputRelativeTemperatureCache: number;
complementCache: Hct | null;
get hctsByTemp(): Hct[];
get warmest(): Hct;
get coldest(): Hct;
/**
* A set of colors with differing hues, equidistant in temperature.
*
* In art, this is usually described as a set of 5 colors on a color wheel
* divided into 12 sections. This method allows provision of either of those
* values.
*
* Behavior is undefined when [count] or [divisions] is 0.
* When divisions < count, colors repeat.
*
* [count] The number of colors to return, includes the input color.
* [divisions] The number of divisions on the color wheel.
*/
analogous(count?: number, divisions?: number): Hct[];
/**
* A color that complements the input color aesthetically.
*
* In art, this is usually described as being across the color wheel.
* History of this shows intent as a color that is just as cool-warm as the
* input color is warm-cool.
*/
get complement(): Hct;
/**
* Temperature relative to all colors with the same chroma and tone.
* Value on a scale from 0 to 1.
*/
relativeTemperature(hct: Hct): number;
/** Relative temperature of the input color. See [relativeTemperature]. */
get inputRelativeTemperature(): number;
/** A Map with keys of HCTs in [hctsByTemp], values of raw temperature. */
get tempsByHct(): Map<Hct, number>;
/**
* HCTs for all hues, with the same chroma/tone as the input.
* Sorted ascending, hue 0 to 360.
*/
get hctsByHue(): Hct[];
/** Determines if an angle is between two other angles, rotating clockwise. */
static isBetween(angle: number, a: number, b: number): boolean;
/**
* Value representing cool-warm factor of a color.
* Values below 0 are considered cool, above, warm.
*
* Color science has researched emotion and harmony, which art uses to select
* colors. Warm-cool is the foundation of analogous and complementary colors.
* See:
* - Li-Chen Ou's Chapter 19 in Handbook of Color Psychology (2015).
* - Josef Albers' Interaction of Color chapters 19 and 21.
*
* Implementation of Ou, Woodcock and Wright's algorithm, which uses
* L*a*b* / LCH color space.
* Return value has these properties:
* - Values below 0 are cool, above 0 are warm.
* - Lower bound: -0.52 - (chroma ^ 1.07 / 20). L*a*b* chroma is infinite.
* Assuming max of 130 chroma, -9.66.
* - Upper bound: -0.52 + (chroma ^ 1.07 / 20). L*a*b* chroma is infinite.
* Assuming max of 130 chroma, 8.61.
*/
static rawTemperature(color: Hct): number;
}