Skip to content

Sort Colors By Distance

What It Does

The Sort Colors By Distance node arranges an array of colors by their relationship to a reference color. It can sort based on various color attributes like contrast, hue, lightness, saturation, or overall color distance.

Inputs

NameDescriptionTypeRequired
ColorsArray of colors to be sortedList of ColorsYes
Compare ColorReference color to sort againstColorYes
TypeSorting method (Contrast, Hue, Lightness, Saturation, Distance)StringNo
AlgorithmContrast algorithm to use when sorting by contrastStringNo

Outputs

NameDescriptionType
ValueThe sorted array of colorsList of Colors
IndicesThe original indices of the colors in the sorted arrayList of Numbers

How to Use It

  1. Drag the Sort Colors By Distance node into your graph.
  2. Connect an array of colors to the "Colors" input. (Here a Color Wheel node is used generate an array of colors).
  3. Connect a reference color to the "Compare Color" input (like #1728E3).
  4. Select a sorting method from the "Type" dropdown (default: Hue). Here lightness is selected.
  5. The output will be the sorted colors and their original indices.

Tips

  • Use different sorting methods to achieve various visual arrangements of color palettes.
  • The indices output is useful for tracking how the original array was rearranged.

See Also

  • Color Wheel: For generating colors to sort.
  • Range: For creating color ranges to sort.

Use Cases

  • Color Palette Organization: Arrange colors in a visually logical order.
  • Accessible Color Selection: Sort by contrast to find the most readable options.
  • Gradient Generation: Sort colors by hue or lightness to create smooth transitions.