Skip to main content

​
Function Signature

export const buildRandomLabelColor = (): LabelColor

​
Parameters

This function takes no parameters.

​
Returns

​
LabelColor
object
An object containing color values for different label visualization contexts

​
Description

The buildRandomLabelColor function generates a cohesive color scheme for label visualization by creating four related color variants based on a random hue. All colors share the same hue (0-360 degrees) but vary in saturation, lightness, and opacity to provide different visual weights for different UI contexts. The function uses HSL (Hue, Saturation, Lightness) color space to ensure:
  • Visual consistency: All four colors are harmonious since they share the same hue
  • Accessibility: The solid color has sufficient contrast for text
  • Flexibility: Different variants for backgrounds, overlays, and primary display

​
Example Usage

import { buildRandomLabelColor } from '@/features/labelwise/utils/color'

// Generate a random label color scheme
const labelColor = buildRandomLabelColor()

console.log(labelColor)
// Example output:
// {
//   solid: 'hsl(240 70% 40%)',           // Deep blue for label text/border
//   soft: 'hsl(240 95% 96%)',            // Very light blue for backgrounds
//   overlay: 'hsl(240 85% 45% / 0.14)',  // Subtle blue overlay
//   overlayStrong: 'hsl(240 85% 45% / 0.24)' // Stronger blue overlay
// }

// Apply colors to a label element
const labelElement = document.createElement('div')
labelElement.style.color = labelColor.solid
labelElement.style.backgroundColor = labelColor.soft
labelElement.style.border = `1px solid ${labelColor.solid}`

// Use overlay for hover effects
labelElement.addEventListener('mouseenter', () => {
  labelElement.style.backgroundColor = labelColor.overlayStrong
})

​
Color Properties

PropertySaturationLightnessOpacityUse Case
solid70%40%100%Primary label color, text, borders
soft95%96%100%Background fills, subtle highlights
overlay85%45%14%Light hover states, secondary backgrounds
overlayStrong85%45%24%Stronger hover states, active selections

​
Implementation Details

The function generates a random hue value between 0 and 360 degrees using Math.random(), then constructs four HSL color strings with predefined saturation, lightness, and opacity values optimized for label visualization in UI contexts.

Build docs developers (and LLMs) love

Get started for freeTalk to us