openpencil/packages/docs/programmable/sdk/api/advanced/use-okhcl.md
Danila Poyarkov bf90a70d05 feat(vue): consolidate color model
- Add a reactive useColorModel API for format state, channel edits, Reka bridges, and slider presentation

- Move the app color panel and ColorInputRoot onto the shared model and remove superseded picker helpers

- Document the public contract and cover precise RGB plus OkHCL intent round trips
2026-07-13 21:48:36 +03:00

1.7 KiB

title description
useOkHCL Persist OkHCL intent for selected node fills and strokes.

useOkHCL

useOkHCL() is the editor-aware adapter for OkHCL fill and stroke metadata. It reads stored color intent, updates nodes with undo, reports preview gamut information, and remembers the selected field format for each fill or stroke.

Use useColorModel() for framework-agnostic conversion, channel editing, and slider presentation. Use useOkHCL() only where those edits need to be persisted to an OpenPencil editor.

Usage

import { useOkHCL } from '@open-pencil/vue'

const okhcl = useOkHCL()

const color = okhcl.getFillOkHCLColor(node, 0)
okhcl.updateFillOkHCL(node, 0, { c: 0.2 })

Format state

const format = okhcl.getFieldFormat(node, 0, 'fill')
okhcl.setFillFieldFormat(node, 0, 'okhcl')

Selecting okhcl initializes intent from the fill or stroke's current RGBA color. The returned fieldOptions can be used to build a format selector.

Preview information

const preview = okhcl.getFillPreviewInfo(node, 0)
// { previewColorSpace, clipped }

Preview information reflects the document render color space and whether the stored OkHCL intent needed gamut mapping.

Returns

  • getFillOkHCLColor() / getStrokeOkHCLColor()
  • getFillPreviewInfo() / getStrokePreviewInfo()
  • getFieldFormat()
  • setFillFieldFormat() / setStrokeFieldFormat()
  • updateFillOkHCL() / updateStrokeOkHCL()
  • fieldOptions