Class Colors
Core conversion
isColor(color, [format])- validate a color string, optionally restricting to a specific formatgetColor(color)- convert to a structured objectgetString(color, format)- convert to a CSS string
getFormat(color)- detect the format of a color stringgetAlpha(color)- extract the alpha (opacity) componentsetAlpha(color, alpha)- return a new color with a different alphaisDark(color)- perceptual light-vs-dark test (oklch-based)contrast(color1, color2)- approximate perceptual contrast ratioequals(color1, color2)- same-color comparison across formatsflatten(color, [background], [outputFormat])- composite semi-transparent color to opaque
adjust(color, deltas)- general-purpose multi-axis adjustmentlighten()/darken()- lightnesssaturate()/desaturate()- chromacomplement()- hue rotation by 180 degrees
colorScale()- multi-step gradient between two colorsshades()- lightness ramp from a single colormix()- blend two colors at a given ratiomostReadable()- pick the highest-contrast candidate
triad()/tetrad()- 3 or 4 evenly-spaced huessplitComplement()- flanking the complementanalogous()- nearby hues
-
Constructor Summary
Constructors -
Method Summary
Modifier and TypeMethodDescriptionstatic StringThe general-purpose method for deriving a related color from a base color.static Stringadjust(String color, Map deltas, ColorFormat outputFormat) The general-purpose method for deriving a related color from a base color.static String[]Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel.static String[]Seeanalogous()static String[]Seeanalogous()static String[]analogous(Color color, int results, int slices, ColorFormat outputFormat) Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel.static String[]Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel.static String[]Seeanalogous()static String[]Seeanalogous()static String[]analogous(String color, int results, int slices, ColorFormat outputFormat) Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel.static String[]Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel.static String[]Seeanalogous()static String[]Seeanalogous()static String[]analogous(Map color, int results, int slices, ColorFormat outputFormat) Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel.static String[]colorScale(String color1, String color2, int steps) Generates an array of evenly-spaced colors between two endpoints.static String[]colorScale(String color1, String color2, int steps, ColorFormat format) Generates an array of evenly-spaced colors between two endpoints.static Stringcomplement(Color color) Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees).static Stringcomplement(Color color, ColorFormat outputFormat) Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees).static Stringcomplement(String color) Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees).static Stringcomplement(String color, ColorFormat outputFormat) Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees).static Stringcomplement(Map color) Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees).static Stringcomplement(Map color, ColorFormat outputFormat) Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees).static DoubleReturns the approximate perceptual contrast ratio between two colors, based on oklch lightness.static StringReturns a darker version of the given color.static Stringdarken(String color, double amount, ColorFormat outputFormat) Returns a darker version of the given color.static Stringdesaturate(String color, double amount) Returns a more muted version of the given color by reducing its chroma (color intensity).static Stringdesaturate(String color, double amount, ColorFormat outputFormat) Returns a more muted version of the given color by reducing its chroma (color intensity).static BooleanReturns true if two color values represent the same color (same R, G, B, and alpha), regardless of input format.static StringReturns an opaque color that looks the same as the given semi-transparent color composited over a background.static StringSeeflatten()static Stringflatten(Color color, String background, ColorFormat outputFormat) Returns an opaque color that looks the same as the given semi-transparent color composited over a background.static StringReturns an opaque color that looks the same as the given semi-transparent color composited over a background.static StringSeeflatten()static Stringflatten(String color, String background, ColorFormat outputFormat) Returns an opaque color that looks the same as the given semi-transparent color composited over a background.static StringReturns an opaque color that looks the same as the given semi-transparent color composited over a background.static StringSeeflatten()static Stringflatten(Map color, String background, ColorFormat outputFormat) Returns an opaque color that looks the same as the given semi-transparent color composited over a background.static DoubleReturns the alpha (opacity) component of the given color as a float from 0.0 (fully transparent) to 1.0 (fully opaque).static DoubleReturns the alpha (opacity) component of the given color as a float from 0.0 (fully transparent) to 1.0 (fully opaque).static DoubleReturns the alpha (opacity) component of the given color as a float from 0.0 (fully transparent) to 1.0 (fully opaque).static ColorParses any valid CSS color into a structuredColorobject with RGB, HSL, and oklch properties pre-computed, plus convenience methods for manipulation.static ColorParses any valid CSS color into a structuredColorobject with RGB, HSL, and oklch properties pre-computed, plus convenience methods for manipulation.static ColorParses any valid CSS color into a structuredColorobject with RGB, HSL, and oklch properties pre-computed, plus convenience methods for manipulation.static ColorFormatReturns theColorFormatof the given color string, or null if the value is not a valid color.static StringgetString(String color, ColorFormat format) Converts any valid CSS color to a string in the specified format.static MapgetValues(String color, ColorFormat format) Returns a plain object with color component values in the requested format.static booleanReturns true if the given value is a valid CSS color specification.static booleanisColor(String color, ColorFormat format) Returns true if the given value is a valid CSS color specification.static BooleanReturns true if the given color is perceptually dark (i.e.static BooleanReturns true if the given color is perceptually dark (i.e.static BooleanReturns true if the given color is perceptually dark (i.e.static StringReturns a lighter version of the given color.static Stringlighten(String color, double amount, ColorFormat outputFormat) Returns a lighter version of the given color.static StringBlends two colors in the oklch color space, producing a single result color.static StringSeemix()static Stringmix(String color1, String color2, Double ratio, ColorFormat outputFormat) Blends two colors in the oklch color space, producing a single result color.static StringmostReadable(String background, String[] candidates) Returns the color fromcandidatesthat has the highest contrast againstbackground.static StringReturns a more vivid version of the given color by increasing its chroma (color intensity).static Stringsaturate(String color, double amount, ColorFormat outputFormat) Returns a more vivid version of the given color by increasing its chroma (color intensity).static StringReturns a new color string with the alpha (opacity) component replaced.static StringsetAlpha(String color, double alpha, ColorFormat outputFormat) Returns a new color string with the alpha (opacity) component replaced.static String[]Generates a lightness ramp from a single base color, producing an array of colors that range from near-white to near-black (or a custom range) while preserving the base color's hue and chroma.static String[]Seeshades()static String[]shades(String color, int steps, double[] range, ColorFormat outputFormat) Generates a lightness ramp from a single base color, producing an array of colors that range from near-white to near-black (or a custom range) while preserving the base color's hue and chroma.static StringRotates the hue of a color by the given number of degrees (in oklch space).static Stringspin(String color, double degrees, ColorFormat outputFormat) Rotates the hue of a color by the given number of degrees (in oklch space).static String[]splitComplement(Color color) Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly).static String[]splitComplement(Color color, ColorFormat outputFormat) Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly).static String[]splitComplement(String color) Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly).static String[]splitComplement(String color, ColorFormat outputFormat) Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly).static String[]splitComplement(Map color) Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly).static String[]splitComplement(Map color, ColorFormat outputFormat) Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly).static String[]Returns four colors with hues spaced 90 degrees apart (square scheme).static String[]tetrad(Color color, ColorFormat outputFormat) Returns four colors with hues spaced 90 degrees apart (square scheme).static String[]Returns four colors with hues spaced 90 degrees apart (square scheme).static String[]tetrad(String color, ColorFormat outputFormat) Returns four colors with hues spaced 90 degrees apart (square scheme).static String[]Returns four colors with hues spaced 90 degrees apart (square scheme).static String[]tetrad(Map color, ColorFormat outputFormat) Returns four colors with hues spaced 90 degrees apart (square scheme).static String[]Returns the three triadic colors (hues spaced 120 degrees apart).static String[]triad(Color color, ColorFormat outputFormat) Returns the three triadic colors (hues spaced 120 degrees apart).static String[]Returns the three triadic colors (hues spaced 120 degrees apart).static String[]triad(String color, ColorFormat outputFormat) Returns the three triadic colors (hues spaced 120 degrees apart).static String[]Returns the three triadic colors (hues spaced 120 degrees apart).static String[]triad(Map color, ColorFormat outputFormat) Returns the three triadic colors (hues spaced 120 degrees apart).
-
Constructor Details
-
Colors
public Colors()
-
-
Method Details
-
adjust
The general-purpose method for deriving a related color from a base color. Accepts any combination of adjustment keys in thedeltasobject and returns the result as a CSS color string. Single-axis convenience wrappers -lighten(),darken(),saturate(),desaturate(), andcomplement()- all delegate to this method.Friendly percentage keys (recommended for most uses):
- lightness (-100 to 100): positive values lighten (toward white), negative darken (toward black). See
lighten()/darken. - saturation (-100 to 100): positive values intensify color, negative desaturate toward gray. See
saturate()/desaturate. - hue (degrees): signed rotation around the color wheel. See
complement()for the hue wheel reference. - alpha: signed delta to opacity (0 = transparent, 1 = opaque).
Raw oklch keys (for fine-grained control - see the oklch color space):
- L: signed delta to lightness (0-1). +0.1 is noticeably lighter.
- C: signed delta to chroma (0 = gray, max ~0.4). -0.05 desaturates subtly.
- h and alpha work the same as the friendly keys above.
rgb(...)input returnsrgb(...)output, etc.Examples:
- Parameters:
color- base color - any valid CSS color string or structured object fromgetColor()deltas- adjustment keys - any combination of friendly keys (lightness,saturation,hue,alpha) and/or raw oklch keys (L,C,h). See the key lists above.- Returns:
- CSS color string in the requested format, or null if the input is not a valid color
- See Also:
- lightness (-100 to 100): positive values lighten (toward white), negative darken (toward black). See
-
adjust
The general-purpose method for deriving a related color from a base color. Accepts any combination of adjustment keys in thedeltasobject and returns the result as a CSS color string. Single-axis convenience wrappers -lighten(),darken(),saturate(),desaturate(), andcomplement()- all delegate to this method.Friendly percentage keys (recommended for most uses):
- lightness (-100 to 100): positive values lighten (toward white), negative darken (toward black). See
lighten()/darken. - saturation (-100 to 100): positive values intensify color, negative desaturate toward gray. See
saturate()/desaturate. - hue (degrees): signed rotation around the color wheel. See
complement()for the hue wheel reference. - alpha: signed delta to opacity (0 = transparent, 1 = opaque).
Raw oklch keys (for fine-grained control - see the oklch color space):
- L: signed delta to lightness (0-1). +0.1 is noticeably lighter.
- C: signed delta to chroma (0 = gray, max ~0.4). -0.05 desaturates subtly.
- h and alpha work the same as the friendly keys above.
rgb(...)input returnsrgb(...)output, etc.Examples:
- Parameters:
color- base color - any valid CSS color string or structured object fromgetColor()deltas- adjustment keys - any combination of friendly keys (lightness,saturation,hue,alpha) and/or raw oklch keys (L,C,h). See the key lists above.outputFormat- format for the returned string; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string in the requested format, or null if the input is not a valid color
- See Also:
- lightness (-100 to 100): positive values lighten (toward white), negative darken (toward black). See
-
analogous
Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel. Defaults to 6 results spanning 30 degrees.- Parameters:
color- base color- Returns:
- CSS color strings
-
analogous
Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel. Defaults to 6 results spanning 30 degrees.- Parameters:
color- base color- Returns:
- CSS color strings
-
analogous
Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel. Defaults to 6 results spanning 30 degrees.- Parameters:
color- base color- Returns:
- CSS color strings
-
analogous
Seeanalogous() -
analogous
Seeanalogous() -
analogous
Seeanalogous() -
analogous
Seeanalogous() -
analogous
Seeanalogous() -
analogous
Seeanalogous() -
analogous
Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel. Defaults to 6 results spanning 30 degrees.- Parameters:
color- base colorresults- number of colors to return (default 6)slices- how many slices to divide the wheel into (default 30, meaning each step is 12 degrees)outputFormat- output format; defaults to input format- Returns:
- CSS color strings
-
analogous
Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel. Defaults to 6 results spanning 30 degrees.- Parameters:
color- base colorresults- number of colors to return (default 6)slices- how many slices to divide the wheel into (default 30, meaning each step is 12 degrees)outputFormat- output format; defaults to input format- Returns:
- CSS color strings
-
analogous
Returns a set of analogous colors - hues near the original, evenly spaced within a segment of the color wheel. Defaults to 6 results spanning 30 degrees.- Parameters:
color- base colorresults- number of colors to return (default 6)slices- how many slices to divide the wheel into (default 30, meaning each step is 12 degrees)outputFormat- output format; defaults to input format- Returns:
- CSS color strings
-
colorScale
Generates an array of evenly-spaced colors between two endpoints. Interpolation is always performed in the oklch color space, which produces perceptually uniform steps — equal numeric changes yield visually equal differences. The optionalformatparameter controls only the output format of the returned strings.Useful for data-visualization ramps, theme generation, and palette tooling.
- Parameters:
color1- start color (any valid CSS color string or structured object)color2- end colorsteps- number of colors to produce (minimum 2)- Returns:
- CSS color strings in the requested format
-
colorScale
Generates an array of evenly-spaced colors between two endpoints. Interpolation is always performed in the oklch color space, which produces perceptually uniform steps — equal numeric changes yield visually equal differences. The optionalformatparameter controls only the output format of the returned strings.Useful for data-visualization ramps, theme generation, and palette tooling.
- Parameters:
color1- start color (any valid CSS color string or structured object)color2- end colorsteps- number of colors to produce (minimum 2)format- output format for the returned color strings; defaults to the detected format ofcolor1(hex for named colors)- Returns:
- CSS color strings in the requested format
-
complement
Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees). Equivalent toadjust(color, {h: 180}).Complementary pairs produce maximum hue contrast and are commonly used for accents, call-to-action elements, or alert states against a primary brand color. The oklch hue wheel: red ~30, yellow ~90, green ~145, cyan ~195, blue ~265, purple ~310. Other useful rotations via
adjust(): +120/-120 for triadic accents, +90/-90 for square-scheme accents.- Parameters:
color- any valid CSS color string or structured color object- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
complement
Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees). Equivalent toadjust(color, {h: 180}).Complementary pairs produce maximum hue contrast and are commonly used for accents, call-to-action elements, or alert states against a primary brand color. The oklch hue wheel: red ~30, yellow ~90, green ~145, cyan ~195, blue ~265, purple ~310. Other useful rotations via
adjust(): +120/-120 for triadic accents, +90/-90 for square-scheme accents.- Parameters:
color- any valid CSS color string or structured color object- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
complement
Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees). Equivalent toadjust(color, {h: 180}).Complementary pairs produce maximum hue contrast and are commonly used for accents, call-to-action elements, or alert states against a primary brand color. The oklch hue wheel: red ~30, yellow ~90, green ~145, cyan ~195, blue ~265, purple ~310. Other useful rotations via
adjust(): +120/-120 for triadic accents, +90/-90 for square-scheme accents.- Parameters:
color- any valid CSS color string or structured color object- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
complement
Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees). Equivalent toadjust(color, {h: 180}).Complementary pairs produce maximum hue contrast and are commonly used for accents, call-to-action elements, or alert states against a primary brand color. The oklch hue wheel: red ~30, yellow ~90, green ~145, cyan ~195, blue ~265, purple ~310. Other useful rotations via
adjust(): +120/-120 for triadic accents, +90/-90 for square-scheme accents.- Parameters:
color- any valid CSS color string or structured color objectoutputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
complement
Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees). Equivalent toadjust(color, {h: 180}).Complementary pairs produce maximum hue contrast and are commonly used for accents, call-to-action elements, or alert states against a primary brand color. The oklch hue wheel: red ~30, yellow ~90, green ~145, cyan ~195, blue ~265, purple ~310. Other useful rotations via
adjust(): +120/-120 for triadic accents, +90/-90 for square-scheme accents.- Parameters:
color- any valid CSS color string or structured color objectoutputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
complement
Returns the complementary color - the hue on the opposite side of the color wheel (rotated by 180 degrees). Equivalent toadjust(color, {h: 180}).Complementary pairs produce maximum hue contrast and are commonly used for accents, call-to-action elements, or alert states against a primary brand color. The oklch hue wheel: red ~30, yellow ~90, green ~145, cyan ~195, blue ~265, purple ~310. Other useful rotations via
adjust(): +120/-120 for triadic accents, +90/-90 for square-scheme accents.- Parameters:
color- any valid CSS color string or structured color objectoutputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
contrast
Returns the approximate perceptual contrast ratio between two colors, based on oklch lightness. The result is a positive number where 1.0 means no contrast and higher values indicate greater contrast. A ratio of at least 4.5 is recommended for normal text readability (WCAG AA), and 7.0 for enhanced readability (WCAG AAA).This method uses a simplified lightness-based approximation rather than the full WCAG relative-luminance formula, but oklch lightness correlates well with perceived contrast. Returns null if either color is invalid.
- Parameters:
color1- first colorcolor2- second color- Returns:
- approximate contrast ratio (>= 1.0), or null
-
darken
Returns a darker version of the given color. Equivalent toadjust(color, {lightness: -amount}).The
amountis a percentage (0-100) indicating how far to move toward black: 0 returns the original color, 100 returns black. Intermediate values move proportionally -darken(color, 20)always looks like "20% darker" regardless of the starting lightness.For multi-axis adjustments, use
adjust()directly.- Parameters:
color- any valid CSS color string or structured color objectamount- percentage to darken, 0-100- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
darken
Returns a darker version of the given color. Equivalent toadjust(color, {lightness: -amount}).The
amountis a percentage (0-100) indicating how far to move toward black: 0 returns the original color, 100 returns black. Intermediate values move proportionally -darken(color, 20)always looks like "20% darker" regardless of the starting lightness.For multi-axis adjustments, use
adjust()directly.- Parameters:
color- any valid CSS color string or structured color objectamount- percentage to darken, 0-100outputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
desaturate
Returns a more muted version of the given color by reducing its chroma (color intensity). Equivalent toadjust(color, {saturation: -amount}).The
amountis a percentage (0-100) of chroma to remove: 0 returns the original color, 100 returns a pure gray at the same lightness.For multi-axis adjustments, use
adjust()directly.- Parameters:
color- any valid CSS color string or structured color objectamount- percentage to desaturate, 0-100- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
desaturate
Returns a more muted version of the given color by reducing its chroma (color intensity). Equivalent toadjust(color, {saturation: -amount}).The
amountis a percentage (0-100) of chroma to remove: 0 returns the original color, 100 returns a pure gray at the same lightness.For multi-axis adjustments, use
adjust()directly.- Parameters:
color- any valid CSS color string or structured color objectamount- percentage to desaturate, 0-100outputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
equals
Returns true if two color values represent the same color (same R, G, B, and alpha), regardless of input format. For example,"red","#ff0000", and"rgb(255, 0, 0)"are all equal.- Parameters:
color1- first colorcolor2- second color- Returns:
- true if the colors are identical, false otherwise, null if either invalid
-
flatten
Returns an opaque color that looks the same as the given semi-transparent color composited over a background. Solves the layering problem where translucent background colors look different depending on what is behind them - a button on a white panel looks different from the same button on a colored window header, and different again if either is disabled. Flattening removes the dependency on parent backgrounds entirely.If the input color is already fully opaque (alpha = 1), it is returned unchanged. The optional
backgrounddefaults to white; if it is itself semi-transparent, it is first flattened against white before compositing.- Parameters:
color- a semi-transparent color to flatten to opaque- Returns:
- opaque CSS color string, or null if the input is not a valid color
-
flatten
Returns an opaque color that looks the same as the given semi-transparent color composited over a background. Solves the layering problem where translucent background colors look different depending on what is behind them - a button on a white panel looks different from the same button on a colored window header, and different again if either is disabled. Flattening removes the dependency on parent backgrounds entirely.If the input color is already fully opaque (alpha = 1), it is returned unchanged. The optional
backgrounddefaults to white; if it is itself semi-transparent, it is first flattened against white before compositing.- Parameters:
color- a semi-transparent color to flatten to opaque- Returns:
- opaque CSS color string, or null if the input is not a valid color
-
flatten
Returns an opaque color that looks the same as the given semi-transparent color composited over a background. Solves the layering problem where translucent background colors look different depending on what is behind them - a button on a white panel looks different from the same button on a colored window header, and different again if either is disabled. Flattening removes the dependency on parent backgrounds entirely.If the input color is already fully opaque (alpha = 1), it is returned unchanged. The optional
backgrounddefaults to white; if it is itself semi-transparent, it is first flattened against white before compositing.- Parameters:
color- a semi-transparent color to flatten to opaque- Returns:
- opaque CSS color string, or null if the input is not a valid color
-
flatten
Seeflatten() -
flatten
Seeflatten() -
flatten
Seeflatten() -
flatten
Returns an opaque color that looks the same as the given semi-transparent color composited over a background. Solves the layering problem where translucent background colors look different depending on what is behind them - a button on a white panel looks different from the same button on a colored window header, and different again if either is disabled. Flattening removes the dependency on parent backgrounds entirely.If the input color is already fully opaque (alpha = 1), it is returned unchanged. The optional
backgrounddefaults to white; if it is itself semi-transparent, it is first flattened against white before compositing.- Parameters:
color- a semi-transparent color to flatten to opaquebackground- background to composite against; defaults to "#ffffff"outputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- opaque CSS color string, or null if the input is not a valid color
-
flatten
Returns an opaque color that looks the same as the given semi-transparent color composited over a background. Solves the layering problem where translucent background colors look different depending on what is behind them - a button on a white panel looks different from the same button on a colored window header, and different again if either is disabled. Flattening removes the dependency on parent backgrounds entirely.If the input color is already fully opaque (alpha = 1), it is returned unchanged. The optional
backgrounddefaults to white; if it is itself semi-transparent, it is first flattened against white before compositing.- Parameters:
color- a semi-transparent color to flatten to opaquebackground- background to composite against; defaults to "#ffffff"outputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- opaque CSS color string, or null if the input is not a valid color
-
flatten
Returns an opaque color that looks the same as the given semi-transparent color composited over a background. Solves the layering problem where translucent background colors look different depending on what is behind them - a button on a white panel looks different from the same button on a colored window header, and different again if either is disabled. Flattening removes the dependency on parent backgrounds entirely.If the input color is already fully opaque (alpha = 1), it is returned unchanged. The optional
backgrounddefaults to white; if it is itself semi-transparent, it is first flattened against white before compositing.- Parameters:
color- a semi-transparent color to flatten to opaquebackground- background to composite against; defaults to "#ffffff"outputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- opaque CSS color string, or null if the input is not a valid color
-
getAlpha
Returns the alpha (opacity) component of the given color as a float from 0.0 (fully transparent) to 1.0 (fully opaque). Returns null if the color is not valid.Accepts any valid CSS color string or structured color object. Fully opaque colors that lack an explicit alpha component return 1.0. The keyword
"transparent"returns 0.0.- Parameters:
color- any valid CSS color string or structured color object- Returns:
- alpha component (0.0 - 1.0), or null if invalid
-
getAlpha
Returns the alpha (opacity) component of the given color as a float from 0.0 (fully transparent) to 1.0 (fully opaque). Returns null if the color is not valid.Accepts any valid CSS color string or structured color object. Fully opaque colors that lack an explicit alpha component return 1.0. The keyword
"transparent"returns 0.0.- Parameters:
color- any valid CSS color string or structured color object- Returns:
- alpha component (0.0 - 1.0), or null if invalid
-
getAlpha
Returns the alpha (opacity) component of the given color as a float from 0.0 (fully transparent) to 1.0 (fully opaque). Returns null if the color is not valid.Accepts any valid CSS color string or structured color object. Fully opaque colors that lack an explicit alpha component return 1.0. The keyword
"transparent"returns 0.0.- Parameters:
color- any valid CSS color string or structured color object- Returns:
- alpha component (0.0 - 1.0), or null if invalid
-
getColor
Parses any valid CSS color into a structuredColorobject with RGB, HSL, and oklch properties pre-computed, plus convenience methods for manipulation.Accepts any CSS color string (
#hex,rgb(),hsl(),oklch(), named colors) or a structured component object in any supported color space:{r, g, b},{h, s, l}, or{L, C, h}.Always returns a
Colorobject. If the input cannot be parsed, the returned object will haveisValid()returning false (properties default to black). If the input is already aColor, a new Color with the same values is returned. -
getColor
Parses any valid CSS color into a structuredColorobject with RGB, HSL, and oklch properties pre-computed, plus convenience methods for manipulation.Accepts any CSS color string (
#hex,rgb(),hsl(),oklch(), named colors) or a structured component object in any supported color space:{r, g, b},{h, s, l}, or{L, C, h}.Always returns a
Colorobject. If the input cannot be parsed, the returned object will haveisValid()returning false (properties default to black). If the input is already aColor, a new Color with the same values is returned. -
getColor
Parses any valid CSS color into a structuredColorobject with RGB, HSL, and oklch properties pre-computed, plus convenience methods for manipulation.Accepts any CSS color string (
#hex,rgb(),hsl(),oklch(), named colors) or a structured component object in any supported color space:{r, g, b},{h, s, l}, or{L, C, h}.Always returns a
Colorobject. If the input cannot be parsed, the returned object will haveisValid()returning false (properties default to black). If the input is already aColor, a new Color with the same values is returned. -
getFormat
Returns theColorFormatof the given color string, or null if the value is not a valid color. For named colors (e.g. "red") and "transparent", the format is reported as"hex"since the canonical representation is hexadecimal.- Parameters:
color- a CSS color string- Returns:
- the detected format, or null if invalid
-
getString
Converts any valid CSS color to a string in the specified format. Accepts a CSS color string or a structured color object (as returned bygetColor()). Returns null if the input is not a valid color or the format is unrecognized.Supported target formats:
"hex"- "#RRGGBB" when opaque, "#RRGGBBAA" when semi-transparent"rgb"- "rgb(R, G, B)" when opaque, "rgba(R, G, B, A)" when semi-transparent"hsl"- "hsl(H, S%, L%)" when opaque, "hsla(H, S%, L%, A)" when semi-transparent"oklch"- "oklch(L% C h)" when opaque, "oklch(L% C h / A)" when semi-transparent
- Parameters:
color- any valid CSS color string, or a structured color object with {r,g,b}, {h,s,l}, or {L,C,h} keysformat- target format: "hex", "rgb", "hsl", or "oklch"- Returns:
- CSS color string in the target format, or null
-
getValues
Returns a plain object with color component values in the requested format. UnlikegetColor(), which returns a fullColorobject with methods and properties in all color spaces, this returns only the numeric components for the requested format - useful when you need raw values for computation without the overhead of a full Color, or when passing components to external APIs.Supported formats and their returned keys:
"rgb"-{r, g, b, alpha}(0-255 integers, alpha 0-1)"hsl"-{h, s, l, alpha}(h: 0-360 degrees, s/l: 0-100 percent, alpha 0-1)"oklch"-{L, C, h, alpha}(L: 0-1 lightness, C: 0+ chroma, h: 0-360 degrees, alpha 0-1)
- Parameters:
color- any valid CSS color string orColorformat- target format: "rgb", "hsl", or "oklch"- Returns:
- plain object with numeric component keys, or null if invalid
- See Also:
-
isColor
Returns true if the given value is a valid CSS color specification. Accepts any format: hex (#RGB, #RRGGBB, #RRGGBBAA), rgb(), rgba(), hsl(), hsla(), oklch(), named colors, and "transparent".If
formatis specified, the value must be parseable in that particular format (or be "transparent", which is always valid).- Parameters:
color- value to test- Returns:
- true if the value represents a valid color
-
isColor
Returns true if the given value is a valid CSS color specification. Accepts any format: hex (#RGB, #RRGGBB, #RRGGBBAA), rgb(), rgba(), hsl(), hsla(), oklch(), named colors, and "transparent".If
formatis specified, the value must be parseable in that particular format (or be "transparent", which is always valid).- Parameters:
color- value to testformat- if specified, require this format- Returns:
- true if the value represents a valid color
-
isDark
Returns true if the given color is perceptually dark (i.e. would need light foreground text for readability), false if it is light. Uses oklch lightness, which is perceptually uniform - unlike RGB or HSL brightness, a threshold of 0.6 consistently separates light from dark colors across hues. Use!isDark(color)to test for lightness.Returns null if the color is not valid.
- Parameters:
color- any valid CSS color string or structured color object- Returns:
- true if perceptually dark, false if light, null if invalid
-
isDark
Returns true if the given color is perceptually dark (i.e. would need light foreground text for readability), false if it is light. Uses oklch lightness, which is perceptually uniform - unlike RGB or HSL brightness, a threshold of 0.6 consistently separates light from dark colors across hues. Use!isDark(color)to test for lightness.Returns null if the color is not valid.
- Parameters:
color- any valid CSS color string or structured color object- Returns:
- true if perceptually dark, false if light, null if invalid
-
isDark
Returns true if the given color is perceptually dark (i.e. would need light foreground text for readability), false if it is light. Uses oklch lightness, which is perceptually uniform - unlike RGB or HSL brightness, a threshold of 0.6 consistently separates light from dark colors across hues. Use!isDark(color)to test for lightness.Returns null if the color is not valid.
- Parameters:
color- any valid CSS color string or structured color object- Returns:
- true if perceptually dark, false if light, null if invalid
-
lighten
Returns a lighter version of the given color. Equivalent toadjust(color, {lightness: amount}).The
amountis a percentage (0-100) indicating how far to move toward white: 0 returns the original color, 100 returns white. Intermediate values move proportionally -lighten(color, 20)on a dark color produces a bigger absolute lightness change than on an already-light color, but both look like "20% lighter" perceptually.For multi-axis adjustments (e.g. lighten and desaturate together), use
adjust()directly.- Parameters:
color- any valid CSS color string or structured color objectamount- percentage to lighten, 0-100- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
lighten
Returns a lighter version of the given color. Equivalent toadjust(color, {lightness: amount}).The
amountis a percentage (0-100) indicating how far to move toward white: 0 returns the original color, 100 returns white. Intermediate values move proportionally -lighten(color, 20)on a dark color produces a bigger absolute lightness change than on an already-light color, but both look like "20% lighter" perceptually.For multi-axis adjustments (e.g. lighten and desaturate together), use
adjust()directly.- Parameters:
color- any valid CSS color string or structured color objectamount- percentage to lighten, 0-100outputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
mix
Blends two colors in the oklch color space, producing a single result color. Oklch mixing avoids the muddy midpoints of RGB blending and the hue drift of HSL blending.The
ratiocontrols the blend: 0 returnscolor1, 1 returnscolor2, and 0.5 (the default) returns an equal mix. Intermediate values weight toward the corresponding color.Common uses include tinting a neutral toward a brand color (e.g.
mix(gray, brand, 0.15)) and generating overlay effects.Examples of common operations:
- Parameters:
color1- first color - any valid CSS color string or structured objectcolor2- second color- Returns:
- CSS color string in the requested format, or null if either input is not a valid color
-
mix
Seemix() -
mix
Blends two colors in the oklch color space, producing a single result color. Oklch mixing avoids the muddy midpoints of RGB blending and the hue drift of HSL blending.The
ratiocontrols the blend: 0 returnscolor1, 1 returnscolor2, and 0.5 (the default) returns an equal mix. Intermediate values weight toward the corresponding color.Common uses include tinting a neutral toward a brand color (e.g.
mix(gray, brand, 0.15)) and generating overlay effects.Examples of common operations:
- Parameters:
color1- first color - any valid CSS color string or structured objectcolor2- second colorratio- blend ratio from 0.0 (all color1) to 1.0 (all color2); defaults to 0.5outputFormat- format for the returned string; defaults to the detected format ofcolor1(hex for named colors)- Returns:
- CSS color string in the requested format, or null if either input is not a valid color
-
mostReadable
Returns the color fromcandidatesthat has the highest contrast againstbackground. Useful for choosing a text color that will be readable on a given background - typically called with["#ffffff", "#000000"]as candidates.- Parameters:
background- the background color to test againstcandidates- list of candidate foreground colors- Returns:
- the candidate with the highest contrast ratio, or null if inputs invalid
-
saturate
Returns a more vivid version of the given color by increasing its chroma (color intensity). Equivalent toadjust(color, {saturation: amount}).The
amountis a percentage (0-100) of additional chroma to add, scaled relative to a practical maximum. A gray color (chroma 0) saturated by 50 produces a clearly visible color; 100 gives full vivid saturation.For multi-axis adjustments, use
adjust()directly.- Parameters:
color- any valid CSS color string or structured color objectamount- percentage to saturate, 0-100- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
saturate
Returns a more vivid version of the given color by increasing its chroma (color intensity). Equivalent toadjust(color, {saturation: amount}).The
amountis a percentage (0-100) of additional chroma to add, scaled relative to a practical maximum. A gray color (chroma 0) saturated by 50 produces a clearly visible color; 100 gives full vivid saturation.For multi-axis adjustments, use
adjust()directly.- Parameters:
color- any valid CSS color string or structured color objectamount- percentage to saturate, 0-100outputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
setAlpha
Returns a new color string with the alpha (opacity) component replaced. The output format matches the input format when possible; for named colors, hex is used.Useful for deriving semi-transparent variants of a color without converting it to a different format.
- Parameters:
color- any valid CSS color string or structured color objectalpha- new alpha value, 0.0 (transparent) to 1.0 (opaque)- Returns:
- CSS color string with the new alpha, or null if invalid
-
setAlpha
Returns a new color string with the alpha (opacity) component replaced. The output format matches the input format when possible; for named colors, hex is used.Useful for deriving semi-transparent variants of a color without converting it to a different format.
- Parameters:
color- any valid CSS color string or structured color objectalpha- new alpha value, 0.0 (transparent) to 1.0 (opaque)outputFormat- optional output format; defaults to the detected format of the input color- Returns:
- CSS color string with the new alpha, or null if invalid
-
shades
Generates a lightness ramp from a single base color, producing an array of colors that range from near-white to near-black (or a custom range) while preserving the base color's hue and chroma. This is the core skin-generation operation: one brand color in, a full tint/shade palette out.All interpolation is done in the oklch color space, so each step is perceptually equidistant - no uneven jumps or hue drift.
The
rangeparameter controls the lightness endpoints as a two-element array[startL, endL]where L is 0 (black) to 1 (white). The default is[0.95, 0.20](near-white to dark). To generate only tints (lighter shades), use e.g.[0.97, 0.60]; for only darks,[0.50, 0.10].Examples of common operations:
- Parameters:
color- base color - any valid CSS color string or structured object fromgetColor()steps- number of colors to produce (minimum 2)- Returns:
- CSS color strings in the requested format, or null if the input is not a valid color
-
shades
Seeshades() -
shades
Generates a lightness ramp from a single base color, producing an array of colors that range from near-white to near-black (or a custom range) while preserving the base color's hue and chroma. This is the core skin-generation operation: one brand color in, a full tint/shade palette out.All interpolation is done in the oklch color space, so each step is perceptually equidistant - no uneven jumps or hue drift.
The
rangeparameter controls the lightness endpoints as a two-element array[startL, endL]where L is 0 (black) to 1 (white). The default is[0.95, 0.20](near-white to dark). To generate only tints (lighter shades), use e.g.[0.97, 0.60]; for only darks,[0.50, 0.10].Examples of common operations:
- Parameters:
color- base color - any valid CSS color string or structured object fromgetColor()steps- number of colors to produce (minimum 2)range- two-element array[startL, endL]defining the lightness range; defaults to[0.95, 0.20]outputFormat- format for the returned strings; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color strings in the requested format, or null if the input is not a valid color
-
spin
Rotates the hue of a color by the given number of degrees (in oklch space). Positive values rotate clockwise, negative counter-clockwise. This is a convenience wrapper aroundadjust(color, {hue: degrees}).- Parameters:
color- any valid CSS color string or structured color objectdegrees- signed rotation in degrees (e.g. 90, -45, 180)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
spin
Rotates the hue of a color by the given number of degrees (in oklch space). Positive values rotate clockwise, negative counter-clockwise. This is a convenience wrapper aroundadjust(color, {hue: degrees}).- Parameters:
color- any valid CSS color string or structured color objectdegrees- signed rotation in degrees (e.g. 90, -45, 180)outputFormat- output format; defaults to the detected format of the input color (hex for named colors)- Returns:
- CSS color string, or null if the input is not a valid color
- See Also:
-
splitComplement
Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly). Produces a more nuanced palette than a straight complementary pair.- Parameters:
color- base color- Returns:
- three CSS color strings
-
splitComplement
Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly). Produces a more nuanced palette than a straight complementary pair.- Parameters:
color- base color- Returns:
- three CSS color strings
-
splitComplement
Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly). Produces a more nuanced palette than a straight complementary pair.- Parameters:
color- base color- Returns:
- three CSS color strings
-
splitComplement
Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly). Produces a more nuanced palette than a straight complementary pair.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- three CSS color strings
-
splitComplement
Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly). Produces a more nuanced palette than a straight complementary pair.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- three CSS color strings
-
splitComplement
Returns three colors: the original plus two split-complement accents (hue +150 and +210 degrees - flanking the complement rather than hitting it directly). Produces a more nuanced palette than a straight complementary pair.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- three CSS color strings
-
tetrad
Returns four colors with hues spaced 90 degrees apart (square scheme). The first element is the original color, then +90, +180, +270 degrees.- Parameters:
color- base color- Returns:
- four CSS color strings
-
tetrad
Returns four colors with hues spaced 90 degrees apart (square scheme). The first element is the original color, then +90, +180, +270 degrees.- Parameters:
color- base color- Returns:
- four CSS color strings
-
tetrad
Returns four colors with hues spaced 90 degrees apart (square scheme). The first element is the original color, then +90, +180, +270 degrees.- Parameters:
color- base color- Returns:
- four CSS color strings
-
tetrad
Returns four colors with hues spaced 90 degrees apart (square scheme). The first element is the original color, then +90, +180, +270 degrees.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- four CSS color strings
-
tetrad
Returns four colors with hues spaced 90 degrees apart (square scheme). The first element is the original color, then +90, +180, +270 degrees.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- four CSS color strings
-
tetrad
Returns four colors with hues spaced 90 degrees apart (square scheme). The first element is the original color, then +90, +180, +270 degrees.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- four CSS color strings
-
triad
Returns the three triadic colors (hues spaced 120 degrees apart). The first element is the original color, the second is +120 degrees, the third is +240 degrees.- Parameters:
color- base color- Returns:
- three CSS color strings
-
triad
Returns the three triadic colors (hues spaced 120 degrees apart). The first element is the original color, the second is +120 degrees, the third is +240 degrees.- Parameters:
color- base color- Returns:
- three CSS color strings
-
triad
Returns the three triadic colors (hues spaced 120 degrees apart). The first element is the original color, the second is +120 degrees, the third is +240 degrees.- Parameters:
color- base color- Returns:
- three CSS color strings
-
triad
Returns the three triadic colors (hues spaced 120 degrees apart). The first element is the original color, the second is +120 degrees, the third is +240 degrees.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- three CSS color strings
-
triad
Returns the three triadic colors (hues spaced 120 degrees apart). The first element is the original color, the second is +120 degrees, the third is +240 degrees.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- three CSS color strings
-
triad
Returns the three triadic colors (hues spaced 120 degrees apart). The first element is the original color, the second is +120 degrees, the third is +240 degrees.- Parameters:
color- base coloroutputFormat- output format; defaults to input format- Returns:
- three CSS color strings
-