Color Format Converter

ProNew

Type a color in any format and read it back as hex, rgb, hsl and oklch, each with a Copy button and a live swatch; invalid input is explained and nothing is replaced while you type. Use this when people move colors between design tools and CSS.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

initial

Guide and examples

When to use it

Designers and developers need the same color in several syntaxes, including modern oklch().

Do not use it when: For picking a color visually, use the color picker panel.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`initial`	`string`	`#0f766e`	The starting color text.

rgbToOklch(rgba) and toOklchString(rgba) are exported.

Accessibility

A labelled input with a status line that either confirms ("Understood.") or, as an alert, explains the problem with examples. The text is never replaced while typing.
Each format is a list item with its label, the value as selectable text and a Copy button whose name says what it copies and changes to "RGB copied". The swatch is decorative.
OKLCH is computed with the published matrices; values are rounded for reading (one decimal for lightness and hue).

Testing

The pattern ships with a Testing Library test (color-format-converter.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Designers and developers need the same color in several syntaxes, including modern oklch().

Do not use it when: For picking a color visually, use the color picker panel.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`initial`	`string`	`#0f766e`	The starting color text.

rgbToOklch(rgba) and toOklchString(rgba) are exported.

Accessibility

A labelled input with a status line that either confirms ("Understood.") or, as an alert, explains the problem with examples. The text is never replaced while typing.
Each format is a list item with its label, the value as selectable text and a Copy button whose name says what it copies and changes to "RGB copied". The swatch is decorative.
OKLCH is computed with the published matrices; values are rounded for reading (one decimal for lightness and hue).

Testing

The pattern ships with a Testing Library test (color-format-converter.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.