Skip to content

Color

@xngui/cdk/color
@xngui/cdk/color

OKLCH parse/format and picker-plane math for color controls.

Preview

Picker plane

Serialized oklch(62.3% 0.214 259.8)

import { XColorService } from '@xngui/cdk/color';
 
const color = inject(XColorService);
 
const picked = color.resolve('oklch(62.3% 0.214 259.815)');
color.format(picked, 'oklch'); // → oklch(62.3% 0.214 259.8)
color.paintPlaneCanvas(canvas, picked.h);
color.colorFromPlanePointer(picked, rect, clientX, clientY);

Events

Interact with the preview — events will appear here.