setColor(e.target.value)} />
)
}
```
### React hooks
| Hook | Returns | Description |
|---|---|---|
| `useLinearGradient(first, options?)` | `string` | Linear gradient from color or stops |
| `useMultiStepLinearGradient(color, steps?, options?)` | `string` | Multi-stop brightness gradient |
| `useMixedLinearGradient(colorA, colorB, steps?, options?)` | `string` | HSL-interpolated two-color gradient |
| `useRadialGradient(color, options?)` | `string` | Radial gradient |
| `useConicGradient(color, options?)` | `string` | Conic gradient |
| `useRainbowConicGradient(options?)` | `string` | Full-spectrum rainbow conic |
| `useComplementaryGradient(color, options?)` | `string` | Complementary harmony gradient |
| `useTriadicGradient(color, options?)` | `string` | Triadic harmony gradient |
| `useAnalogousGradient(color, options?)` | `string` | Analogous harmony gradient |
| `useTetradicGradient(color, options?)` | `string` | Tetradic harmony gradient (linear/radial/conic) |
| `useSplitComplementaryGradient(color, options?)` | `string` | Split-complementary harmony gradient |
| `useTintGradient(color, steps?, options?)` | `string` | Tint gradient (base → white) |
| `useShadeGradient(color, steps?, options?)` | `string` | Shade gradient (base → black) |
| `useToneGradient(color, steps?, options?)` | `string` | Tone gradient (base → gray) |
| `useAccessibleGradient(color, textColor, options?)` | `string` | Auto-adjusted WCAG-compliant gradient |
---
## TypeScript types
All public types are exported from the package root:
```ts
import type {
// Color stop
ColorStop,
// Linear gradient
GradientOptions,
ColorInterpolation,
// Radial gradient
RadialGradientOptions,
RadialGradientLayer,
RadialHarmonyType,
// Conic gradient
ConicGradientOptions,
// Harmony generators
HarmonyGradientOptions,
// Accessibility
AccessibleGradientOptions,
GradientWcagReport,
WcagLevel,
// Canvas export
CanvasGradientConfig,
CanvasGradientStop,
} from 'css-magic-gradient'
```
**`WcagLevel` values:**
```ts
type WcagLevel = 'AAA' | 'AA' | 'AA-large' | 'fail'
```
**`ColorInterpolation` values:**
```ts
type ColorInterpolation = 'srgb' | 'oklch' | 'lab' | 'hsl' | 'oklab' | 'lch'
```
**Custom serializer / color stop example:**
```ts
import type { ColorStop, GradientOptions } from 'css-magic-gradient'
const stops: ColorStop[] = [
{ color: '#ff6b6b', position: '0%' },
{ color: '#feca57', opacity: 0.8, position: '100%' },
]
const opts: GradientOptions = {
direction: 'to right',
interpolation: 'oklch',
}
```
---
## Architecture
```
css-magic-gradient
│
├── createLinearGradient — linear-gradient / repeating-linear-gradient
│ Auto-brightness mode — lighter start stop derived from base color
│ ColorStop[] mode — explicit stop array; per-stop opacity → rgba()
│ CSS Color Level 4 — appends `in 
Thank you for being part of this journey. ❤️