---
name: "@amplo"
slug: "amplo"
description: "Highly specialized single-component registry: a Radix-style composable OKLCH-native color picker for shadcn/ui. Supports sRGB, Display-P3, Rec.2020-stretched color spaces with lossless format switching (hex, rgb, hsl, hsb, oklch, oklab, p3), live WCAG 2.1 and APCA contrast metrics, gamut-warning lines, eyedropper, alpha slider, swatches, and full keyboard accessibility. Built for Next.js + Tailwind CSS v4 with shadcn/ui semantic tokens. MIT-licensed. Use for: design tools, theme builders, or any product feature where users need to pick colors with accurate wide-gamut rendering and accessibility feedback."
category: "Niche/single-purpose"
tags: ["accessibility", "backgrounds", "buttons", "cards", "components", "forms", "theming"]
framework: "react"
license: "MIT"
author: "TheAleSch"
website: "https://amplo.ale.design"
github: "https://github.com/TheAleSch/amplo-picker"
registry: "https://amplo.ale.design/r/registry.json"
pro: false
pro_url: null
github_stars: 15
component_count: 6
generated_at: "2026-07-28T08:59:05.895Z"
---

# @amplo

Highly specialized single-component registry: a Radix-style composable OKLCH-native color picker for shadcn/ui. Supports sRGB, Display-P3, Rec.2020-stretched color spaces with lossless format switching (hex, rgb, hsl, hsb, oklch, oklab, p3), live WCAG 2.1 and APCA contrast metrics, gamut-warning lines, eyedropper, alpha slider, swatches, and full keyboard accessibility. Built for Next.js + Tailwind CSS v4 with shadcn/ui semantic tokens. MIT-licensed. Use for: design tools, theme builders, or any product feature where users need to pick colors with accurate wide-gamut rendering and accessibility feedback.

## Links

- Website: https://amplo.ale.design
- GitHub: https://github.com/TheAleSch/amplo-picker
- Registry JSON: https://amplo.ale.design/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/amplo
- This file: https://sh4dcn.vercel.app/md/amplo.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://amplo.ale.design/r/registry.json
pnpm dlx shadcn@latest add https://amplo.ale.design/r/registry.json
bunx shadcn@latest add https://amplo.ale.design/r/registry.json
# clone the source repo
git clone https://github.com/TheAleSch/amplo-picker.git
# fetch the raw registry index
curl -s https://amplo.ale.design/r/registry.json
```

## Components (6)

| name | type | description | install |
| --- | --- | --- | --- |
| color-picker | registry:ui | OKLCH-native, Display-P3-aware color picker built on Base UI primitives — Hue/Lightness/Alpha on Slider, FormatSwitcher on Select, ChannelInput on NumberField,… | `npx shadcn@latest add https://amplo.ale.design/r/color-picker.json` |
| gradient-picker | registry:ui | Linear / radial / conic gradient editing on Base UI primitives — TypeSwitcher/InterpSwitcher/RadialSizeSelect on Select, ReverseStops and the StopList editor a… | `npx shadcn@latest add https://amplo.ale.design/r/gradient-picker.json` |
| fill-picker | registry:ui | Color + gradient + the solid/gradient mode switcher (FillPicker.Root/Tabs/Tab/Pane) — the "give me everything" entry point, Base UI variant. Pulls the Base UI … | `npx shadcn@latest add https://amplo.ale.design/r/fill-picker.json` |
| color-picker-radix | registry:ui | OKLCH-native, Display-P3-aware composable color picker with WCAG/APCA contrast metrics, gamut detection, and full keyboard accessibility. | `npx shadcn@latest add https://amplo.ale.design/r/color-picker-radix.json` |
| gradient-picker-radix | registry:ui | Composable gradient picker (linear / radial / conic) built on the Amplo color picker. CSS Color 4 interpolation, per-stop format state, keyboard-accessible ang… | `npx shadcn@latest add https://amplo.ale.design/r/gradient-picker-radix.json` |
| fill-picker-radix | registry:ui | OKLCH-native, Display-P3-aware composable fill picker (color today; gradients, images, and video on the way) with WCAG/APCA contrast metrics, gamut detection, … | `npx shadcn@latest add https://amplo.ale.design/r/fill-picker-radix.json` |

## For AI agents

```text
You are adding components from @amplo to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/amplo.md) for the component list.
2. Fetch the machine-readable index: https://amplo.ale.design/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: amplo).
```