Components / Data & content

Color

Component + manager

Displays a color swatch, optionally with details about its oklch components.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentColor

Managercreate_color_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Color, create_color_manager } from "sveltekit-ui"

  const manager = create_color_manager({
    val: { l: 12, c: 14, h: 16, o: 24, is_dark_theme_invert: true },
    size: 6,
    is_show_details: true,
  })
</script>

<Color {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

4 entries in configuration

Property	Type	Default	Description
`val`	`object`	`null`	object with color properties { l, c, h, o, is_dark_theme_invert }
`is_show_details`	`boolean`	`false`	whether the color's numeric details are shown
`size`	`number`	`3`	the width/height in rem of the color preview
`border_radius`	`number`	`0.5`	border radius in rem for the color preview box