Build a palette from one color using the classic hue relationships, each hue shown at five lightness steps and exported as @theme variables.
@theme {
--color-accent-1-100: oklch(0.85 0.0786 246.97); /* #a4d3ff */
--color-accent-1-200: oklch(0.7 0.1665 246.97); /* #2ea5ff */
--color-accent-1-300: oklch(0.58 0.1524 246.97); /* #007fce */
--color-accent-1-400: oklch(0.45 0.1183 246.97); /* #005992 */
--color-accent-1-500: oklch(0.32 0.0841 246.97); /* #00355b */
--color-accent-2-100: oklch(0.85 0.0746 276.97); /* #c1caff */
--color-accent-2-200: oklch(0.7 0.1585 276.97); /* #8792ff */
--color-accent-2-300: oklch(0.58 0.2301 276.97); /* #605efe */
--color-accent-2-400: oklch(0.45 0.2301 276.97); /* #422fd0 */
--color-accent-2-500: oklch(0.32 0.1981 276.97); /* #270093 */
--color-accent-3-100: oklch(0.85 0.0953 306.97); /* #debeff */
--color-accent-3-200: oklch(0.7 0.2034 306.97); /* #c075ff */
--color-accent-3-300: oklch(0.58 0.2301 306.97); /* #9e43e1 */
--color-accent-3-400: oklch(0.45 0.2301 306.97); /* #7702b5 */
--color-accent-3-500: oklch(0.32 0.1645 306.97); /* #490072 */
}
They are rotations around the hue wheel. Complementary is the opposite side, analogous the neighbours, triadic three evenly spaced, and split complementary the two colors either side of the opposite. Each one is a different amount of tension.
Because a hue on its own is not a palette. An interface needs a light fill, a mid tone to sit on, and a dark one for text, and generating them together keeps the chroma consistent across the set.
Yes. Each step is clamped into sRGB by lowering chroma while lightness and hue stay put, so a bright hue at a dark lightness comes back muted rather than clipped to something else.