GUI Color Dialog

ColorPicker

ColorPicker provides five synchronized ways to select a color: direct RGB channels, HSV, HSL, a color wheel, and a visual saturation/value spectrum with a hue strip. A palette, recent colors, decimal RGB input, and hexadecimal input remain available below every mode.

Use the Widget

The selected Color is exposed as a signal property. Programmatic assignments update every mode without polluting the recent-colors history, while explicitly committed pointer, keyboard, palette, or text interactions are remembered.

import klyn.binding
import klyn.gui.windows

picker = ColorPicker(
    Color.fromHex("#3B82F6"),
    ColorPicker.SPECTRUM
)

Binding.watch(picker::color, lambda(value: Object):
    preview.backgroundColor = value as Color
)

Set mode to ColorPicker.RGB, HSV, HSL, WHEEL, or SPECTRUM when an application should open on a specific workflow. Users can always switch modes from the tab strip.

Five Synchronized Modes

RGB edits red, green, and blue channels from 0 to 255.
HSV edits hue in degrees and saturation/value as percentages.
HSL edits hue, saturation, and perceptual lightness.
Color wheel combines circular hue selection with an inner saturation/value square.
Spectrum combines a hue strip with a saturation/value square.

Conversions are deterministic Klyn code. The wheel caches its segmented geometry and both visual modes cache their gradients; pointer drags therefore change only scalar color state before repainting. Arrow keys adjust the active visual marker; hold Shift for larger steps.

Klyn ColorPicker showing a saturation and value square with a hue strip — The visual marker, hue strip, palette, and text fields always describe the same color.

Palette and Color Codes

The lower inspector accepts either rgb(255, 0, 255) or #FF00FF. Press Enter to validate an edit and Escape to restore the current value. Invalid text keeps the current color unchanged and displays a local validation message. The built-in palette contains sixteen balanced hues, and the recent strip keeps the ten most recently committed unique colors.

magenta = Color.fromHex("#FF00FF")
assert magenta.toHex() == "#FF00FF"

picker.color = magenta
picker.rememberCurrentColor()

Standalone Dialog

ColorDialog is a modal window. Cancellation preserves the previous accepted value; selection updates selectedColor.

import klyn.gui.windows.dialogs

dialog = ColorDialog(button.backgroundColor, "Button color")
if dialog.showDialog(window):
    button.backgroundColor = dialog.selectedColor

Embedded Lightbox

Use ColorLightBox in workbench-style applications that should keep the complete interaction inside the owner window. Add it once to the root overlay container, subscribe to accepted, then call open(). Like every Klyn lightbox, it is implicitly modal.

chooser = ColorLightBox(panel.backgroundColor, "Panel color")
chooser.accepted += lambda(event: ActionEvent):
    panel.backgroundColor = chooser.selectedColor

chooser.layoutParams = DockLayoutParams("fill")
window.centralWidget.add(chooser)
chooser.open()

Klyn ColorLightBox displaying RGB controls, palette, recent colors and actions — Dialog and lightbox use the same chooser panel and therefore share behavior and styling.

Themes, Zoom, and Input

Every structural surface is styled by the standard light and dark KSS themes. Runtime content zoom scales tabs, sliders, spin boxes, text fields, swatches, wheel and spectrum markers, spacing, and modal dimensions. RGB, HSV, and HSL controls remain keyboard accessible through their sliders and editable spin boxes.

Run the Sample

The sample demonstrates both hosts and applies the accepted color to a live preview.

klyn samples/gui/ColorPickerSample.kn

Next Step

Continue with File and Folder Dialogs for portable path selection using the same dialog/lightbox architecture.