Find Nearest Named CSS Colour

Added in: @sardine/colour@2.1.0

Description

Finds the nearest named CSS colour in a palette to the given named CSS colour.

Signature

function findNearestNamedCSSColour(
  colour: NamedCSSColour,
  palette: NamedCSSColour[]
): NamedCSSColour;

Parameters

  • colour: NamedCSSColour — The named CSS colour to find the nearest match for (e.g., "red").
  • palette: NamedCSSColour[] — An array of named CSS colours to search for the nearest match in.

Returns

  • NamedCSSColour — The named CSS colour in the palette that is closest to the given colour. If the palette has fewer than 2 colours, or is undefined/null, the original colour is returned.

Examples

import { findNearestNamedCSSColour } from "@sardine/colour";

findNearestNamedCSSColour("red", ["green", "blue", "orange"]);
// => "orange"

findNearestNamedCSSColour("navy", ["navy"]);
// => "navy" (palette too small)

findNearestNamedCSSColour("gold", undefined);
// => "gold" (palette is undefined)

Error Handling

  • If palette is not an array or has fewer than 2 colours, the function returns the input colour.
  • If colour is not a valid named CSS colour, downstream conversion functions may throw errors (e.g., convertNamedCSSColourtoRGB).

Interactive Demo

Try the function yourself with our interactive playground: