Color picker

Click the wheel, enter a hex/RGB value, or drag the sliders. All component colors derive from the hue and chroma of the chosen color.

Hue 250° Chroma 0.08

raised

sunken

primary

accent

danger

success

warning

Typography

Heading 1

Heading 2

Heading 3

Heading 4

A paragraph with strong, emphasis, a link, inline code, Ctrl+K, and highlighted text. Small print.

A blockquote: simplicity is the ultimate sophistication.

Buttons

Link as button

Forms

Tables

Recent orders
Order	Customer	Total	Status
#1024	Ada Lovelace	$42.00	Paid
#1025	Alan Turing	$18.50	Refunded
#1026	Grace Hopper	$99.00	Pending

Cards

Plain article

An <article> element renders as a card by default. Use <header> and <footer> inside for structure.

Or use .card on any element.

Navigation

Details

What is modern CSS?

Nested rules, :has(), light-dark(), oklch(), @container, logical properties, and more.

How do I customize the color?

Adjust --hue and --chroma on :root. Every component color derives from these.

Code

:root {
  --hue: 250;
  --chroma: 0.08;
  --primary: light-dark(
    oklch(55% var(--chroma) var(--hue)),
    oklch(70% var(--chroma) var(--hue))
  );
}