A fast, lightweight RGB curve editor component.
Like the curves tool in Lightroom, Premiere Pro, and Photoshop.
npm install rgb-curve
Professional color grading in a single React component. Zero dependencies, full control.
Master RGB, Red, Green, and Blue channels. Fine-tune each color independently, just like the pros.
Monotone cubic spline and Catmull-Rom interpolation. Silky smooth curves without overshoot artifacts.
Get a complete Look-Up Table with every change. Ready for real-time pixel processing and image manipulation.
Style every aspect with JSON props. Colors, sizes, borders, glows — build the exact look you need.
Written in TypeScript from the ground up. Full type definitions, IntelliSense, and type safety out of the box.
Lightweight with zero runtime dependencies. Only React as a peer dependency. Ship fast, stay lean.
Import the component, listen for changes, and you're done.
The onChange callback gives you both control points and a ready-to-use LUT.
import { RGBCurve } from 'rgb-curve';
function App() {
return (
<RGBCurve
width={400}
height={400}
onChange={({ points, lut }) => {
console.log('Points:', points);
console.log('LUT:', lut);
}}
/>
);
}Every pixel is customizable. Pass a styles prop and build the exact look you want.
Built-in Lightroom-inspired dark theme
Cyberpunk-inspired with glow effects
Clean and minimal for light interfaces
Simple, well-typed API. Works in both controlled and uncontrolled modes.
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | 300 | Width of the curve editor in pixels |
| height | number | 300 | Height of the curve editor in pixels |
| onChange | (data) => void | — | Callback with points, LUT, and active channel |
| defaultPoints | ChannelPoints | — | Initial control points for each channel |
| points | ChannelPoints | — | Controlled points (makes component controlled) |
| styles | RGBCurveStyles | — | Custom styles for every visual element |
| interpolation | 'monotone' | 'catmullRom' | 'monotone' | Curve interpolation algorithm |
| showTabs | boolean | true | Show/hide the channel selector tabs |
| showHistogram | boolean | false | Show/hide the histogram overlay |
| disabled | boolean | false | Disable all user interactions |
Add professional color grading to your React app in under a minute.