diff --git a/src/Beutl.Controls/Curves/CurveEditor.cs b/src/Beutl.Controls/Curves/CurveEditor.cs
new file mode 100644
index 000000000..0b538c8dd
--- /dev/null
+++ b/src/Beutl.Controls/Curves/CurveEditor.cs
@@ -0,0 +1,433 @@
+#nullable enable
+
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Media;
+
+using Beutl.Graphics;
+
+using AvaPoint = Avalonia.Point;
+using AvaRect = Avalonia.Rect;
+using BtlPoint = Beutl.Graphics.Point;
+
+namespace Beutl.Controls.Curves;
+
+public class CurveEditor : Control
+{
+    public static readonly StyledProperty<IList<CurveControlPoint>?> PointsProperty =
+        AvaloniaProperty.Register<CurveEditor, IList<CurveControlPoint>?>(nameof(Points));
+
+    public static readonly StyledProperty<bool> IsReadOnlyProperty =
+        AvaloniaProperty.Register<CurveEditor, bool>(nameof(IsReadOnly));
+
+    public static readonly StyledProperty<CurveVisualization> VisualizationProperty =
+        AvaloniaProperty.Register<CurveEditor, CurveVisualization>(nameof(Visualization), CurveVisualization.None);
+
+    public static readonly StyledProperty<CurveVisualizationRenderer?> VisualizationRendererProperty =
+        AvaloniaProperty.Register<CurveEditor, CurveVisualizationRenderer?>(nameof(VisualizationRenderer));
+
+    private static readonly IPen s_curvePen = new Pen(new SolidColorBrush(Color.FromArgb(200, 0, 122, 204)), 2).ToImmutable();
+    private static readonly IPen s_axisPen = new Pen(new SolidColorBrush(Color.FromArgb(120, 255, 255, 255)), 1).ToImmutable();
+    private static readonly IPen s_handleLinePen = new Pen(new SolidColorBrush(Color.FromArgb(150, 255, 200, 100)), 1).ToImmutable();
+    private static readonly IBrush s_handleBrush = new SolidColorBrush(Color.FromArgb(200, 255, 200, 100)).ToImmutable();
+
+    private int _draggingIndex = -1;
+    private DragTarget _dragTarget = DragTarget.None;
+    private int _selectedIndex = -1;
+
+    private enum DragTarget
+    {
+        None,
+        Point,
+        LeftHandle,
+        RightHandle
+    }
+
+    public event EventHandler? DragStarted;
+
+    public event EventHandler? DragCompleted;
+
+    static CurveEditor()
+    {
+        AffectsRender<CurveEditor>(PointsProperty);
+    }
+
+    public IList<CurveControlPoint>? Points
+    {
+        get => GetValue(PointsProperty);
+        set => SetValue(PointsProperty, value);
+    }
+
+    public bool IsReadOnly
+    {
+        get => GetValue(IsReadOnlyProperty);
+        set => SetValue(IsReadOnlyProperty, value);
+    }
+
+    public CurveVisualization Visualization
+    {
+        get => GetValue(VisualizationProperty);
+        set => SetValue(VisualizationProperty, value);
+    }
+
+    public CurveVisualizationRenderer? VisualizationRenderer
+    {
+        get => GetValue(VisualizationRendererProperty);
+        set => SetValue(VisualizationRendererProperty, value);
+    }
+
+    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+    {
+        base.OnPropertyChanged(change);
+
+        if (change.Property == VisualizationRendererProperty)
+        {
+            if (change.OldValue is CurveVisualizationRenderer oldRenderer)
+                oldRenderer.Updated -= OnRendererUpdated;
+
+            if (change.NewValue is CurveVisualizationRenderer newRenderer)
+                newRenderer.Updated += OnRendererUpdated;
+
+            InvalidateVisual();
+        }
+    }
+
+    private void OnRendererUpdated(object? sender, EventArgs e)
+    {
+        InvalidateVisual();
+    }
+
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
+    {
+        base.OnPointerPressed(e);
+        if (Points is null || IsReadOnly) return;
+
+        var pos = e.GetPosition(this);
+        var norm = Normalize(pos);
+        var pointerPoint = e.GetCurrentPoint(this);
+
+        var (index, target) = HitTest(pos);
+
+        if (index >= 0)
+        {
+            if (pointerPoint.Properties.IsRightButtonPressed)
+            {
+                if (target == DragTarget.LeftHandle || target == DragTarget.RightHandle)
+                {
+                    var point = Points[index];
+                    bool isHandleDefault = target == DragTarget.LeftHandle
+                        ? point.LeftHandle == default
+                        : point.RightHandle == default;
+
+                    if (!isHandleDefault)
+                    {
+                        // ハンドルをリセット
+                        DragStarted?.Invoke(this, EventArgs.Empty);
+                        Points[index] = target == DragTarget.LeftHandle
+                            ? point.WithLeftHandle(default)
+                            : point.WithRightHandle(default);
+                        DragCompleted?.Invoke(this, EventArgs.Empty);
+                        InvalidateVisual();
+                        return;
+                    }
+
+                    target = DragTarget.Point;
+                }
+
+                if (target == DragTarget.Point && index > 0 && index < Points.Count - 1)
+                {
+                    // 端点は削除不可
+                    DragStarted?.Invoke(this, EventArgs.Empty);
+                    Points.RemoveAt(index);
+                    _selectedIndex = -1;
+                    DragCompleted?.Invoke(this, EventArgs.Empty);
+                    InvalidateVisual();
+                }
+            }
+            else if (pointerPoint.Properties.IsLeftButtonPressed)
+            {
+                _draggingIndex = index;
+                _dragTarget = target;
+                _selectedIndex = index;
+                e.Pointer.Capture(this);
+                DragStarted?.Invoke(this, EventArgs.Empty);
+                InvalidateVisual();
+            }
+        }
+        else if (pointerPoint.Properties.IsLeftButtonPressed)
+        {
+            DragStarted?.Invoke(this, EventArgs.Empty);
+            index = InsertPoint(norm);
+            _selectedIndex = index;
+            InvalidateVisual();
+
+            _draggingIndex = index;
+            _dragTarget = DragTarget.Point;
+            e.Pointer.Capture(this);
+        }
+    }
+
+    protected override void OnPointerMoved(PointerEventArgs e)
+    {
+        base.OnPointerMoved(e);
+        if (Points is null || IsReadOnly) return;
+
+        if (_draggingIndex >= 0 && _dragTarget != DragTarget.None)
+        {
+            var norm = Normalize(e.GetPosition(this));
+            var point = Points[_draggingIndex];
+
+            switch (_dragTarget)
+            {
+                case DragTarget.Point:
+                    norm = new BtlPoint(Math.Clamp(norm.X, 0, 1), Math.Clamp(norm.Y, 0, 1));
+                    if (_draggingIndex == 0)
+                        norm = new BtlPoint(0, norm.Y);
+                    else if (_draggingIndex == Points.Count - 1)
+                        norm = new BtlPoint(1, norm.Y);
+
+                    Points[_draggingIndex] = point.WithPoint(norm);
+                    SortPoints();
+                    break;
+
+                case DragTarget.LeftHandle:
+                    var leftOffsetX = Math.Min(0, norm.X - point.Point.X); // 左側のみ
+                    var leftOffset = new BtlPoint(leftOffsetX, norm.Y - point.Point.Y);
+                    Points[_draggingIndex] = point.WithLeftHandle(leftOffset);
+                    break;
+
+                case DragTarget.RightHandle:
+                    var rightOffsetX = Math.Max(0, norm.X - point.Point.X); // 右側のみ
+                    var rightOffset = new BtlPoint(rightOffsetX, norm.Y - point.Point.Y);
+                    Points[_draggingIndex] = point.WithRightHandle(rightOffset);
+                    break;
+            }
+
+            InvalidateVisual();
+        }
+    }
+
+    protected override void OnPointerReleased(PointerReleasedEventArgs e)
+    {
+        base.OnPointerReleased(e);
+        if (_draggingIndex >= 0)
+        {
+            e.Pointer.Capture(null);
+            DragCompleted?.Invoke(this, EventArgs.Empty);
+        }
+
+        _draggingIndex = -1;
+        _dragTarget = DragTarget.None;
+    }
+
+    private (int Index, DragTarget Target) HitTest(AvaPoint screenPos)
+    {
+        if (Points is null) return (-1, DragTarget.None);
+
+        const double pointRadius = 6;
+        const double handleRadius = 3;
+
+        // 選択されたポイントのハンドルを優先的にチェック
+        if (_selectedIndex >= 0 && _selectedIndex < Points.Count)
+        {
+            var selectedPoint = Points[_selectedIndex];
+
+            // 左ハンドル
+            var leftHandlePos = Denormalize(selectedPoint.AbsoluteLeftHandle);
+            if (Math.Abs(leftHandlePos.X - screenPos.X) <= handleRadius &&
+                Math.Abs(leftHandlePos.Y - screenPos.Y) <= handleRadius &&
+                _selectedIndex != 0)
+            {
+                return (_selectedIndex, DragTarget.LeftHandle);
+            }
+
+            // 右ハンドル
+            var rightHandlePos = Denormalize(selectedPoint.AbsoluteRightHandle);
+            if (Math.Abs(rightHandlePos.X - screenPos.X) <= handleRadius &&
+                Math.Abs(rightHandlePos.Y - screenPos.Y) <= handleRadius &&
+                _selectedIndex != Points.Count - 1)
+            {
+                return (_selectedIndex, DragTarget.RightHandle);
+            }
+        }
+
+        // メインポイントをチェック
+        for (int i = 0; i < Points.Count; i++)
+        {
+            var pos = Denormalize(Points[i].Point);
+            if (Math.Abs(pos.X - screenPos.X) <= pointRadius && Math.Abs(pos.Y - screenPos.Y) <= pointRadius)
+            {
+                return (i, DragTarget.Point);
+            }
+        }
+
+        return (-1, DragTarget.None);
+    }
+
+    private int InsertPoint(BtlPoint norm)
+    {
+        if (Points is null) return -1;
+
+        int index = 0;
+        while (index < Points.Count && Points[index].Point.X < norm.X)
+        {
+            index++;
+        }
+
+        // 隣接するポイントを参考にハンドルを計算
+        BtlPoint leftHandle = default;
+        BtlPoint rightHandle = default;
+
+        if (index > 0 && index < Points.Count)
+        {
+            // 前後のポイントがある場合、その方向に基づいてハンドルを設定
+            var prevPoint = Points[index - 1].Point;
+            var nextPoint = Points[index].Point;
+
+            // 前後のポイントへの距離の1/4をハンドルの長さとする
+            float leftDist = (norm.X - prevPoint.X) * 0.25f;
+            float rightDist = (nextPoint.X - norm.X) * 0.25f;
+
+            // 傾きを計算
+            float slope = (nextPoint.Y - prevPoint.Y) / (nextPoint.X - prevPoint.X);
+
+            leftHandle = new BtlPoint(-leftDist, -leftDist * slope);
+            rightHandle = new BtlPoint(rightDist, rightDist * slope);
+        }
+        else if (index > 0)
+        {
+            // 前のポイントのみある場合
+            var prevPoint = Points[index - 1].Point;
+            float dist = (norm.X - prevPoint.X) * 0.25f;
+            leftHandle = new BtlPoint(-dist, 0);
+        }
+        else if (index < Points.Count)
+        {
+            // 次のポイントのみある場合
+            var nextPoint = Points[index].Point;
+            float dist = (nextPoint.X - norm.X) * 0.25f;
+            rightHandle = new BtlPoint(dist, 0);
+        }
+
+        Points.Insert(index, new CurveControlPoint(norm, leftHandle, rightHandle));
+        return index;
+    }
+
+    private void SortPoints()
+    {
+        if (Points is null) return;
+
+        var sorted = Points.OrderBy(p => p.Point.X).ToArray();
+        for (int i = 0; i < sorted.Length; i++)
+        {
+            Points[i] = sorted[i];
+        }
+
+        // Update selected index after sorting
+        if (_selectedIndex >= 0 && _draggingIndex >= 0)
+        {
+            for (int i = 0; i < sorted.Length; i++)
+            {
+                if (Points[i].Point == sorted[_draggingIndex].Point)
+                {
+                    _selectedIndex = i;
+                    _draggingIndex = i;
+                    break;
+                }
+            }
+        }
+    }
+
+    public override void Render(DrawingContext context)
+    {
+        base.Render(context);
+
+        var bounds = new AvaRect(Bounds.Size);
+
+        VisualizationRenderer?.Draw(context, bounds, Visualization);
+
+        // Draw grid
+        for (int i = 1; i < 4; i++)
+        {
+            double x = bounds.Width / 4 * i;
+            double y = bounds.Height / 4 * i;
+            context.DrawLine(s_axisPen, new AvaPoint(x, 0), new AvaPoint(x, bounds.Height));
+            context.DrawLine(s_axisPen, new AvaPoint(0, y), new AvaPoint(bounds.Width, y));
+        }
+
+        if (Points is { Count: > 0 })
+        {
+            // Draw curve
+            if (Points.Count > 1)
+            {
+                var geometry = new StreamGeometry();
+                using (var gctx = geometry.Open())
+                {
+                    var firstPoint = Denormalize(Points[0].Point);
+                    gctx.BeginFigure(firstPoint, false);
+
+                    for (int i = 1; i < Points.Count; i++)
+                    {
+                        var prev = Points[i - 1];
+                        var curr = Points[i];
+
+                        if (prev.HasHandles || curr.HasHandles)
+                        {
+                            // Draw cubic Bezier
+                            var cp1 = Denormalize(prev.AbsoluteRightHandle);
+                            var cp2 = Denormalize(curr.AbsoluteLeftHandle);
+                            var endPoint = Denormalize(curr.Point);
+                            gctx.CubicBezierTo(cp1, cp2, endPoint);
+                        }
+                        else
+                        {
+                            // Draw line
+                            gctx.LineTo(Denormalize(curr.Point));
+                        }
+                    }
+
+                    gctx.EndFigure(false);
+                }
+
+                context.DrawGeometry(null, s_curvePen, geometry);
+            }
+
+            // Draw handles for selected point
+            if (_selectedIndex >= 0 && _selectedIndex < Points.Count)
+            {
+                var selectedPoint = Points[_selectedIndex];
+                var mainPos = Denormalize(selectedPoint.Point);
+
+                // Draw left handle
+                var leftHandlePos = Denormalize(selectedPoint.AbsoluteLeftHandle);
+                context.DrawLine(s_handleLinePen, mainPos, leftHandlePos);
+                context.DrawEllipse(s_handleBrush, s_handleLinePen, leftHandlePos, 4, 4);
+
+                // Draw right handle
+                var rightHandlePos = Denormalize(selectedPoint.AbsoluteRightHandle);
+                context.DrawLine(s_handleLinePen, mainPos, rightHandlePos);
+                context.DrawEllipse(s_handleBrush, s_handleLinePen, rightHandlePos, 4, 4);
+            }
+
+            // Draw main points
+            for (int i = 0; i < Points.Count; i++)
+            {
+                var pt = Denormalize(Points[i].Point);
+                var brush = i == _selectedIndex ? Brushes.Yellow : Brushes.White;
+                context.DrawEllipse(brush, s_curvePen, pt, 4, 4);
+            }
+        }
+    }
+
+    private BtlPoint Normalize(AvaPoint pos)
+    {
+        if (Bounds.Width <= 0 || Bounds.Height <= 0) return default;
+        return new BtlPoint((float)(pos.X / Bounds.Width), (float)(1 - (pos.Y / Bounds.Height)));
+    }
+
+    private AvaPoint Denormalize(BtlPoint pos)
+    {
+        return new AvaPoint(pos.X * Bounds.Width, (1 - pos.Y) * Bounds.Height);
+    }
+}
diff --git a/src/Beutl.Controls/Curves/CurveVisualization.cs b/src/Beutl.Controls/Curves/CurveVisualization.cs
new file mode 100644
index 000000000..04f94f941
--- /dev/null
+++ b/src/Beutl.Controls/Curves/CurveVisualization.cs
@@ -0,0 +1,15 @@
+namespace Beutl.Controls.Curves;
+
+public enum CurveVisualization
+{
+    None,
+    Master,
+    Red,
+    Green,
+    Blue,
+    HueVsHue,
+    HueVsSaturation,
+    HueVsLuminance,
+    LuminanceVsSaturation,
+    SaturationVsSaturation,
+}
diff --git a/src/Beutl.Controls/Curves/CurveVisualizationRenderer.cs b/src/Beutl.Controls/Curves/CurveVisualizationRenderer.cs
new file mode 100644
index 000000000..6a917ac41
--- /dev/null
+++ b/src/Beutl.Controls/Curves/CurveVisualizationRenderer.cs
@@ -0,0 +1,403 @@
+#nullable enable
+
+using Avalonia;
+using Avalonia.Media;
+using Avalonia.Media.Imaging;
+using Avalonia.Media.Immutable;
+using Avalonia.Platform;
+
+namespace Beutl.Controls.Curves;
+
+[Flags]
+public enum HistogramCategory
+{
+    None = 0,
+    Rgb = 1,
+    Hue = 2,
+    Luminance = 4,
+    Saturation = 8,
+    All = Rgb | Hue | Luminance | Saturation
+}
+
+public sealed class CurveVisualizationRenderer
+{
+    private readonly int[] _rHist = new int[256];
+    private readonly int[] _gHist = new int[256];
+    private readonly int[] _bHist = new int[256];
+    private readonly int[] _combinedHist = new int[256];
+    private readonly int[] _hueHist = new int[360];
+    private readonly int[] _lumaHist = new int[256];
+    private readonly int[] _satHist = new int[256];
+    private int _histMax;
+    private int _hueHistMax;
+    private int _lumaHistMax;
+    private int _satHistMax;
+
+    private static readonly ImmutableSolidColorBrush s_blackOverlayBrush =
+        new(Colors.Black, 0.55);
+
+    private static readonly ImmutableSolidColorBrush s_whiteBarBrush =
+        new(Color.FromArgb(100, 255, 255, 255));
+
+    private static readonly ImmutableSolidColorBrush s_masterBarBrush =
+        new(Color.FromArgb(140, 255, 255, 255));
+
+    private static readonly ImmutableSolidColorBrush s_redBarBrush =
+        new(Color.FromArgb(140, 255, 0, 0));
+
+    private static readonly ImmutableSolidColorBrush s_greenBarBrush =
+        new(Color.FromArgb(140, 0, 255, 0));
+
+    private static readonly ImmutableSolidColorBrush s_blueBarBrush =
+        new(Color.FromArgb(140, 30, 144, 255));
+
+    private static readonly IBrush s_hueGradientBrush;
+    private static readonly IBrush s_luminanceGradientBrush;
+    private static readonly IBrush s_masterBackBrush;
+    private static readonly IBrush s_redBackBrush;
+    private static readonly IBrush s_greenBackBrush;
+    private static readonly IBrush s_blueBackBrush;
+
+    static CurveVisualizationRenderer()
+    {
+        s_hueGradientBrush = new LinearGradientBrush
+        {
+            GradientStops =
+            [
+                new GradientStop(Colors.Red, 0.0),
+                new GradientStop(Colors.Yellow, 1.0 / 6),
+                new GradientStop(Colors.Green, 2.0 / 6),
+                new GradientStop(Colors.Cyan, 3.0 / 6),
+                new GradientStop(Colors.Blue, 4.0 / 6),
+                new GradientStop(Colors.Magenta, 5.0 / 6),
+                new GradientStop(Colors.Red, 1.0)
+            ],
+            StartPoint = new RelativePoint(0, 0.5, RelativeUnit.Relative),
+            EndPoint = new RelativePoint(1, 0.5, RelativeUnit.Relative),
+        }.ToImmutable();
+
+        s_luminanceGradientBrush = new LinearGradientBrush
+        {
+            GradientStops =
+            [
+                new GradientStop(Colors.Black, 0.0),
+                new GradientStop(Colors.White, 1.0)
+            ],
+            StartPoint = new RelativePoint(0, 0.5, RelativeUnit.Relative),
+            EndPoint = new RelativePoint(1, 0.5, RelativeUnit.Relative),
+        }.ToImmutable();
+
+        s_masterBackBrush = new LinearGradientBrush
+        {
+            GradientStops =
+            [
+                new GradientStop(Color.FromArgb(40, 128, 128, 128), 0),
+                new GradientStop(Color.FromArgb(20, 128, 128, 128), 1)
+            ],
+            StartPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
+            EndPoint = new RelativePoint(0, 1, RelativeUnit.Relative),
+        }.ToImmutable();
+
+        s_redBackBrush = new LinearGradientBrush
+        {
+            GradientStops =
+            [
+                new GradientStop(Color.FromArgb(40, 139, 0, 0), 0),
+                new GradientStop(Color.FromArgb(20, 139, 0, 0), 1)
+            ],
+            StartPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
+            EndPoint = new RelativePoint(0, 1, RelativeUnit.Relative),
+        }.ToImmutable();
+
+        s_greenBackBrush = new LinearGradientBrush
+        {
+            GradientStops =
+            [
+                new GradientStop(Color.FromArgb(40, 0, 100, 0), 0),
+                new GradientStop(Color.FromArgb(20, 0, 100, 0), 1)
+            ],
+            StartPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
+            EndPoint = new RelativePoint(0, 1, RelativeUnit.Relative),
+        }.ToImmutable();
+
+        s_blueBackBrush = new LinearGradientBrush
+        {
+            GradientStops =
+            [
+                new GradientStop(Color.FromArgb(40, 0, 0, 139), 0),
+                new GradientStop(Color.FromArgb(20, 0, 0, 139), 1)
+            ],
+            StartPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
+            EndPoint = new RelativePoint(0, 1, RelativeUnit.Relative),
+        }.ToImmutable();
+    }
+
+    public event EventHandler? Updated;
+
+    public void UpdateHistogram(WriteableBitmap? sourceBitmap, HistogramCategory categories = HistogramCategory.All)
+    {
+        if (categories == HistogramCategory.None)
+            return;
+
+        bool needRgb = categories.HasFlag(HistogramCategory.Rgb);
+        bool needHue = categories.HasFlag(HistogramCategory.Hue);
+        bool needLuma = categories.HasFlag(HistogramCategory.Luminance);
+        bool needSat = categories.HasFlag(HistogramCategory.Saturation);
+        bool needHsl = needHue || needLuma || needSat;
+
+        if (needRgb)
+        {
+            Array.Clear(_rHist);
+            Array.Clear(_gHist);
+            Array.Clear(_bHist);
+            Array.Clear(_combinedHist);
+            _histMax = 0;
+        }
+
+        if (needHue)
+        {
+            Array.Clear(_hueHist);
+            _hueHistMax = 0;
+        }
+
+        if (needLuma)
+        {
+            Array.Clear(_lumaHist);
+            _lumaHistMax = 0;
+        }
+
+        if (needSat)
+        {
+            Array.Clear(_satHist);
+            _satHistMax = 0;
+        }
+
+        if (sourceBitmap is not { } bitmap)
+            return;
+
+        using ILockedFramebuffer frame = bitmap.Lock();
+        unsafe
+        {
+            var span = new ReadOnlySpan<byte>((void*)frame.Address, frame.RowBytes * frame.Size.Height);
+            int stepX = Math.Max(1, frame.Size.Width / 256);
+            int stepY = Math.Max(1, frame.Size.Height / 256);
+
+            for (int y = 0; y < frame.Size.Height; y += stepY)
+            {
+                int row = y * frame.RowBytes;
+                for (int x = 0; x < frame.Size.Width; x += stepX)
+                {
+                    int idx = row + (x * 4);
+                    byte b = span[idx];
+                    byte g = span[idx + 1];
+                    byte r = span[idx + 2];
+
+                    if (needRgb)
+                    {
+                        _bHist[b]++;
+                        _gHist[g]++;
+                        _rHist[r]++;
+
+                        int luminance = (int)Math.Round(r * 0.2126 + g * 0.7152 + b * 0.0722, MidpointRounding.AwayFromZero);
+                        _combinedHist[luminance]++;
+                    }
+
+                    if (needHsl)
+                    {
+                        RgbToHsl(r, g, b, out int hue, out int sat, out int luma);
+
+                        if (needHue && sat > 10)
+                        {
+                            _hueHist[hue]++;
+                        }
+
+                        if (needLuma)
+                        {
+                            _lumaHist[luma]++;
+                        }
+
+                        if (needSat)
+                        {
+                            _satHist[sat]++;
+                        }
+                    }
+                }
+            }
+
+            if (needRgb)
+            {
+                _histMax = Math.Max(1,
+                    Math.Max(_combinedHist.Max(), Math.Max(_rHist.Max(), Math.Max(_gHist.Max(), _bHist.Max()))));
+            }
+
+            if (needHue)
+            {
+                _hueHistMax = Math.Max(1, _hueHist.Max());
+            }
+
+            if (needLuma)
+            {
+                _lumaHistMax = Math.Max(1, _lumaHist.Max());
+            }
+
+            if (needSat)
+            {
+                _satHistMax = Math.Max(1, _satHist.Max());
+            }
+        }
+
+        Updated?.Invoke(this, EventArgs.Empty);
+    }
+
+    private static void RgbToHsl(byte r, byte g, byte b, out int hue, out int saturation, out int luminance)
+    {
+        float rf = r / 255f;
+        float gf = g / 255f;
+        float bf = b / 255f;
+
+        float max = Math.Max(rf, Math.Max(gf, bf));
+        float min = Math.Min(rf, Math.Min(gf, bf));
+        float delta = max - min;
+
+        // Luminance
+        float l = (max + min) / 2f;
+        luminance = (int)Math.Round(l * 255);
+
+        // Saturation
+        float s = 0;
+        if (delta > 0.0001f)
+        {
+            s = delta / (1f - Math.Abs(2f * l - 1f));
+        }
+        saturation = (int)Math.Clamp(Math.Round(s * 255), 0, 255);
+
+        // Hue
+        float h = 0;
+        if (delta > 0.0001f)
+        {
+            if (max == rf)
+            {
+                h = 60f * (((gf - bf) / delta) % 6f);
+            }
+            else if (max == gf)
+            {
+                h = 60f * (((bf - rf) / delta) + 2f);
+            }
+            else
+            {
+                h = 60f * (((rf - gf) / delta) + 4f);
+            }
+        }
+        if (h < 0) h += 360f;
+        hue = (int)Math.Clamp(Math.Round(h), 0, 359);
+    }
+
+    public void Draw(DrawingContext context, Rect bounds, CurveVisualization visualization)
+    {
+        switch (visualization)
+        {
+            case CurveVisualization.None:
+                break;
+
+            case CurveVisualization.Master:
+                DrawHistogram(context, bounds, s_masterBackBrush, s_masterBarBrush, _combinedHist);
+                break;
+
+            case CurveVisualization.Red:
+                DrawHistogram(context, bounds, s_redBackBrush, s_redBarBrush, _rHist);
+                break;
+
+            case CurveVisualization.Green:
+                DrawHistogram(context, bounds, s_greenBackBrush, s_greenBarBrush, _gHist);
+                break;
+
+            case CurveVisualization.Blue:
+                DrawHistogram(context, bounds, s_blueBackBrush, s_blueBarBrush, _bHist);
+                break;
+
+            case CurveVisualization.HueVsHue:
+            case CurveVisualization.HueVsSaturation:
+            case CurveVisualization.HueVsLuminance:
+                DrawHueGradient(context, bounds);
+                break;
+
+            case CurveVisualization.LuminanceVsSaturation:
+                DrawLuminanceGradient(context, bounds);
+                break;
+
+            case CurveVisualization.SaturationVsSaturation:
+                DrawSaturationGradient(context, bounds);
+                break;
+        }
+    }
+
+    private void DrawHistogram(DrawingContext context, Rect bounds, IBrush backBrush, IBrush barBrush, int[] histogram)
+    {
+        context.DrawRectangle(backBrush, null, bounds);
+        if (histogram.Length == 0 || _histMax <= 0)
+            return;
+
+        double barWidth = bounds.Width / histogram.Length;
+
+        for (int i = 0; i < histogram.Length; i++)
+        {
+            double height = bounds.Height * histogram[i] / _histMax;
+            var rect = new Rect(bounds.X + i * barWidth, bounds.Bottom - height, Math.Max(1, barWidth - 0.5), height);
+            context.DrawRectangle(barBrush, null, rect);
+        }
+    }
+
+    private void DrawHueGradient(DrawingContext context, Rect bounds)
+    {
+        context.DrawRectangle(s_hueGradientBrush, null, bounds);
+        context.DrawRectangle(s_blackOverlayBrush, null, bounds);
+
+        if (_hueHistMax > 0)
+        {
+            double barWidth = bounds.Width / 360.0;
+
+            for (int i = 0; i < 360; i++)
+            {
+                double height = bounds.Height * _hueHist[i] / _hueHistMax;
+                var rect = new Rect(bounds.X + i * barWidth, bounds.Bottom - height, Math.Max(1, barWidth), height);
+                context.DrawRectangle(s_whiteBarBrush, null, rect);
+            }
+        }
+    }
+
+    private void DrawLuminanceGradient(DrawingContext context, Rect bounds)
+    {
+        context.DrawRectangle(s_luminanceGradientBrush, null, bounds);
+        context.DrawRectangle(s_blackOverlayBrush, null, bounds);
+
+        if (_lumaHistMax > 0)
+        {
+            double barWidth = bounds.Width / 256.0;
+
+            for (int i = 0; i < 256; i++)
+            {
+                double height = bounds.Height * _lumaHist[i] / _lumaHistMax;
+                var rect = new Rect(bounds.X + i * barWidth, bounds.Bottom - height, Math.Max(1, barWidth), height);
+                context.DrawRectangle(s_whiteBarBrush, null, rect);
+            }
+        }
+    }
+
+    private void DrawSaturationGradient(DrawingContext context, Rect bounds)
+    {
+        context.DrawRectangle(s_luminanceGradientBrush, null, bounds);
+        context.DrawRectangle(s_blackOverlayBrush, null, bounds);
+
+        if (_satHistMax > 0)
+        {
+            double barWidth = bounds.Width / 256.0;
+
+            for (int i = 0; i < 256; i++)
+            {
+                double height = bounds.Height * _satHist[i] / _satHistMax;
+                var rect = new Rect(bounds.X + i * barWidth, bounds.Bottom - height, Math.Max(1, barWidth), height);
+                context.DrawRectangle(s_whiteBarBrush, null, rect);
+            }
+        }
+    }
+}
diff --git a/src/Beutl.Controls/GradingColorHelper.cs b/src/Beutl.Controls/GradingColorHelper.cs
new file mode 100644
index 000000000..c3b97b154
--- /dev/null
+++ b/src/Beutl.Controls/GradingColorHelper.cs
@@ -0,0 +1,115 @@
+using Beutl.Media;
+using UnboundedHsv = (float H, float S, float V);
+
+namespace Beutl.Controls;
+
+public static class GradingColorHelper
+{
+    private const float EPSILON = 0.001f;
+
+    public static UnboundedHsv GetUnboundedHsv(GradingColor color)
+    {
+        // HSVに変換する
+        var r = MathF.Abs(color.R);
+        var g = MathF.Abs(color.G);
+        var b = MathF.Abs(color.B);
+        var min = MathF.Min(r, MathF.Min(g, b));
+        var max = MathF.Max(r, MathF.Max(g, b));
+        var delta = max - min;
+
+        var h = 0f;
+        var s = 0f;
+        var v = max;
+        if (color.R < 0 || color.G < 0 || color.B < 0)
+        {
+            v = -v;
+        }
+
+        if (delta > EPSILON)
+        {
+            s = delta / max;
+
+            if (MathF.Abs(r - max) < EPSILON)
+            {
+                h = ((g - b) / delta);
+            }
+            else if (MathF.Abs(g - max) < EPSILON)
+            {
+                h = (2f + (b - r) / delta);
+            }
+            else
+            {
+                h = (4f + (r - g) / delta);
+            }
+
+            h *= 60;
+        }
+
+        if (h < 0)
+            h += 360;
+        else if (h >= 360)
+            h -= 360;
+
+        return (h, s, v);
+    }
+
+    public static GradingColor GetColor(UnboundedHsv color)
+    {
+        var hue = color.H;
+        var sat = color.S;
+        var val = color.V;
+        float r, g, b;
+        r = g = b = val;
+
+        if (hue >= 0 && sat >= EPSILON)
+        {
+            hue = (hue / 360f) * 6f;
+
+            var h = (int)hue;
+            var v1 = val * (1f - sat);
+            var v2 = val * (1f - sat * (hue - h));
+            var v3 = val * (1f - sat * (1f - (hue - h)));
+
+            switch (h)
+            {
+                case 0:
+                    r = val;
+                    g = v3;
+                    b = v1;
+                    break;
+
+                case 1:
+                    r = v2;
+                    g = val;
+                    b = v1;
+                    break;
+
+                case 2:
+                    r = v1;
+                    g = val;
+                    b = v3;
+                    break;
+
+                case 3:
+                    r = v1;
+                    g = v2;
+                    b = val;
+                    break;
+
+                case 4:
+                    r = v3;
+                    g = v1;
+                    b = val;
+                    break;
+
+                case 5:
+                    r = val;
+                    g = v1;
+                    b = v2;
+                    break;
+            }
+        }
+
+        return new GradingColor(r, g, b);
+    }
+}
diff --git a/src/Beutl.Controls/PropertyEditors/ColorGradingWheel.cs b/src/Beutl.Controls/PropertyEditors/ColorGradingWheel.cs
new file mode 100644
index 000000000..a4d907ae1
--- /dev/null
+++ b/src/Beutl.Controls/PropertyEditors/ColorGradingWheel.cs
@@ -0,0 +1,76 @@
+#nullable enable
+
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Beutl.Media;
+
+namespace Beutl.Controls.PropertyEditors;
+
+public class ColorGradingWheel : PropertyEditor
+{
+    public static readonly DirectProperty<ColorGradingWheel, GradingColor> ColorProperty =
+        AvaloniaProperty.RegisterDirect<ColorGradingWheel, GradingColor>(
+            nameof(Color),
+            o => o.Color,
+            (o, v) => o.Color = v,
+            defaultBindingMode: BindingMode.TwoWay);
+
+    public static readonly StyledProperty<GradingColorPickerInputType> InputTypeProperty =
+        AvaloniaProperty.Register<ColorGradingWheel, GradingColorPickerInputType>(nameof(InputType));
+
+    public static readonly StyledProperty<bool> ShowDetailsProperty =
+        AvaloniaProperty.Register<ColorGradingWheel, bool>(nameof(ShowDetails));
+
+    private GradingColorPicker? _gradingColorPicker;
+
+    public GradingColor Color
+    {
+        get;
+        set => SetAndRaise(ColorProperty, ref field, value);
+    }
+
+    public GradingColorPickerInputType InputType
+    {
+        get => GetValue(InputTypeProperty);
+        set => SetValue(InputTypeProperty, value);
+    }
+
+    public bool ShowDetails
+    {
+        get => GetValue(ShowDetailsProperty);
+        set => SetValue(ShowDetailsProperty, value);
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+
+        if (_gradingColorPicker != null)
+        {
+            _gradingColorPicker.ColorChanged -= OnColorChanged;
+            _gradingColorPicker.ColorConfirmed -= OnColorConfirmed;
+        }
+
+        _gradingColorPicker = e.NameScope.Find<GradingColorPicker>("PART_GradingColorPicker");
+
+        if (_gradingColorPicker != null)
+        {
+            _gradingColorPicker.ColorChanged += OnColorChanged;
+            _gradingColorPicker.ColorConfirmed += OnColorConfirmed;
+        }
+    }
+
+    private void OnColorConfirmed(GradingColorPicker sender, (GradingColor OldValue, GradingColor NewValue) args)
+    {
+        RaiseEvent(new PropertyEditorValueChangedEventArgs<GradingColor>(
+            args.NewValue, args.OldValue, ValueConfirmedEvent));
+    }
+
+    private void OnColorChanged(GradingColorPicker sender, (GradingColor OldValue, GradingColor NewValue) args)
+    {
+        RaiseEvent(new PropertyEditorValueChangedEventArgs<GradingColor>(
+            args.NewValue, args.OldValue, ValueChangedEvent));
+    }
+}
diff --git a/src/Beutl.Controls/PropertyEditors/GradingColorBrushConverter.cs b/src/Beutl.Controls/PropertyEditors/GradingColorBrushConverter.cs
new file mode 100644
index 000000000..0b824fba4
--- /dev/null
+++ b/src/Beutl.Controls/PropertyEditors/GradingColorBrushConverter.cs
@@ -0,0 +1,33 @@
+#nullable enable
+
+using System.Globalization;
+
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+using Beutl.Media;
+
+using ASolidColorBrush = Avalonia.Media.SolidColorBrush;
+using AColor = Avalonia.Media.Color;
+
+namespace Beutl.Controls.PropertyEditors;
+
+public class GradingColorBrushConverter : IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is GradingColor gradingColor)
+        {
+            var beutlColor = gradingColor.ToColor();
+            var avaloniaColor = AColor.FromArgb(beutlColor.A, beutlColor.R, beutlColor.G, beutlColor.B);
+            return new ASolidColorBrush(avaloniaColor);
+        }
+
+        return null;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}
diff --git a/src/Beutl.Controls/PropertyEditors/GradingColorComponentsEditor.cs b/src/Beutl.Controls/PropertyEditors/GradingColorComponentsEditor.cs
new file mode 100644
index 000000000..74c05d15b
--- /dev/null
+++ b/src/Beutl.Controls/PropertyEditors/GradingColorComponentsEditor.cs
@@ -0,0 +1,145 @@
+using Avalonia;
+using Beutl.Language;
+using Beutl.Media;
+using FluentAvalonia.UI.Media;
+using UnboundedHsv = (float H, float S, float V);
+
+#nullable enable
+
+namespace Beutl.Controls.PropertyEditors;
+
+public class GradingColorComponentsEditor : Vector3Editor<float>
+{
+    public static readonly DirectProperty<GradingColorComponentsEditor, GradingColor> ColorProperty =
+        AvaloniaProperty.RegisterDirect<GradingColorComponentsEditor, GradingColor>(nameof(Color),
+            x => x.Color, (x, v) => x.Color = v);
+
+    public static readonly DirectProperty<ColorComponentsEditor, bool> RgbProperty =
+        AvaloniaProperty.RegisterDirect<ColorComponentsEditor, bool>(nameof(Rgb),
+            x => x.Rgb, (x, v) => x.Rgb = v, unsetValue: true);
+
+    private GradingColor _color = new GradingColor(1, 1, 1);
+    private bool _rgb = true;
+
+    static GradingColorComponentsEditor()
+    {
+        ValueChangedEvent.AddClassHandler<GradingColorComponentsEditor>((t, args) =>
+        {
+            if (args is PropertyEditorValueChangedEventArgs<(float, float, float)> e)
+            {
+                t.Color = t.ToGradingColorFromTuple(e.NewValue);
+                t.UpdateProperties();
+            }
+        });
+    }
+
+    public GradingColorComponentsEditor()
+    {
+        UpdateHeaders();
+        UpdateProperties();
+    }
+
+    public GradingColor Color
+    {
+        get => _color;
+        set
+        {
+            if (SetAndRaise(ColorProperty, ref _color, value))
+            {
+                UpdateProperties();
+            }
+        }
+    }
+
+    public bool Rgb
+    {
+        get => _rgb;
+        set
+        {
+            if (SetAndRaise(RgbProperty, ref _rgb, value))
+            {
+                UpdateHeaders();
+                UpdateProperties();
+            }
+        }
+    }
+
+    private void UpdateHeaders()
+    {
+        if (Rgb)
+        {
+            FirstHeader = Strings.Red;
+            SecondHeader = Strings.Green;
+            ThirdHeader = Strings.Blue;
+        }
+        else
+        {
+            FirstHeader = Strings.Hue;
+            SecondHeader = Strings.Saturation;
+            ThirdHeader = Strings.Brightness;
+        }
+    }
+
+    private void UpdateProperties()
+    {
+        if (Rgb)
+        {
+            FirstValue = Color.R * 100f;
+            SecondValue = Color.G * 100f;
+            ThirdValue = Color.B * 100f;
+        }
+        else
+        {
+            var color2 = GradingColorHelper.GetUnboundedHsv(Color);
+            FirstValue = color2.H;
+            SecondValue = color2.S * 100f;
+            ThirdValue = color2.V * 100f;
+        }
+    }
+
+    public GradingColor ToGradingColorFromTuple((float, float, float) t)
+    {
+        if (Rgb)
+        {
+            return new GradingColor(
+                t.Item1 / 100f,
+                t.Item2 / 100f,
+                t.Item3 / 100f);
+        }
+        else
+        {
+            (float h, float s, float v) = t;
+            h %= 360;
+            if (h < 0)
+            {
+                h += 360;
+            }
+
+            var hsv = (h, s / 100f, v / 100f);
+            return GradingColorHelper.GetColor(hsv);
+        }
+    }
+
+    public (GradingColor?, UnboundedHsv?) GetGradingColorOrUnboundedHsv((float, float, float) t)
+    {
+        if (Rgb)
+        {
+            return (new GradingColor(
+                t.Item1 / 100f,
+                t.Item2 / 100f,
+                t.Item3 / 100f),
+                null);
+        }
+        else
+        {
+            (float h, float s, float v) = t;
+            h %= 360;
+            if (h < 0)
+            {
+                h += 360;
+            }
+
+            return (null, (h, s / 100f, v / 100f));
+        }
+    }
+}
diff --git a/src/Beutl.Controls/PropertyEditors/GradingColorEditor.cs b/src/Beutl.Controls/PropertyEditors/GradingColorEditor.cs
new file mode 100644
index 000000000..98cf35992
--- /dev/null
+++ b/src/Beutl.Controls/PropertyEditors/GradingColorEditor.cs
@@ -0,0 +1,143 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.Interactivity;
+
+using Beutl.Media;
+
+#nullable enable
+
+namespace Beutl.Controls.PropertyEditors;
+
+public class GradingColorEditor : PropertyEditor
+{
+    public static readonly DirectProperty<GradingColorEditor, GradingColor> ValueProperty =
+        AvaloniaProperty.RegisterDirect<GradingColorEditor, GradingColor>(
+            nameof(Value),
+            o => o.Value,
+            (o, v) => o.Value = v,
+            defaultBindingMode: BindingMode.TwoWay);
+
+    public static readonly StyledProperty<bool> IsLivePreviewEnabledProperty =
+        AvaloniaProperty.Register<GradingColorEditor, bool>(nameof(IsLivePreviewEnabled));
+
+    private GradingColorPickerFlyout? _flyout;
+
+    private bool _flyoutActive;
+    private Button? _button;
+
+    private GradingColor _oldValue;
+    private GradingColor _value;
+
+    public GradingColor Value
+    {
+        get => _value;
+        set => SetAndRaise(ValueProperty, ref _value, value);
+    }
+
+    public bool IsLivePreviewEnabled
+    {
+        get => GetValue(IsLivePreviewEnabledProperty);
+        set => SetValue(IsLivePreviewEnabledProperty, value);
+    }
+
+    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+    {
+        base.OnPropertyChanged(change);
+        if (change.Property == ValueProperty)
+        {
+            _flyout?.Color = Value;
+        }
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        if (_button != null)
+        {
+            _button.Click -= OnButtonClick;
+        }
+        base.OnApplyTemplate(e);
+        _button = e.NameScope.Get<Button>("PART_ColorPickerButton");
+        if (_button != null)
+        {
+            _button.Click += OnButtonClick;
+        }
+    }
+
+    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnAttachedToVisualTree(e);
+        _flyout ??= new GradingColorPickerFlyout();
+        _flyout.Closed += OnFlyoutClosed;
+        _flyout.Confirmed += OnFlyoutConfirmed;
+    }
+
+    protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnDetachedFromVisualTree(e);
+        if (_flyout != null)
+        {
+            _flyout.Closed -= OnFlyoutClosed;
+            _flyout.Confirmed -= OnFlyoutConfirmed;
+        }
+    }
+
+    private void OnButtonClick(object? sender, RoutedEventArgs e)
+    {
+        if (_flyout == null) return;
+
+        _flyout.Hide();
+
+        _flyout.Color = Value;
+
+        _flyout.Placement = PlacementMode.Bottom;
+
+        _flyout.ShowHideButtons(!IsLivePreviewEnabled);
+
+        if (IsLivePreviewEnabled)
+        {
+            _flyout.ColorChanged += OnFlyoutColorChanged;
+        }
+
+        _flyout.ShowAt(this);
+
+        _flyoutActive = true;
+
+        if (IsLivePreviewEnabled)
+            _oldValue = _value;
+    }
+
+    private void OnFlyoutColorChanged(GradingColorPickerFlyout sender, (GradingColor OldValue, GradingColor NewValue) args)
+    {
+        if (IsLivePreviewEnabled)
+        {
+            var oldValue = Value;
+            Value = args.NewValue;
+            RaiseEvent(new PropertyEditorValueChangedEventArgs<GradingColor>(
+                args.NewValue, oldValue, ValueChangedEvent));
+        }
+    }
+
+    private void OnFlyoutConfirmed(GradingColorPickerFlyout sender, EventArgs args)
+    {
+        if (_flyoutActive && _flyout != null)
+        {
+            Value = _flyout.Color;
+            RaiseEvent(new PropertyEditorValueChangedEventArgs<GradingColor>(
+                Value, _oldValue, ValueConfirmedEvent));
+        }
+    }
+
+    private void OnFlyoutClosed(object? sender, EventArgs e)
+    {
+        if (_flyout != null && IsLivePreviewEnabled)
+        {
+            _flyout.ColorChanged -= OnFlyoutColorChanged;
+            RaiseEvent(new PropertyEditorValueChangedEventArgs<GradingColor>(
+                Value, _oldValue, ValueConfirmedEvent));
+        }
+
+        _flyoutActive = false;
+    }
+}
diff --git a/src/Beutl.Controls/PropertyEditors/GradingColorPicker.cs b/src/Beutl.Controls/PropertyEditors/GradingColorPicker.cs
new file mode 100644
index 000000000..11618a186
--- /dev/null
+++ b/src/Beutl.Controls/PropertyEditors/GradingColorPicker.cs
@@ -0,0 +1,412 @@
+using System.Diagnostics;
+using System.Reactive.Disposables;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Media;
+using Beutl.Media;
+using Beutl.Reactive;
+using FluentAvalonia.Core;
+using UnboundedHsv = (float H, float S, float V);
+
+#nullable enable
+
+namespace Beutl.Controls.PropertyEditors;
+
+public enum GradingColorPickerInputType
+{
+    Rgb,
+    Hsv
+}
+
+[PseudoClasses(":details")]
+public class GradingColorPicker : TemplatedControl
+{
+    public static readonly StyledProperty<GradingColor> ColorProperty =
+        AvaloniaProperty.Register<GradingColorPicker, GradingColor>(nameof(Color),
+            new GradingColor(1, 1, 1), defaultBindingMode: BindingMode.TwoWay);
+
+    public static readonly StyledProperty<GradingColorPickerInputType> InputTypeProperty =
+        AvaloniaProperty.Register<GradingColorPicker, GradingColorPickerInputType>(nameof(InputType));
+
+    public static readonly StyledProperty<bool> ShowDetailsProperty =
+        AvaloniaProperty.Register<GradingColorPicker, bool>(nameof(ShowDetails));
+
+    private readonly CompositeDisposable _disposables = [];
+    private ColorSpectrum? _ringSpectrum;
+    private ColorPreviewer? _previewer;
+    private GradingWheel? _firstComponentWheel, _secondComponentWheel, _thirdComponentWheel, _fourthComponentWheel;
+    private ColorSlider? _hueSlider, _saturationSlider;
+    private ComboBox? _colorType;
+    private ToggleButton? _detailsButton;
+    private GradingColorComponentsEditor? _componentsBox;
+    private bool _ignoreColorChange;
+    private UnboundedHsv _oldHsv;
+    private GradingColor _oldColor;
+    private UnboundedHsv _currentHsv;
+
+    public event TypedEventHandler<GradingColorPicker, (GradingColor OldValue, GradingColor NewValue)>? ColorChanged;
+
+    public event TypedEventHandler<GradingColorPicker, (GradingColor OldValue, GradingColor NewValue)>? ColorConfirmed;
+
+    public GradingColor Color
+    {
+        get => GetValue(ColorProperty);
+        set => SetValue(ColorProperty, value);
+    }
+
+    public GradingColorPickerInputType InputType
+    {
+        get => GetValue(InputTypeProperty);
+        set => SetValue(InputTypeProperty, value);
+    }
+
+    public bool ShowDetails
+    {
+        get => GetValue(ShowDetailsProperty);
+        set => SetValue(ShowDetailsProperty, value);
+    }
+
+    private ColorSlider?[] GetColorSliders() =>
+    [
+        _hueSlider,
+        _saturationSlider
+    ];
+
+    private GradingWheel?[] GetWheels() =>
+    [
+        _firstComponentWheel,
+        _secondComponentWheel,
+        _thirdComponentWheel,
+        _fourthComponentWheel
+    ];
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        UnregisterEvents();
+
+        base.OnApplyTemplate(e);
+        _ringSpectrum = e.NameScope.Find<ColorSpectrum>("RingSpectrum");
+        _previewer = e.NameScope.Find<ColorPreviewer>("Previewer");
+        _firstComponentWheel = e.NameScope.Find<GradingWheel>("FirstComponentWheel");
+        _secondComponentWheel = e.NameScope.Find<GradingWheel>("SecondComponentWheel");
+        _thirdComponentWheel = e.NameScope.Find<GradingWheel>("ThirdComponentWheel");
+        _fourthComponentWheel = e.NameScope.Find<GradingWheel>("FourthComponentWheel");
+        _hueSlider = e.NameScope.Find<ColorSlider>("HueSlider");
+        _saturationSlider = e.NameScope.Find<ColorSlider>("SaturationSlider");
+
+        _colorType = e.NameScope.Find<ComboBox>("ColorType");
+        _detailsButton = e.NameScope.Find<ToggleButton>("ToggleDetailsButton");
+        _componentsBox = e.NameScope.Find<GradingColorComponentsEditor>("ColorComponentsBox");
+
+        if (_ringSpectrum != null)
+        {
+            _ringSpectrum.ColorChanged += OnSpectrumColorChanged;
+            _ringSpectrum.AddHandler(PointerPressedEvent, OnSpectrumPointerPressed, handledEventsToo: true);
+            _ringSpectrum.AddHandler(PointerReleasedEvent, OnSpectrumPointerReleased, handledEventsToo: true);
+        }
+
+        if (_previewer != null)
+        {
+            _previewer.ColorChanged += OnSpectrumColorChanged;
+            _previewer.AddHandler(PointerPressedEvent, OnSpectrumPointerPressed, handledEventsToo: true);
+            _previewer.AddHandler(PointerReleasedEvent, OnSpectrumPointerReleased, handledEventsToo: true);
+        }
+
+        foreach (ColorSlider? item in GetColorSliders())
+        {
+            if (item == null) continue;
+            item.ColorChanged += OnColorSliderColorChanged;
+            item.AddHandler(PointerPressedEvent, OnSpectrumPointerPressed, handledEventsToo: true);
+            item.AddHandler(PointerReleasedEvent, OnSpectrumPointerReleased, handledEventsToo: true);
+        }
+
+        foreach (GradingWheel? item in GetWheels())
+        {
+            if (item == null) continue;
+            item.DragStarted += OnWheelDragStarted;
+            item.DragDelta += OnWheelDragDelta;
+            item.DragCompleted += OnWheelDragCompleted;
+        }
+
+        if (_componentsBox != null)
+        {
+            _componentsBox.ValueChanged += OnComponentsBoxValueChanged;
+            _componentsBox.ValueConfirmed += OnComponentsBoxValueConfirmed;
+        }
+
+        _colorType?.GetPropertyChangedObservable(SelectingItemsControl.SelectedIndexProperty)
+            .Subscribe(_ => OnColorTypeChanged())
+            .DisposeWith(_disposables);
+
+        if (_detailsButton != null)
+        {
+            _detailsButton.GetObservable(ToggleButton.IsCheckedProperty)
+                .Subscribe(OnToggleDetailsButtonIsCheckedChanged)
+                .DisposeWith(_disposables);
+        }
+
+        UpdateColor((Color, null));
+        OnInputTypeChanged();
+    }
+
+    private void OnWheelDragStarted(object? sender, VectorEventArgs e)
+    {
+        _oldHsv = _currentHsv;
+        _oldColor = Color;
+    }
+
+    private void OnWheelDragDelta(object? sender, VectorEventArgs e)
+    {
+        if (_ignoreColorChange) return;
+
+        if (sender is GradingWheel wheel)
+        {
+            float delta = (float)(e.Vector.X / wheel.Bounds.Width);
+            if ((InputType == GradingColorPickerInputType.Hsv || !PseudoClasses.Contains(":details")) && wheel.Name == "ThirdComponentWheel")
+            {
+                // Hue, SaturationはSliderで操作するため、Valueのみ変更する
+                var hsv = _oldHsv;
+                hsv.V += delta;
+                UpdateColor((null, hsv));
+            }
+            else if (InputType == GradingColorPickerInputType.Rgb)
+            {
+                bool isMaster = wheel.Name == "FourthComponentWheel";
+                var color = _oldColor;
+                if (isMaster || wheel.Name == "FirstComponentWheel")
+                {
+                    color = new(color.R + delta, color.G, color.B);
+                }
+                if (isMaster || wheel.Name == "SecondComponentWheel")
+                {
+                    color = new(color.R, color.G + delta, color.B);
+                }
+                if (isMaster || wheel.Name == "ThirdComponentWheel")
+                {
+                    color = new(color.R, color.G, color.B + delta);
+                }
+
+                UpdateColor((color, null));
+            }
+        }
+    }
+
+    private void OnWheelDragCompleted(object? sender, VectorEventArgs e)
+    {
+        var current = Color;
+        if (!_oldColor.Equals(current))
+        {
+            ColorConfirmed?.Invoke(this, (_oldColor, current));
+        }
+    }
+
+    private void OnComponentsBoxValueConfirmed(object? sender, PropertyEditorValueChangedEventArgs e)
+    {
+        if (_componentsBox != null && e is PropertyEditorValueChangedEventArgs<(float, float, float)> ee)
+        {
+            var oldValue = _componentsBox.ToGradingColorFromTuple(ee.OldValue);
+            var newValue = _componentsBox.ToGradingColorFromTuple(ee.NewValue);
+            ColorConfirmed?.Invoke(this, (oldValue, newValue));
+        }
+    }
+
+    private void OnComponentsBoxValueChanged(object? sender, PropertyEditorValueChangedEventArgs e)
+    {
+        if (_componentsBox != null && !_ignoreColorChange && e is PropertyEditorValueChangedEventArgs<(float, float, float)> ee)
+        {
+            var newValue = _componentsBox.GetGradingColorOrUnboundedHsv(ee.NewValue);
+            UpdateColor(newValue, ignoreComponents: true);
+        }
+    }
+
+    private void OnSpectrumPointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        _oldColor = Color;
+    }
+
+    private void OnSpectrumPointerReleased(object? sender, PointerReleasedEventArgs e)
+    {
+        GradingColor color = Color;
+        GradingColor oldColor = _oldColor;
+        if (oldColor != color)
+        {
+            ColorConfirmed?.Invoke(this, (oldColor, color));
+        }
+    }
+
+    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+    {
+        base.OnPropertyChanged(change);
+        if (change.Property == ColorProperty)
+        {
+            UpdateColor((Color, null));
+        }
+        else if (change.Property == InputTypeProperty)
+        {
+            OnInputTypeChanged();
+        }
+        else if (change.Property == ShowDetailsProperty)
+        {
+            OnShowDetailsChanged(change.GetNewValue<bool>());
+        }
+    }
+
+    private void OnToggleDetailsButtonIsCheckedChanged(bool? value)
+    {
+        ShowDetails = value == true;
+    }
+
+    private void OnShowDetailsChanged(bool value)
+    {
+        PseudoClasses.Set(":details", value);
+        _detailsButton?.IsChecked = value;
+    }
+
+    private void OnColorTypeChanged()
+    {
+        if (_colorType != null)
+        {
+            InputType = _colorType.SelectedIndex switch
+            {
+                1 => GradingColorPickerInputType.Hsv,
+                _ => GradingColorPickerInputType.Rgb,
+            };
+        }
+    }
+
+    private void OnInputTypeChanged()
+    {
+        int index = InputType switch
+        {
+            GradingColorPickerInputType.Rgb => 0,
+            GradingColorPickerInputType.Hsv => 1,
+            _ => 0,
+        };
+
+        _colorType?.SelectedIndex = index;
+        _componentsBox?.Rgb = InputType == GradingColorPickerInputType.Rgb;
+    }
+
+    private void OnColorSliderColorChanged(object? sender, ColorChangedEventArgs args)
+    {
+        if (_ignoreColorChange) return;
+
+        if (sender is ColorSlider { ColorModel: ColorModel.Hsva } slider)
+        {
+            UnboundedHsv hsv = _currentHsv;
+
+            if (slider is { ColorComponent: ColorComponent.Component2 })
+            {
+                hsv.S = (float)slider.HsvColor.S;
+            }
+            else if (slider is { ColorComponent: ColorComponent.Component1 })
+            {
+                hsv.H = (float)slider.HsvColor.H;
+            }
+
+            UpdateColor((null, hsv));
+        }
+    }
+
+    private void OnSpectrumColorChanged(object? sender, ColorChangedEventArgs args)
+    {
+        HsvColor color = args.NewColor.ToHsv();
+        if (sender is ColorSpectrum spectrum)
+        {
+            color = spectrum.HsvColor;
+        }
+        else if (sender is ColorPreviewer previewer)
+        {
+            color = previewer.HsvColor;
+        }
+
+        var hsv = ((float)color.H, (float)color.S, (float)color.V);
+        UpdateColor((null, hsv));
+    }
+
+    private void UpdateColor((GradingColor?, UnboundedHsv?) color, bool ignoreComponents = false)
+    {
+        if (_ignoreColorChange) return;
+
+        try
+        {
+            _ignoreColorChange = true;
+            GradingColor oldColor = Color;
+            GradingColor newColor = color.Item1 ?? GradingColorHelper.GetColor(color.Item2!.Value);
+            UnboundedHsv newHsv = color.Item2 ?? GradingColorHelper.GetUnboundedHsv(color.Item1!.Value);
+            _currentHsv = newHsv;
+            Color = newColor;
+
+            HsvColor hsv = HsvColor.FromHsv(newHsv.H, newHsv.S, newHsv.V);
+
+            _ringSpectrum?.HsvColor = hsv;
+            _previewer?.HsvColor = hsv;
+
+            foreach (ColorSlider? item in GetColorSliders())
+            {
+                if (item == null) continue;
+
+                if (item.ColorModel == ColorModel.Hsva)
+                {
+                    item.HsvColor = hsv;
+                }
+            }
+
+            if (_componentsBox != null && !ignoreComponents)
+                _componentsBox.Color = newColor;
+
+            ColorChanged?.Invoke(this, (oldColor, newColor));
+        }
+        finally
+        {
+            _ignoreColorChange = false;
+        }
+    }
+
+    private void UnregisterEvents()
+    {
+        _disposables.Clear();
+
+        if (_ringSpectrum != null)
+        {
+            _ringSpectrum.ColorChanged -= OnSpectrumColorChanged;
+            _ringSpectrum.RemoveHandler(PointerPressedEvent, OnSpectrumPointerPressed);
+            _ringSpectrum.RemoveHandler(PointerReleasedEvent, OnSpectrumPointerReleased);
+        }
+
+        if (_previewer != null)
+        {
+            _previewer.ColorChanged -= OnSpectrumColorChanged;
+            _previewer.RemoveHandler(PointerPressedEvent, OnSpectrumPointerPressed);
+            _previewer.RemoveHandler(PointerReleasedEvent, OnSpectrumPointerReleased);
+        }
+
+        if (_componentsBox != null)
+        {
+            _componentsBox.ValueChanged -= OnComponentsBoxValueChanged;
+            _componentsBox.ValueConfirmed -= OnComponentsBoxValueConfirmed;
+        }
+
+        foreach (ColorSlider? item in GetColorSliders())
+        {
+            if (item == null) continue;
+
+            item.ColorChanged -= OnColorSliderColorChanged;
+            item.RemoveHandler(PointerPressedEvent, OnSpectrumPointerPressed);
+            item.RemoveHandler(PointerReleasedEvent, OnSpectrumPointerReleased);
+        }
+
+        foreach (GradingWheel? item in GetWheels())
+        {
+            if (item == null) continue;
+
+            item.DragStarted -= OnWheelDragStarted;
+            item.DragDelta -= OnWheelDragDelta;
+            item.DragCompleted -= OnWheelDragCompleted;
+        }
+    }
+}
diff --git a/src/Beutl.Controls/PropertyEditors/GradingColorPickerFlyout.cs b/src/Beutl.Controls/PropertyEditors/GradingColorPickerFlyout.cs
new file mode 100644
index 000000000..e285bb807
--- /dev/null
+++ b/src/Beutl.Controls/PropertyEditors/GradingColorPickerFlyout.cs
@@ -0,0 +1,130 @@
+using System.ComponentModel;
+
+using Avalonia.Controls;
+using Avalonia.Input;
+
+using Beutl.Media;
+
+using FluentAvalonia.Core;
+using FluentAvalonia.UI.Controls.Primitives;
+
+#nullable enable
+
+namespace Beutl.Controls.PropertyEditors;
+
+public sealed class GradingColorPickerFlyout : PickerFlyoutBase
+{
+    private GradingColorPicker? _picker;
+    private bool _showButtons = true;
+
+    public GradingColorPicker ColorPicker => _picker ??= new GradingColorPicker();
+
+    public GradingColor Color
+    {
+        get => ColorPicker.Color;
+        set => ColorPicker.Color = value;
+    }
+
+    public event TypedEventHandler<GradingColorPickerFlyout, EventArgs>? Confirmed;
+
+    public event TypedEventHandler<GradingColorPickerFlyout, EventArgs>? Dismissed;
+
+    public event TypedEventHandler<GradingColorPickerFlyout, EventArgs>? CloseClicked;
+
+    public event TypedEventHandler<GradingColorPickerFlyout, (GradingColor OldValue, GradingColor NewValue)>? ColorChanged;
+
+    public event TypedEventHandler<GradingColorPickerFlyout, (GradingColor OldValue, GradingColor NewValue)>? ColorConfirmed;
+
+    protected override Control CreatePresenter()
+    {
+        var pfp = new SimpleColorPickerFlyoutPresenter()
+        {
+            Content = ColorPicker
+        };
+        pfp.Confirmed += OnFlyoutConfirmed;
+        pfp.Dismissed += OnFlyoutDismissed;
+        pfp.CloseClicked += OnFlyoutCloseClicked;
+        pfp.KeyDown += OnFlyoutKeyDown;
+
+        ColorPicker.ColorChanged += OnPickerColorChanged;
+        ColorPicker.ColorConfirmed += OnPickerColorConfirmed;
+
+        return pfp;
+    }
+
+    private void OnPickerColorChanged(GradingColorPicker sender, (GradingColor OldValue, GradingColor NewValue) args)
+    {
+        ColorChanged?.Invoke(this, args);
+    }
+
+    private void OnPickerColorConfirmed(GradingColorPicker sender, (GradingColor OldValue, GradingColor NewValue) args)
+    {
+        ColorConfirmed?.Invoke(this, args);
+    }
+
+    private void OnFlyoutKeyDown(object? sender, KeyEventArgs e)
+    {
+        if (e.Key is Key.Enter or Key.Escape)
+        {
+            if (_showButtons)
+            {
+                if (e.Key == Key.Enter)
+                {
+                    Confirmed?.Invoke(this, EventArgs.Empty);
+                }
+                else
+                {
+                    Dismissed?.Invoke(this, EventArgs.Empty);
+                }
+            }
+            else
+            {
+                CloseClicked?.Invoke(this, EventArgs.Empty);
+            }
+
+            Hide();
+        }
+    }
+
+    protected override void OnConfirmed()
+    {
+        Confirmed?.Invoke(this, EventArgs.Empty);
+        Hide();
+    }
+
+    protected override void OnOpening(CancelEventArgs args)
+    {
+        base.OnOpening(args);
+
+        if (Popup.Child is DraggablePickerFlyoutPresenter pfp)
+        {
+            pfp.ShowHideButtons = ShouldShowConfirmationButtons();
+        }
+
+        Popup.IsLightDismissEnabled = false;
+    }
+
+    protected override bool ShouldShowConfirmationButtons() => _showButtons;
+
+    private void OnFlyoutCloseClicked(DraggablePickerFlyoutPresenter sender, EventArgs args)
+    {
+        CloseClicked?.Invoke(this, EventArgs.Empty);
+        Hide();
+    }
+
+    private void OnFlyoutDismissed(DraggablePickerFlyoutPresenter sender, object args)
+    {
+        Dismissed?.Invoke(this, EventArgs.Empty);
+        Hide();
+    }
+
+    private void OnFlyoutConfirmed(DraggablePickerFlyoutPresenter sender, object args)
+    {
+        OnConfirmed();
+    }
+
+    internal void ShowHideButtons(bool show)
+    {
+        _showButtons = show;
+    }
+}
diff --git a/src/Beutl.Controls/PropertyEditors/GradingWheel.cs b/src/Beutl.Controls/PropertyEditors/GradingWheel.cs
new file mode 100644
index 000000000..f26c1aabe
--- /dev/null
+++ b/src/Beutl.Controls/PropertyEditors/GradingWheel.cs
@@ -0,0 +1,120 @@
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using Avalonia.Media;
+
+namespace Beutl.Controls.PropertyEditors;
+
+public class GradingWheel : Thumb
+{
+    public static readonly StyledProperty<double> TickOffsetProperty =
+        AvaloniaProperty.Register<GradingWheel, double>(nameof(TickOffset), 0.0);
+
+    private const int TickCount = 40;
+    private const double TickSpacing = 0.025;
+
+    private double _dragStartTickOffset;
+
+    static GradingWheel()
+    {
+        AffectsRender<GradingWheel>(TickOffsetProperty);
+    }
+
+    public double TickOffset
+    {
+        get => GetValue(TickOffsetProperty);
+        set => SetValue(TickOffsetProperty, value);
+    }
+
+    protected override void OnDragStarted(VectorEventArgs e)
+    {
+        base.OnDragStarted(e);
+        _dragStartTickOffset = TickOffset;
+    }
+
+    protected override void OnDragDelta(VectorEventArgs e)
+    {
+        base.OnDragDelta(e);
+
+        if (Bounds.Width == 0)
+            return;
+
+        double delta = e.Vector.X / Bounds.Width;
+        TickOffset = (_dragStartTickOffset + delta) % 1.0;
+        if (TickOffset < 0)
+            TickOffset += 1.0;
+    }
+
+    public override void Render(DrawingContext context)
+    {
+        base.Render(context);
+
+        var bounds = new Rect(Bounds.Size);
+        double cornerRadius = 4;
+
+        // Background
+        IBrush? backgroundBrush = Background ?? Brushes.Transparent;
+        using (context.PushClip(new RoundedRect(bounds, cornerRadius)))
+        {
+            context.DrawRectangle(backgroundBrush, null, bounds);
+
+            // Draw tick marks
+            DrawTickMarks(context, bounds);
+        }
+
+        // Border
+        IBrush? borderBrush = BorderBrush;
+        if (borderBrush != null)
+        {
+            double thickness = BorderThickness.Left;
+            if (thickness > 0)
+            {
+                Pen borderPen = new Pen(borderBrush, thickness);
+                context.DrawRectangle(null, borderPen, new RoundedRect(bounds.Deflate(thickness / 2), cornerRadius));
+            }
+        }
+    }
+
+    private void DrawTickMarks(DrawingContext context, Rect bounds)
+    {
+        double centerX = bounds.Width / 2;
+        double halfWidth = bounds.Width / 2;
+
+        IBrush tickBrush = Foreground ?? Brushes.White;
+        double tickWidth = 1.5;
+        double tickHeight = bounds.Height * 0.6;
+        double tickTop = (bounds.Height - tickHeight) / 2;
+
+        for (int i = 0; i < TickCount; i++)
+        {
+            double normalizedPos = (i - TickCount / 2) * TickSpacing + TickOffset;
+
+            // Wrap around
+            while (normalizedPos > 0.5) normalizedPos -= 1.0;
+            while (normalizedPos < -0.5) normalizedPos += 1.0;
+
+            double x = centerX + normalizedPos * bounds.Width;
+
+            // Skip if outside bounds
+            if (x < 0 || x > bounds.Width)
+                continue;
+
+            // Calculate opacity based on distance from center (1.0 at center, 0.0 at edges)
+            double distanceFromCenter = Math.Abs(x - centerX);
+            double opacity = 1.0 - (distanceFromCenter / halfWidth);
+            opacity = Math.Clamp(opacity, 0.0, 1.0);
+
+            // Apply easing for smoother fade
+            opacity = opacity * opacity;
+
+            if (opacity > 0.01)
+            {
+                using (context.PushOpacity(opacity))
+                {
+                    Rect tickRect = new Rect(x - tickWidth / 2, tickTop, tickWidth, tickHeight);
+                    context.DrawRectangle(tickBrush, null, tickRect, tickWidth / 2, tickWidth / 2);
+                }
+            }
+        }
+    }
+}
diff --git a/src/Beutl.Controls/Styles.axaml b/src/Beutl.Controls/Styles.axaml
index 1a3a77fc6..350d2fb3c 100644
--- a/src/Beutl.Controls/Styles.axaml
+++ b/src/Beutl.Controls/Styles.axaml
@@ -37,6 +37,11 @@
                 <ResourceInclude Source="/Styling/PropertyEditors/AlignmentXEditor.axaml" />
                 <ResourceInclude Source="/Styling/PropertyEditors/BooleanEditor.axaml" />
                 <ResourceInclude Source="/Styling/PropertyEditors/ColorEditor.axaml" />
+                <ResourceInclude Source="/Styling/PropertyEditors/GradingColorComponentsEditor.axaml" />
+                <ResourceInclude Source="/Styling/PropertyEditors/GradingColorEditor.axaml" />
+                <ResourceInclude Source="/Styling/PropertyEditors/GradingColorPicker.axaml" />
+                <ResourceInclude Source="/Styling/PropertyEditors/GradingWheel.axaml" />
+                <ResourceInclude Source="/Styling/PropertyEditors/ColorGradingWheel.axaml" />
                 <ResourceInclude Source="/Styling/PropertyEditors/CornerRadiusEditor.axaml" />
                 <ResourceInclude Source="/Styling/PropertyEditors/ThicknessEditor.axaml" />
                 <ResourceInclude Source="/Styling/PropertyEditors/EnumEditor.axaml" />
diff --git a/src/Beutl.Controls/Styling/PropertyEditors/ColorGradingWheel.axaml b/src/Beutl.Controls/Styling/PropertyEditors/ColorGradingWheel.axaml
new file mode 100644
index 000000000..595dc85f8
--- /dev/null
+++ b/src/Beutl.Controls/Styling/PropertyEditors/ColorGradingWheel.axaml
@@ -0,0 +1,72 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:lang="using:Beutl.Language"
+                    xmlns:local="using:Beutl.Controls.PropertyEditors">
+    <Design.PreviewWith>
+        <local:ColorGradingWheel Width="420" Height="360" />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type local:ColorGradingWheel}" TargetType="local:ColorGradingWheel">
+        <Setter Property="Focusable" Value="True" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThemeThickness}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Padding="{TemplateBinding Padding}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid RowDefinitions="Auto,*" RowSpacing="12">
+                        <Grid ColumnDefinitions="*,Auto,Auto">
+                            <TextBlock Grid.Column="0"
+                                       VerticalAlignment="Center"
+                                       FontWeight="SemiBold"
+                                       Text="{TemplateBinding Header}" />
+
+                            <StackPanel Name="LeftRightButtons"
+                                        Grid.Column="1"
+                                        Margin="0,0,4,0"
+                                        Orientation="Horizontal">
+                                <Button Name="PART_LeftButton"
+                                        Classes="left"
+                                        Theme="{StaticResource PropertyEditorLeftRightButton}" />
+
+                                <Button Name="PART_RightButton"
+                                        Classes="right"
+                                        Theme="{StaticResource PropertyEditorLeftRightButton}" />
+                            </StackPanel>
+
+                            <ContentPresenter Name="PART_MenuContentPresenter"
+                                              Grid.Column="2"
+                                              HorizontalAlignment="Right"
+                                              VerticalAlignment="Center"
+                                              Content="{TemplateBinding MenuContent}"
+                                              ContentTemplate="{TemplateBinding MenuContentTemplate}" />
+                        </Grid>
+
+                        <local:GradingColorPicker Name="PART_GradingColorPicker"
+                                                  Grid.Row="1"
+                                                  MinWidth="1"
+                                                  Classes="wheel"
+                                                  InputType="{TemplateBinding InputType}"
+                                                  ShowDetails="{TemplateBinding ShowDetails}"
+                                                  Color="{Binding Color, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:not(:visible-left-button) /template/ Button#PART_LeftButton">
+            <Setter Property="IsEnabled" Value="False" />
+        </Style>
+        <Style Selector="^:not(:visible-right-button) /template/ Button#PART_RightButton">
+            <Setter Property="IsEnabled" Value="False" />
+        </Style>
+        <Style Selector="^[KeyFrameCount=0]">
+            <Style Selector="^ /template/ StackPanel#LeftRightButtons">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Beutl.Controls/Styling/PropertyEditors/GradingColorComponentsEditor.axaml b/src/Beutl.Controls/Styling/PropertyEditors/GradingColorComponentsEditor.axaml
new file mode 100644
index 000000000..a7afc087d
--- /dev/null
+++ b/src/Beutl.Controls/Styling/PropertyEditors/GradingColorComponentsEditor.axaml
@@ -0,0 +1,90 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:Beutl.Controls"
+                    xmlns:icons="using:FluentIcons.FluentAvalonia"
+                    xmlns:local="using:Beutl.Controls.PropertyEditors"
+                    xmlns:ui="using:FluentAvalonia.UI.Controls">
+    <Design.PreviewWith>
+        <Border Width="200">
+            <StackPanel>
+                <local:GradingColorComponentsEditor FirstText="0.5"
+                                                    SecondText="-0.2"
+                                                    ThirdText="1.0" />
+            </StackPanel>
+        </Border>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="GradingColorComponentsEditorStyle" TargetType="local:Vector3Editor">
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <DataValidationErrors Grid.Row="2">
+                    <Grid ColumnDefinitions="*,1,*,1,*">
+                        <Border Name="PART_BackgroundBorder"
+                                Grid.ColumnSpan="5"
+                                Background="{DynamicResource TextControlBackground}"
+                                BorderBrush="{DynamicResource TextControlBorderBrush}"
+                                BorderThickness="{DynamicResource TextControlBorderThemeThickness}"
+                                CornerRadius="{DynamicResource ControlCornerRadius}" />
+
+                        <TextBox x:Name="PART_InnerFirstTextBox"
+                                 Grid.Column="0"
+                                 controls:TextBoxAttachment.EnterDownBehavior="LostFocus"
+                                 IsEnabled="{TemplateBinding IsReadOnly,
+                                                             Converter={x:Static BoolConverters.Not}}"
+                                 Text="{TemplateBinding FirstText,
+                                                        Mode=TwoWay}"
+                                 Theme="{StaticResource VectorElementTextBox}"
+                                 ToolTip.Tip="{Binding FirstHeader, RelativeSource={RelativeSource AncestorType={x:Type local:Vector3Editor}}}" />
+
+                        <Separator Grid.Column="1" Theme="{StaticResource VectorComponentSeparator}" />
+
+                        <TextBox x:Name="PART_InnerSecondTextBox"
+                                 Grid.Column="2"
+                                 controls:TextBoxAttachment.EnterDownBehavior="LostFocus"
+                                 IsEnabled="{TemplateBinding IsReadOnly,
+                                                             Converter={x:Static BoolConverters.Not}}"
+                                 Text="{TemplateBinding SecondText,
+                                                        Mode=TwoWay}"
+                                 Theme="{StaticResource VectorElementTextBox}"
+                                 ToolTip.Tip="{Binding SecondHeader, RelativeSource={RelativeSource AncestorType={x:Type local:Vector3Editor}}}" />
+
+                        <Separator Grid.Column="3" Theme="{StaticResource VectorComponentSeparator}" />
+
+                        <TextBox x:Name="PART_InnerThirdTextBox"
+                                 Grid.Column="4"
+                                 controls:TextBoxAttachment.EnterDownBehavior="LostFocus"
+                                 IsEnabled="{TemplateBinding IsReadOnly,
+                                                             Converter={x:Static BoolConverters.Not}}"
+                                 Text="{TemplateBinding ThirdText,
+                                                        Mode=TwoWay}"
+                                 Theme="{StaticResource VectorElementTextBox}"
+                                 ToolTip.Tip="{Binding ThirdHeader, RelativeSource={RelativeSource AncestorType={x:Type local:Vector3Editor}}}" />
+                    </Grid>
+                </DataValidationErrors>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:border-pointerover /template/ Border#PART_BackgroundBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushPointerOver}" />
+            <Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
+        </Style>
+
+        <Style Selector="^[IsReadOnly=True] /template/ Border#PART_BackgroundBorder">
+            <Setter Property="Background" Value="{DynamicResource TextControlBackgroundDisabled}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
+        </Style>
+
+        <Style Selector="^:focus-any-textbox /template/ Border#PART_BackgroundBorder">
+            <Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushFocused}" />
+            <Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThicknessFocused}" />
+        </Style>
+
+        <Style Selector="^:error /template/ Border#PART_BackgroundBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource SystemFillColorCriticalBrush}" />
+        </Style>
+
+    </ControlTheme>
+
+</ResourceDictionary>
diff --git a/src/Beutl.Controls/Styling/PropertyEditors/GradingColorEditor.axaml b/src/Beutl.Controls/Styling/PropertyEditors/GradingColorEditor.axaml
new file mode 100644
index 000000000..84e7a8cb9
--- /dev/null
+++ b/src/Beutl.Controls/Styling/PropertyEditors/GradingColorEditor.axaml
@@ -0,0 +1,189 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:icons="clr-namespace:FluentIcons.FluentAvalonia;assembly=FluentIcons.FluentAvalonia"
+                    xmlns:local="using:Beutl.Controls.PropertyEditors"
+                    xmlns:ui="using:FluentAvalonia.UI.Controls">
+    <Design.PreviewWith>
+        <Border Width="300">
+            <StackPanel>
+                <local:GradingColorEditor EditorStyle="Settings" Header="Property 1" />
+                <local:GradingColorEditor Header="Property 1" KeyFrameCount="3" />
+            </StackPanel>
+        </Border>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type local:GradingColorEditor}" TargetType="local:GradingColorEditor">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Padding="{TemplateBinding Padding}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid ColumnDefinitions="2*,3*,Auto,Auto">
+                        <TextBlock Name="PART_HeaderTextBlock"
+                                   Margin="4,0,0,0"
+                                   HorizontalAlignment="Left"
+                                   VerticalAlignment="Center"
+                                   ClipToBounds="False"
+                                   Text="{TemplateBinding Header}"
+                                   TextTrimming="CharacterEllipsis" />
+
+                        <Button Name="PART_ColorPickerButton"
+                                Grid.Column="1"
+                                Margin="4,2"
+                                Padding="0"
+                                HorizontalAlignment="Right"
+                                HorizontalContentAlignment="Stretch"
+                                CornerRadius="{DynamicResource ControlCornerRadius}"
+                                IsEnabled="{TemplateBinding IsReadOnly, Converter={x:Static BoolConverters.Not}}">
+                            <Grid ColumnDefinitions="*,Auto">
+                                <Border MinWidth="23"
+                                        MinHeight="23"
+                                        Margin="8,6,4,6"
+                                        HorizontalAlignment="Left"
+                                        VerticalAlignment="Center"
+                                        Background="{Binding Value, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GradingColorBrushConv}}"
+                                        BorderBrush="{DynamicResource ColorPickerButtonOutline}"
+                                        BorderThickness="1"
+                                        CornerRadius="{DynamicResource ControlCornerRadius}" />
+
+                                <ui:SymbolIcon Grid.Column="1"
+                                               Margin="4,6,8,6"
+                                               HorizontalAlignment="Right"
+                                               FontSize="18"
+                                               Symbol="ChevronDown" />
+                            </Grid>
+                        </Button>
+
+                        <StackPanel Name="LeftRightButtons"
+                                    Grid.Column="2"
+                                    Margin="0,0,4,0"
+                                    Orientation="Horizontal">
+                            <Button Name="PART_LeftButton"
+                                    Classes="left"
+                                    Theme="{StaticResource PropertyEditorLeftRightButton}" />
+
+                            <Button Name="PART_RightButton"
+                                    Classes="right"
+                                    Theme="{StaticResource PropertyEditorLeftRightButton}" />
+                        </StackPanel>
+
+                        <ContentPresenter Name="PART_MenuContentPresenter"
+                                          Grid.Column="3"
+                                          Content="{TemplateBinding MenuContent}"
+                                          ContentTemplate="{TemplateBinding MenuContentTemplate}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:list-item">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Border Padding="{TemplateBinding Padding}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid ColumnDefinitions="Auto,*,Auto">
+                            <Border Name="PART_ReorderHandle" Theme="{StaticResource PropertyEditorReorderHandle}" />
+
+                            <Button Name="PART_ColorPickerButton"
+                                    Grid.Column="1"
+                                    Margin="4,2"
+                                    Padding="0"
+                                    HorizontalAlignment="Right"
+                                    HorizontalContentAlignment="Stretch"
+                                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                                    IsEnabled="{TemplateBinding IsReadOnly, Converter={x:Static BoolConverters.Not}}">
+                                <Grid ColumnDefinitions="*,Auto">
+                                    <Border MinWidth="23"
+                                            MinHeight="23"
+                                            Margin="8,6,4,6"
+                                            HorizontalAlignment="Left"
+                                            VerticalAlignment="Center"
+                                            Background="{Binding Value, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GradingColorBrushConv}}"
+                                            BorderBrush="{DynamicResource ColorPickerButtonOutline}"
+                                            BorderThickness="1"
+                                            CornerRadius="{DynamicResource ControlCornerRadius}" />
+
+                                    <ui:SymbolIcon Grid.Column="1"
+                                                   Margin="4,6,8,6"
+                                                   HorizontalAlignment="Right"
+                                                   FontSize="18"
+                                                   Symbol="ChevronDown" />
+                                </Grid>
+                            </Button>
+
+                            <Button Name="PART_DeleteButton"
+                                    Grid.Column="2"
+                                    Margin="4,0"
+                                    Padding="0"
+                                    Classes="size-24x24"
+                                    Theme="{StaticResource TransparentButton}">
+                                <icons:SymbolIcon Symbol="Delete" />
+                            </Button>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:settings">
+            <Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
+            <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThemeThickness}" />
+            <Setter Property="Padding" Value="12" />
+            <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
+            <Setter Property="Margin" Value="0" />
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <OptionsDisplayItem Padding="{TemplateBinding Padding}"
+                                        BorderBrush="{TemplateBinding BorderBrush}"
+                                        BorderThickness="{TemplateBinding BorderThickness}"
+                                        Clickable="False"
+                                        CornerRadius="{TemplateBinding CornerRadius}"
+                                        Description="{TemplateBinding Description}"
+                                        Header="{TemplateBinding Header}">
+                        <OptionsDisplayItem.ActionButton>
+                            <Button Name="PART_ColorPickerButton"
+                                    Padding="0"
+                                    HorizontalAlignment="Right"
+                                    HorizontalContentAlignment="Stretch"
+                                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                                    IsEnabled="{TemplateBinding IsReadOnly, Converter={x:Static BoolConverters.Not}}">
+                                <Grid ColumnDefinitions="*,Auto">
+                                    <Border MinWidth="23"
+                                            MinHeight="23"
+                                            Margin="8,6,4,6"
+                                            HorizontalAlignment="Left"
+                                            VerticalAlignment="Center"
+                                            Background="{Binding Value, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GradingColorBrushConv}}"
+                                            BorderBrush="{DynamicResource ColorPickerButtonOutline}"
+                                            BorderThickness="1"
+                                            CornerRadius="{DynamicResource ControlCornerRadius}" />
+
+                                    <ui:SymbolIcon Grid.Column="1"
+                                                   Margin="4,6,8,6"
+                                                   HorizontalAlignment="Right"
+                                                   FontSize="18"
+                                                   Symbol="ChevronDown" />
+                                </Grid>
+                            </Button>
+                        </OptionsDisplayItem.ActionButton>
+                    </OptionsDisplayItem>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:not(:visible-left-button) /template/ Button#PART_LeftButton">
+            <Setter Property="IsEnabled" Value="False" />
+        </Style>
+        <Style Selector="^:not(:visible-right-button) /template/ Button#PART_RightButton">
+            <Setter Property="IsEnabled" Value="False" />
+        </Style>
+        <Style Selector="^[KeyFrameCount=0]">
+            <Style Selector="^ /template/ StackPanel#LeftRightButtons">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Beutl.Controls/Styling/PropertyEditors/GradingColorPicker.axaml b/src/Beutl.Controls/Styling/PropertyEditors/GradingColorPicker.axaml
new file mode 100644
index 000000000..34d25002b
--- /dev/null
+++ b/src/Beutl.Controls/Styling/PropertyEditors/GradingColorPicker.axaml
@@ -0,0 +1,173 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:lang="using:Beutl.Language"
+                    xmlns:local="using:Beutl.Controls.PropertyEditors"
+                    xmlns:ui="using:FluentAvalonia.UI.Controls">
+    <Design.PreviewWith>
+        <local:GradingColorPicker Width="220"
+                                  Height="500"
+                                  InputType="Rgb" />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type local:GradingColorPicker}" TargetType="local:GradingColorPicker">
+        <Setter Property="MinWidth" Value="240" />
+        <Setter Property="Focusable" Value="True" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Panel>
+                    <Grid Name="Root" RowDefinitions="*,Auto,Auto,Auto">
+                        <Border Name="SpectrumBorder"
+                                Width="{Binding #Root.Bounds.Width, Priority=Template}"
+                                Height="{Binding #Root.Bounds.Width, Priority=Template}">
+                            <ColorSpectrum Name="RingSpectrum"
+                                           HorizontalAlignment="Stretch"
+                                           VerticalAlignment="Stretch"
+                                           BorderBrush="{DynamicResource ColorRampBorderBrush}"
+                                           BorderThickness="1"
+                                           Components="HueSaturation"
+                                           Shape="Ring" />
+                        </Border>
+
+                        <ColorPreviewer Name="Previewer"
+                                        Grid.Row="1"
+                                        Margin="6,0"
+                                        IsVisible="False" />
+
+                        <StackPanel Grid.Row="2"
+                                    Margin="6,8"
+                                    Spacing="8">
+
+                            <ColorSlider Name="HueSlider"
+                                         ColorComponent="Component1"
+                                         ColorModel="Hsva"
+                                         IsVisible="False" />
+
+                            <ColorSlider Name="SaturationSlider"
+                                         ColorComponent="Component2"
+                                         ColorModel="Hsva"
+                                         IsVisible="False" />
+
+                            <!--  RGBの時のRed  -->
+                            <local:GradingWheel Name="FirstComponentWheel"
+                                                Background="Red"
+                                                IsVisible="False" />
+                            <!--  RGBの時のBlue  -->
+                            <local:GradingWheel Name="SecondComponentWheel"
+                                                Background="Green"
+                                                IsVisible="False" />
+                            <!--  HSVの時のValue, RGBの時のBlueを表すスライダー  -->
+                            <local:GradingWheel Name="ThirdComponentWheel" />
+                            <!--  RGBの時の全体  -->
+                            <local:GradingWheel Name="FourthComponentWheel" IsVisible="False" />
+
+                        </StackPanel>
+
+                        <Grid Grid.Row="3"
+                              Margin="6,0,6,8"
+                              ColumnDefinitions="*,4,Auto"
+                              RowDefinitions="Auto,6,Auto">
+                            <ComboBox Name="ColorType"
+                                      Grid.ColumnSpan="2"
+                                      Padding="6,5,0,5"
+                                      SelectedIndex="0"
+                                      Theme="{StaticResource LiteComboBoxStyle}">
+                                <ComboBoxItem Content="RGB" />
+                                <ComboBoxItem Content="HSV" />
+                            </ComboBox>
+
+                            <StackPanel Name="ButtonsLayout"
+                                        Grid.Column="0"
+                                        Grid.ColumnSpan="3"
+                                        HorizontalAlignment="Right"
+                                        Orientation="Horizontal"
+                                        Spacing="4">
+                                <ToggleButton Name="ToggleDetailsButton" ToolTip.Tip="{x:Static lang:Strings.ShowSliders}">
+                                    <ui:FontIcon Glyph="&#xE9E9;" />
+                                </ToggleButton>
+                            </StackPanel>
+
+                            <local:GradingColorComponentsEditor Name="ColorComponentsBox"
+                                                                Grid.Row="2"
+                                                                Grid.ColumnSpan="3"
+                                                                HorizontalAlignment="Stretch"
+                                                                Theme="{StaticResource GradingColorComponentsEditorStyle}" />
+                        </Grid>
+                    </Grid>
+
+                    <Border Name="Smoke"
+                            Background="{DynamicResource ContentDialogSmokeFill}"
+                            IsVisible="False" />
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ StackPanel#ButtonsLayout &gt; ToggleButton">
+            <Setter Property="Width" Value="32" />
+            <Setter Property="Height" Value="32" />
+            <Setter Property="Padding" Value="0" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="HorizontalContentAlignment" Value="Center" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Theme" Value="{StaticResource TransparentToggleButton}" />
+
+            <Style Selector="^ &gt; ui|FontIcon">
+                <Setter Property="FontFamily" Value="{DynamicResource SymbolThemeFontFamily}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^ /template/ ColorSlider">
+            <Setter Property="Height" Value="{DynamicResource ColorPickerColorRampSize}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ColorRampBorderBrush}" />
+            <Setter Property="BorderThickness" Value="{DynamicResource ColorRampBorderThickness}" />
+            <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+            <Setter Property="Orientation" Value="Horizontal" />
+        </Style>
+
+        <Style Selector="^:details">
+            <Style Selector="^ /template/ ColorPreviewer#Previewer">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+            <Style Selector="^ /template/ ColorSpectrum#RingSpectrum">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+
+            <Style Selector="^[InputType=Rgb]">
+                <Style Selector="^ /template/ ColorSlider#HueSlider, ^ /template/ ColorSlider#SaturationSlider">
+                    <Setter Property="IsVisible" Value="False" />
+                </Style>
+                <Style Selector="^ /template/ local|GradingWheel#FirstComponentWheel, ^ /template/ local|GradingWheel#SecondComponentWheel, ^ /template/ local|GradingWheel#FourthComponentWheel">
+                    <Setter Property="IsVisible" Value="True" />
+                </Style>
+                <Style Selector="^ /template/ local|GradingWheel#ThirdComponentWheel">
+                    <Setter Property="Background" Value="Blue" />
+                </Style>
+            </Style>
+
+            <Style Selector="^[InputType=Hsv]">
+                <Style Selector="^ /template/ ColorSlider#HueSlider, ^ /template/ ColorSlider#SaturationSlider">
+                    <Setter Property="IsVisible" Value="True" />
+                </Style>
+                <Style Selector="^ /template/ local|GradingWheel#FirstComponentWheel, ^ /template/ local|GradingWheel#SecondComponentWheel, ^ /template/ local|GradingWheel#FourthComponentWheel">
+                    <Setter Property="IsVisible" Value="False" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:disabled /template/ Border#Smoke">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^.wheel">
+            <Style Selector="^ /template/ ComboBox#ColorType, ^ /template/ StackPanel#ButtonsLayout">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Border#SpectrumBorder">
+                <Setter Property="Padding" Value="16" />
+                <Setter Property="Width" Value="NaN" />
+                <Setter Property="Height" Value="NaN" />
+            </Style>
+        </Style>
+
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Beutl.Controls/Styling/PropertyEditors/GradingWheel.axaml b/src/Beutl.Controls/Styling/PropertyEditors/GradingWheel.axaml
new file mode 100644
index 000000000..7c8ff792c
--- /dev/null
+++ b/src/Beutl.Controls/Styling/PropertyEditors/GradingWheel.axaml
@@ -0,0 +1,19 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="using:Beutl.Controls.PropertyEditors">
+    <Design.PreviewWith>
+        <Border Padding="20" Background="#FF1E1E1E">
+            <local:GradingWheel Width="200" Height="24" />
+        </Border>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type local:GradingWheel}" TargetType="local:GradingWheel">
+        <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
+        <Setter Property="Cursor" Value="SizeWestEast" />
+        <Setter Property="Height" Value="24" />
+        <Setter Property="MinWidth" Value="60" />
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Beutl.Controls/Styling/PropertyEditors/PropertyEditorResources.axaml b/src/Beutl.Controls/Styling/PropertyEditors/PropertyEditorResources.axaml
index 1d616dd28..3e3eb4c31 100644
--- a/src/Beutl.Controls/Styling/PropertyEditors/PropertyEditorResources.axaml
+++ b/src/Beutl.Controls/Styling/PropertyEditors/PropertyEditorResources.axaml
@@ -4,7 +4,10 @@
                     xmlns:icons="using:FluentIcons.FluentAvalonia"
                     xmlns:intv="using:Avalonia.Xaml.Interactivity"
                     xmlns:local="using:Beutl.Controls.Styling.PropertyEditors"
+                    xmlns:pe="using:Beutl.Controls.PropertyEditors"
                     xmlns:ui="using:FluentAvalonia.UI.Controls">
+
+    <pe:GradingColorBrushConverter x:Key="GradingColorBrushConv" />
     <Design.PreviewWith>
         <Border Width="300">
             <ToggleButton Margin="8,4"
diff --git a/src/Beutl.Engine/Animation/AnimatorRegistry.cs b/src/Beutl.Engine/Animation/AnimatorRegistry.cs
index 86e7cf5b5..ba55a5012 100644
--- a/src/Beutl.Engine/Animation/AnimatorRegistry.cs
+++ b/src/Beutl.Engine/Animation/AnimatorRegistry.cs
@@ -14,6 +14,7 @@ public static class AnimatorRegistry
         (type => typeof(byte).IsAssignableFrom(type), typeof(ByteAnimator)),
         (type => typeof(Color).IsAssignableFrom(type), typeof(ColorAnimator)),
         (type => typeof(CornerRadius).IsAssignableFrom(type), typeof(CornerRadiusAnimator)),
+        (type => typeof(GradingColor).IsAssignableFrom(type), typeof(GradingColorAnimator)),
         (type => typeof(decimal).IsAssignableFrom(type), typeof(DecimalAnimator)),
         (type => typeof(double).IsAssignableFrom(type), typeof(DoubleAnimator)),
         (type => typeof(float).IsAssignableFrom(type), typeof(FloatAnimator)),
diff --git a/src/Beutl.Engine/Animation/Animators/GradingColorAnimator.cs b/src/Beutl.Engine/Animation/Animators/GradingColorAnimator.cs
new file mode 100644
index 000000000..42d94dce6
--- /dev/null
+++ b/src/Beutl.Engine/Animation/Animators/GradingColorAnimator.cs
@@ -0,0 +1,11 @@
+using Beutl.Media;
+
+namespace Beutl.Animation.Animators;
+
+public sealed class GradingColorAnimator : Animator<GradingColor>
+{
+    public override GradingColor Interpolate(float progress, GradingColor oldValue, GradingColor newValue)
+    {
+        return ((newValue - oldValue) * progress) + oldValue;
+    }
+}
diff --git a/src/Beutl.Engine/Converters/CurveControlPointJsonConverter.cs b/src/Beutl.Engine/Converters/CurveControlPointJsonConverter.cs
new file mode 100644
index 000000000..ae00dbc69
--- /dev/null
+++ b/src/Beutl.Engine/Converters/CurveControlPointJsonConverter.cs
@@ -0,0 +1,95 @@
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+using Beutl.Graphics;
+
+namespace Beutl.Converters;
+
+internal sealed class CurveControlPointJsonConverter : JsonConverter<CurveControlPoint>
+{
+    public override CurveControlPoint Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+    {
+        if (reader.TokenType == JsonTokenType.String)
+        {
+            // Simple format: "x,y" - no handles
+            string? pointString = reader.GetString();
+            if (pointString != null)
+            {
+                Point point = Point.Parse(pointString);
+                return new CurveControlPoint(point);
+            }
+        }
+        else if (reader.TokenType == JsonTokenType.StartObject)
+        {
+            // Complex format with handles
+            Point point = default;
+            Point leftHandle = default;
+            Point rightHandle = default;
+
+            while (reader.Read())
+            {
+                if (reader.TokenType == JsonTokenType.EndObject)
+                    break;
+
+                if (reader.TokenType == JsonTokenType.PropertyName)
+                {
+                    string propertyName = reader.GetString()!;
+                    reader.Read();
+
+                    switch (propertyName)
+                    {
+                        case "point":
+                        case "Point":
+                            if (reader.TokenType == JsonTokenType.String)
+                            {
+                                string? value = reader.GetString();
+                                if (value != null)
+                                    point = Point.Parse(value);
+                            }
+                            break;
+                        case "leftHandle":
+                        case "LeftHandle":
+                            if (reader.TokenType == JsonTokenType.String)
+                            {
+                                string? value = reader.GetString();
+                                if (value != null)
+                                    leftHandle = Point.Parse(value);
+                            }
+                            break;
+                        case "rightHandle":
+                        case "RightHandle":
+                            if (reader.TokenType == JsonTokenType.String)
+                            {
+                                string? value = reader.GetString();
+                                if (value != null)
+                                    rightHandle = Point.Parse(value);
+                            }
+                            break;
+                    }
+                }
+            }
+
+            return new CurveControlPoint(point, leftHandle, rightHandle);
+        }
+
+        throw new JsonException("Invalid CurveControlPoint format.");
+    }
+
+    public override void Write(Utf8JsonWriter writer, CurveControlPoint value, JsonSerializerOptions options)
+    {
+        if (value.HasHandles)
+        {
+            // Write as object with handles
+            writer.WriteStartObject();
+            writer.WriteString("Point", value.Point.ToString());
+            writer.WriteString("LeftHandle", value.LeftHandle.ToString());
+            writer.WriteString("RightHandle", value.RightHandle.ToString());
+            writer.WriteEndObject();
+        }
+        else
+        {
+            // Simple format: just the point
+            writer.WriteStringValue(value.Point.ToString());
+        }
+    }
+}
diff --git a/src/Beutl.Engine/Converters/CurveMapJsonConverter.cs b/src/Beutl.Engine/Converters/CurveMapJsonConverter.cs
new file mode 100644
index 000000000..03a3109d1
--- /dev/null
+++ b/src/Beutl.Engine/Converters/CurveMapJsonConverter.cs
@@ -0,0 +1,40 @@
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+using Beutl.Graphics;
+
+namespace Beutl.Converters;
+
+internal sealed class CurveMapJsonConverter : JsonConverter<CurveMap>
+{
+    private static readonly CurveControlPointJsonConverter s_pointConverter = new();
+
+    public override CurveMap Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+    {
+        if (reader.TokenType != JsonTokenType.StartArray)
+            throw new JsonException("Invalid CurveMap.");
+
+        var points = new List<CurveControlPoint>();
+
+        while (reader.Read())
+        {
+            if (reader.TokenType == JsonTokenType.EndArray)
+                break;
+
+            CurveControlPoint point = s_pointConverter.Read(ref reader, typeof(CurveControlPoint), options);
+            points.Add(point);
+        }
+
+        return new CurveMap(points);
+    }
+
+    public override void Write(Utf8JsonWriter writer, CurveMap value, JsonSerializerOptions options)
+    {
+        writer.WriteStartArray();
+        foreach (CurveControlPoint point in value.Points)
+        {
+            s_pointConverter.Write(writer, point, options);
+        }
+        writer.WriteEndArray();
+    }
+}
diff --git a/src/Beutl.Engine/Converters/GradingColorConverter.cs b/src/Beutl.Engine/Converters/GradingColorConverter.cs
new file mode 100644
index 000000000..885fd0147
--- /dev/null
+++ b/src/Beutl.Engine/Converters/GradingColorConverter.cs
@@ -0,0 +1,80 @@
+using System.ComponentModel;
+using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
+using System.Numerics;
+
+using Beutl.Media;
+
+namespace Beutl.Converters;
+
+public sealed class GradingColorConverter : TypeConverter
+{
+    public override bool CanConvertTo(ITypeDescriptorContext? context, [NotNullWhen(true)] Type? destinationType)
+    {
+        return destinationType == typeof(float[])
+            || destinationType == typeof(Tuple<float, float, float>)
+            || destinationType == typeof(Vector3)
+            || destinationType == typeof(Color)
+            || base.CanConvertTo(context, destinationType);
+    }
+
+    public override object? ConvertTo(ITypeDescriptorContext? context, CultureInfo? culture, object? value, Type destinationType)
+    {
+        if (value is GradingColor color)
+        {
+            if (destinationType == typeof(float[]))
+            {
+                return new float[] { color.R, color.G, color.B };
+            }
+            else if (destinationType == typeof(Tuple<float, float, float>))
+            {
+                return new Tuple<float, float, float>(color.R, color.G, color.B);
+            }
+            else if (destinationType == typeof(Vector3))
+            {
+                return color.ToVector3();
+            }
+            else if (destinationType == typeof(Color))
+            {
+                return color.ToColor();
+            }
+        }
+
+        return base.ConvertTo(context, culture, value, destinationType);
+    }
+
+    public override bool CanConvertFrom(ITypeDescriptorContext? context, Type sourceType)
+    {
+        return sourceType == typeof(float[])
+            || sourceType == typeof(Tuple<float, float, float>)
+            || sourceType == typeof(Vector3)
+            || sourceType == typeof(Color)
+            || sourceType == typeof(string);
+    }
+
+    public override object? ConvertFrom(ITypeDescriptorContext? context, CultureInfo? culture, object value)
+    {
+        if (value is float[] { Length: >= 3 } array)
+        {
+            return new GradingColor(array[0], array[1], array[2]);
+        }
+        else if (value is Tuple<float, float, float> tuple)
+        {
+            return new GradingColor(tuple.Item1, tuple.Item2, tuple.Item3);
+        }
+        else if (value is Vector3 vector)
+        {
+            return GradingColor.FromVector3(vector);
+        }
+        else if (value is Color color)
+        {
+            return GradingColor.FromColor(color);
+        }
+        else if (value is string str)
+        {
+            return GradingColor.Parse(str);
+        }
+
+        return base.ConvertFrom(context, culture, value);
+    }
+}
diff --git a/src/Beutl.Engine/Converters/GradingColorJsonConverter.cs b/src/Beutl.Engine/Converters/GradingColorJsonConverter.cs
new file mode 100644
index 000000000..accac9aad
--- /dev/null
+++ b/src/Beutl.Engine/Converters/GradingColorJsonConverter.cs
@@ -0,0 +1,20 @@
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+using Beutl.Media;
+
+namespace Beutl.Converters;
+
+internal sealed class GradingColorJsonConverter : JsonConverter<GradingColor>
+{
+    public override GradingColor Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+    {
+        string s = reader.GetString() ?? throw new Exception("Invalid GradingColor.");
+        return GradingColor.Parse(s);
+    }
+
+    public override void Write(Utf8JsonWriter writer, GradingColor value, JsonSerializerOptions options)
+    {
+        writer.WriteStringValue(value.ToString());
+    }
+}
diff --git a/src/Beutl.Engine/Graphics/CurveControlPoint.cs b/src/Beutl.Engine/Graphics/CurveControlPoint.cs
new file mode 100644
index 000000000..cd3037334
--- /dev/null
+++ b/src/Beutl.Engine/Graphics/CurveControlPoint.cs
@@ -0,0 +1,119 @@
+using System.Text.Json.Serialization;
+using Beutl.Converters;
+
+namespace Beutl.Graphics;
+
+/// <summary>
+/// Represents a control point on a curve with Bezier handles.
+/// </summary>
+[JsonConverter(typeof(CurveControlPointJsonConverter))]
+public readonly struct CurveControlPoint : IEquatable<CurveControlPoint>
+{
+    /// <summary>
+    /// Initializes a new instance with only the main point (no handles).
+    /// </summary>
+    public CurveControlPoint(float x, float y)
+        : this(new Point(x, y), default, default)
+    {
+    }
+
+    /// <summary>
+    /// Initializes a new instance with only the main point (no handles).
+    /// </summary>
+    public CurveControlPoint(Point point)
+        : this(point, default, default)
+    {
+    }
+
+    /// <summary>
+    /// Initializes a new instance with the main point and Bezier handles.
+    /// </summary>
+    public CurveControlPoint(Point point, Point leftHandle, Point rightHandle)
+    {
+        Point = point;
+        LeftHandle = leftHandle;
+        RightHandle = rightHandle;
+    }
+
+    /// <summary>
+    /// Gets the main control point position (normalized 0-1 range).
+    /// </summary>
+    public Point Point { get; }
+
+    /// <summary>
+    /// Gets the left handle offset from the main point (for incoming tangent).
+    /// This is added to Point to get the absolute position of the left handle.
+    /// </summary>
+    public Point LeftHandle { get; }
+
+    /// <summary>
+    /// Gets the right handle offset from the main point (for outgoing tangent).
+    /// This is added to Point to get the absolute position of the right handle.
+    /// </summary>
+    public Point RightHandle { get; }
+
+    /// <summary>
+    /// Gets the absolute position of the left handle.
+    /// </summary>
+    public Point AbsoluteLeftHandle => new(Point.X + LeftHandle.X, Point.Y + LeftHandle.Y);
+
+    /// <summary>
+    /// Gets the absolute position of the right handle.
+    /// </summary>
+    public Point AbsoluteRightHandle => new(Point.X + RightHandle.X, Point.Y + RightHandle.Y);
+
+    /// <summary>
+    /// Gets a value indicating whether this control point has non-zero handles.
+    /// </summary>
+    public bool HasHandles => LeftHandle != default || RightHandle != default;
+
+    /// <summary>
+    /// Creates a new control point with the specified main point position.
+    /// </summary>
+    public CurveControlPoint WithPoint(Point point) => new(point, LeftHandle, RightHandle);
+
+    /// <summary>
+    /// Creates a new control point with the specified left handle.
+    /// </summary>
+    public CurveControlPoint WithLeftHandle(Point leftHandle) => new(Point, leftHandle, RightHandle);
+
+    /// <summary>
+    /// Creates a new control point with the specified right handle.
+    /// </summary>
+    public CurveControlPoint WithRightHandle(Point rightHandle) => new(Point, LeftHandle, rightHandle);
+
+    /// <summary>
+    /// Creates a new control point with symmetric handles (left = -right).
+    /// </summary>
+    public CurveControlPoint WithSymmetricHandles(Point rightHandle)
+        => new(Point, new Point(-rightHandle.X, -rightHandle.Y), rightHandle);
+
+    public bool Equals(CurveControlPoint other)
+    {
+        return Point == other.Point && LeftHandle == other.LeftHandle && RightHandle == other.RightHandle;
+    }
+
+    public override bool Equals(object? obj)
+    {
+        return obj is CurveControlPoint other && Equals(other);
+    }
+
+    public override int GetHashCode()
+    {
+        return HashCode.Combine(Point, LeftHandle, RightHandle);
+    }
+
+    public static bool operator ==(CurveControlPoint left, CurveControlPoint right) => left.Equals(right);
+
+    public static bool operator !=(CurveControlPoint left, CurveControlPoint right) => !left.Equals(right);
+
+    public override string ToString()
+    {
+        if (HasHandles)
+        {
+            return $"({Point.X},{Point.Y})[L({LeftHandle.X},{LeftHandle.Y}),R({RightHandle.X},{RightHandle.Y})]";
+        }
+
+        return $"({Point.X},{Point.Y})";
+    }
+}
diff --git a/src/Beutl.Engine/Graphics/CurveMap.cs b/src/Beutl.Engine/Graphics/CurveMap.cs
new file mode 100644
index 000000000..e8664945f
--- /dev/null
+++ b/src/Beutl.Engine/Graphics/CurveMap.cs
@@ -0,0 +1,171 @@
+using System.Collections.Immutable;
+using System.Text.Json.Serialization;
+
+using Beutl.Converters;
+
+using SkiaSharp;
+
+namespace Beutl.Graphics;
+
+[JsonConverter(typeof(CurveMapJsonConverter))]
+public sealed class CurveMap : IEquatable<CurveMap>
+{
+    public static readonly CurveMap Default = new([new(0, 0), new(1, 1)]);
+
+    public CurveMap(IEnumerable<CurveControlPoint> points)
+    {
+        Points = Normalize(points);
+    }
+
+    public ImmutableArray<CurveControlPoint> Points { get; }
+
+    public CurveMap WithPoints(IEnumerable<CurveControlPoint> points)
+    {
+        return new CurveMap(points);
+    }
+
+    public float Evaluate(float t)
+    {
+        if (Points.Length == 0)
+            return t;
+
+        if (t <= 0)
+            return Points[0].Point.Y;
+
+        if (t >= 1)
+            return Points[^1].Point.Y;
+
+        for (int i = 1; i < Points.Length; i++)
+        {
+            CurveControlPoint prev = Points[i - 1];
+            CurveControlPoint next = Points[i];
+
+            if (t <= next.Point.X)
+            {
+                // Normalize t to the segment range [0, 1]
+                float segmentT = (t - prev.Point.X) / (next.Point.X - prev.Point.X);
+
+                // Use Bezier interpolation if handles are present
+                if (prev.HasHandles || next.HasHandles)
+                {
+                    return EvaluateCubicBezier(prev, next, segmentT);
+                }
+                else
+                {
+                    // Linear interpolation
+                    return prev.Point.Y + (next.Point.Y - prev.Point.Y) * segmentT;
+                }
+            }
+        }
+
+        return Points[^1].Point.Y;
+    }
+
+    private static float EvaluateCubicBezier(CurveControlPoint p0, CurveControlPoint p1, float t)
+    {
+        // Control points for cubic Bezier:
+        // P0 = start point
+        // P1 = start point + right handle
+        // P2 = end point + left handle
+        // P3 = end point
+
+        Point startPoint = p0.Point;
+        Point controlPoint1 = p0.AbsoluteRightHandle;
+        Point controlPoint2 = p1.AbsoluteLeftHandle;
+        Point endPoint = p1.Point;
+
+        // For X, we need to find the parameter u such that X(u) = t
+        // Since we normalized t to the segment, we need to find u for the Bezier
+        float u = FindBezierParameterForX(
+            startPoint.X, controlPoint1.X, controlPoint2.X, endPoint.X,
+            startPoint.X + t * (endPoint.X - startPoint.X));
+
+        // Then evaluate Y at that parameter
+        return CubicBezier(u, startPoint.Y, controlPoint1.Y, controlPoint2.Y, endPoint.Y);
+    }
+
+    private static float FindBezierParameterForX(float x0, float x1, float x2, float x3, float targetX)
+    {
+        // Binary search to find u where X(u) = targetX
+        float low = 0f;
+        float high = 1f;
+        float mid = 0.5f;
+
+        for (int i = 0; i < 20; i++)
+        {
+            mid = (low + high) * 0.5f;
+            float x = CubicBezier(mid, x0, x1, x2, x3);
+
+            if (Math.Abs(x - targetX) < 1e-6f)
+                break;
+
+            if (x < targetX)
+                low = mid;
+            else
+                high = mid;
+        }
+
+        return mid;
+    }
+
+    private static float CubicBezier(float t, float p0, float p1, float p2, float p3)
+    {
+        float u = 1 - t;
+        return u * u * u * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t * p3;
+    }
+
+    public SKShader ToShader()
+    {
+        var data = new byte[256];
+        for (int i = 0; i < data.Length; i++)
+        {
+            float v = Evaluate(i / 255f);
+            data[i] = (byte)Math.Clamp((int)(v * 255f), 0, 255);
+        }
+
+        var info = new SKImageInfo(256, 1, SKColorType.Alpha8, SKAlphaType.Unpremul);
+        using SKData pixels = SKData.CreateCopy(data);
+        using SKImage image = SKImage.FromPixels(info, pixels, info.RowBytes);
+        return SKShader.CreateImage(
+            image,
+            SKShaderTileMode.Clamp,
+            SKShaderTileMode.Clamp,
+            SKSamplingOptions.Default,
+            SKMatrix.CreateScale(1 / 256f, 1));
+    }
+
+    public bool Equals(CurveMap? other)
+    {
+        if (ReferenceEquals(this, other)) return true;
+        if (other is null || other.Points.Length != Points.Length) return false;
+
+        for (int i = 0; i < Points.Length; i++)
+        {
+            if (Points[i] != other.Points[i])
+                return false;
+        }
+
+        return true;
+    }
+
+    public override bool Equals(object? obj)
+    {
+        return Equals(obj as CurveMap);
+    }
+
+    public override int GetHashCode()
+    {
+        HashCode hash = new();
+        foreach (CurveControlPoint p in Points)
+        {
+            hash.Add(p);
+        }
+
+        return hash.ToHashCode();
+    }
+
+    private static ImmutableArray<CurveControlPoint> Normalize(IEnumerable<CurveControlPoint> points)
+    {
+        return points.OrderBy(p => p.Point.X).ToImmutableArray();
+    }
+}
diff --git a/src/Beutl.Engine/Graphics/FilterEffects/ColorGrading.cs b/src/Beutl.Engine/Graphics/FilterEffects/ColorGrading.cs
new file mode 100644
index 000000000..c11ff160d
--- /dev/null
+++ b/src/Beutl.Engine/Graphics/FilterEffects/ColorGrading.cs
@@ -0,0 +1,299 @@
+using System.ComponentModel.DataAnnotations;
+using System.Reactive;
+using Beutl.Engine;
+using Beutl.Language;
+using Beutl.Logging;
+using Beutl.Media;
+using Microsoft.Extensions.Logging;
+using SkiaSharp;
+
+namespace Beutl.Graphics.Effects;
+
+public sealed partial class ColorGrading : FilterEffect
+{
+    private static readonly ILogger s_logger = Log.CreateLogger<ColorGrading>();
+    private static readonly SKRuntimeEffect? s_runtimeEffect;
+
+    static ColorGrading()
+    {
+        const string sksl =
+            """
+            uniform shader src;
+            uniform float exposure; // EV stops (-5 to +5)
+            uniform float contrast; // -1 to +1
+            uniform float contrastPivot; // typically 0.18 or 0.5
+            uniform float saturation; // -1 to +1
+            uniform float vibrance; // -1 to +1
+            uniform float hue; // degrees (-180 to +180)
+            uniform float temperature; // -1 to +1 (cool to warm)
+            uniform float tint; // -1 to +1 (green to magenta)
+            uniform float3 shadows; // RGB adjustment for shadows
+            uniform float3 midtones; // RGB adjustment for midtones
+            uniform float3 highlights; // RGB adjustment for highlights
+            uniform float3 lift; // Shadow lift (typically -0.5 to +0.5)
+            uniform float3 gamma; // Midtone gamma (typically 0.5 to 2.0, default 1.0)
+            uniform float3 gain; // Highlight gain (typically 0.0 to 2.0, default 1.0)
+            uniform float3 offset; // RGB offset (-1 to +1)
+            uniform float lowRange;
+            uniform float highRange;
+
+            const float3 LUMINANCE_COEFF = float3(0.2126, 0.7152, 0.0722);
+
+            float get_luminance(float3 color) {
+                return dot(color, LUMINANCE_COEFF);
+            }
+
+            float saturation_of(float3 color) {
+                float maxc = max(max(color.r, color.g), color.b);
+                float minc = min(min(color.r, color.g), color.b);
+                float delta = maxc - minc;
+                return maxc > 0.0 ? delta / maxc : 0.0;
+            }
+
+            float3 apply_lift_gamma_gain(float3 color, float3 l, float3 g, float3 gn) {
+                color = color + l * (1.0 - color);
+
+                float3 safe_gamma = max(g, float3(0.001));
+                color = pow(max(color, float3(0.0)), 1.0 / safe_gamma);
+                color *= gn;
+
+                return color;
+            }
+
+            float3 apply_tonal_balance(float3 color, float3 shd, float3 mid, float3 hlt) {
+                float luma = get_luminance(color);
+                float shadow_w = 1.0 - smoothstep(0.0, lowRange, luma);
+                float highlight_w = smoothstep(highRange, 1.0, luma);
+                float midtone_w = 1.0 - shadow_w - highlight_w;
+
+                midtone_w = max(midtone_w, 0.0);
+                return color + shd * shadow_w + mid * midtone_w + hlt * highlight_w;
+            }
+
+            float3 apply_saturation(float3 color, float sat) {
+                float luma = get_luminance(color);
+                return mix(float3(luma), color, 1.0 + sat);
+            }
+
+            float3 apply_hue(float3 color, float hue) {
+                float rad = radians(hue);
+                float cos_a = cos(rad);
+                float sin_a = sin(rad);
+
+                const float3x3 rgb_to_yiq = float3x3(
+                    float3(0.299,  0.596,  0.212),   // column 0
+                    float3(0.587, -0.275, -0.523),   // column 1
+                    float3(0.114, -0.321,  0.311)    // column 2
+                );
+
+                const float3x3 yiq_to_rgb = float3x3(
+                    float3(1.0,  1.0,  1.0),         // column 0
+                    float3(0.956, -0.272, -1.105),   // column 1
+                    float3(0.621, -0.647,  1.702)    // column 2
+                );
+
+                float3x3 rotation = float3x3(
+                    float3(1.0, 0.0, 0.0),
+                    float3(0.0, cos_a, sin_a),
+                    float3(0.0, -sin_a, cos_a)
+                );
+
+                return yiq_to_rgb * (rotation * (rgb_to_yiq * color));
+            }
+
+            float3 apply_temperature_tint(float3 color, float temperature, float tint) {
+                float3 temp_adjustment = float3(
+                    1.0 + temperature * 0.1,
+                    1.0,
+                    1.0 - temperature * 0.1
+                );
+
+                float3 tint_adjustment = float3(
+                    1.0 + tint * 0.05,
+                    1.0 - tint * 0.1,
+                    1.0 + tint * 0.05
+                );
+
+                return color * temp_adjustment * tint_adjustment;
+            }
+
+            half4 main(float2 coord) {
+                half4 srcColor = src.eval(coord);
+                float alpha = srcColor.a;
+                float3 color;
+                if (alpha > 0.0001) {
+                    color = srcColor.rgb / alpha;
+                } else {
+                    return half4(0.0);
+                }
+
+                color *= exp2(exposure);
+                color = apply_lift_gamma_gain(color, lift, gamma, gain);
+                color = (color - contrastPivot) * (1.0 + contrast) + contrastPivot;
+                color = apply_tonal_balance(color, shadows, midtones, highlights);
+                color = apply_temperature_tint(color, temperature, tint);
+                float satWeight = 1.0 - clamp(saturation_of(color), 0.0, 1.0);
+                color = apply_saturation(color, saturation * (1.0 + vibrance * satWeight));
+                color = apply_hue(color, hue);
+
+                color += offset;
+
+                color = clamp(color, 0.0, 1.0);
+                return half4(color * alpha, alpha);
+            }
+
+            """;
+
+        s_runtimeEffect = SKRuntimeEffect.CreateShader(sksl, out string? errorText);
+        if (errorText is not null)
+        {
+            s_logger.LogError("Failed to compile color grading shader: {ErrorText}", errorText);
+        }
+    }
+
+    public ColorGrading()
+    {
+        ScanProperties<ColorGrading>();
+    }
+
+    [Display(Name = nameof(Strings.Temperature), ResourceType = typeof(Strings))]
+    [Range(-100, 100)]
+    public IProperty<float> Temperature { get; } = Property.CreateAnimatable<float>();
+
+    [Display(Name = nameof(Strings.Tint), ResourceType = typeof(Strings))]
+    [Range(-100, 100)]
+    public IProperty<float> Tint { get; } = Property.CreateAnimatable<float>();
+
+    [Display(Name = nameof(Strings.Exposure), ResourceType = typeof(Strings))]
+    [Range(-5, 5)]
+    public IProperty<float> Exposure { get; } = Property.CreateAnimatable<float>();
+
+    [Display(Name = nameof(Strings.Contrast), ResourceType = typeof(Strings))]
+    [Range(-100, 100)]
+    public IProperty<float> Contrast { get; } = Property.CreateAnimatable<float>();
+
+    [Display(Name = nameof(Strings.ContrastPivot), ResourceType = typeof(Strings))]
+    [Range(0, 1)]
+    public IProperty<float> ContrastPivot { get; } = Property.CreateAnimatable(0.5f);
+
+    [Display(Name = nameof(Strings.Saturation), ResourceType = typeof(Strings))]
+    [Range(-100, 100)]
+    public IProperty<float> Saturation { get; } = Property.CreateAnimatable<float>();
+
+    [Display(Name = nameof(Strings.Vibrance), ResourceType = typeof(Strings))]
+    [Range(-100, 100)]
+    public IProperty<float> Vibrance { get; } = Property.CreateAnimatable<float>();
+
+    [Display(Name = nameof(Strings.Hue), ResourceType = typeof(Strings))]
+    [Range(-180, 180)]
+    public IProperty<float> Hue { get; } = Property.CreateAnimatable<float>();
+
+    [Display(Name = nameof(Strings.LowRange), ResourceType = typeof(Strings))]
+    [Range(0, 100)]
+    public IProperty<float> LowRange { get; } = Property.CreateAnimatable(40f);
+
+    [Display(Name = nameof(Strings.HighRange), ResourceType = typeof(Strings))]
+    [Range(0, 100)]
+    public IProperty<float> HighRange { get; } = Property.CreateAnimatable(60f);
+
+    [Display(Name = nameof(Strings.Shadows), ResourceType = typeof(Strings))]
+    public IProperty<GradingColor> Shadows { get; } = Property.CreateAnimatable(GradingColor.Zero);
+
+    [Display(Name = nameof(Strings.Midtones), ResourceType = typeof(Strings))]
+    public IProperty<GradingColor> Midtones { get; } = Property.CreateAnimatable(GradingColor.Zero);
+
+    [Display(Name = nameof(Strings.Highlights), ResourceType = typeof(Strings))]
+    public IProperty<GradingColor> Highlights { get; } = Property.CreateAnimatable(GradingColor.Zero);
+
+    [Display(Name = nameof(Strings.Lift), ResourceType = typeof(Strings))]
+    public IProperty<GradingColor> Lift { get; } = Property.CreateAnimatable(GradingColor.Zero);
+
+    [Display(Name = nameof(Strings.Gamma), ResourceType = typeof(Strings))]
+    public IProperty<GradingColor> Gamma { get; } = Property.CreateAnimatable(GradingColor.One);
+
+    [Display(Name = nameof(Strings.Gain), ResourceType = typeof(Strings))]
+    public IProperty<GradingColor> Gain { get; } = Property.CreateAnimatable(GradingColor.One);
+
+    [Display(Name = nameof(Strings.Offset), ResourceType = typeof(Strings))]
+    public IProperty<GradingColor> Offset { get; } = Property.CreateAnimatable(GradingColor.Zero);
+
+    public override void ApplyTo(FilterEffectContext context, FilterEffect.Resource resource)
+    {
+        if (s_runtimeEffect is null)
+        {
+            throw new InvalidOperationException("Failed to compile SKSL.");
+        }
+
+        var r = (Resource)resource;
+        // TODO: 第二引数がIEquatableを要求しているので，タプルにしている
+        context.CustomEffect(
+            (r, Unit.Default),
+            (t, c) => OnApply(t.r, c),
+            static (_, rect) => rect);
+    }
+
+    private static void OnApply(Resource data, CustomFilterEffectContext context)
+    {
+        if (s_runtimeEffect is null)
+        {
+            return;
+        }
+
+        for (int i = 0; i < context.Targets.Count; i++)
+        {
+            var target = context.Targets[i];
+            if (target.RenderTarget is not { } renderTarget)
+                continue;
+
+            using SKImage image = renderTarget.Value.Snapshot();
+            using SKShader baseShader = SKShader.CreateImage(image, SKShaderTileMode.Decal, SKShaderTileMode.Decal);
+            var builder = new SKRuntimeShaderBuilder(s_runtimeEffect);
+
+            builder.Children["src"] = baseShader;
+            builder.Uniforms["exposure"] = data.Exposure;
+            builder.Uniforms["contrast"] = data.Contrast / 100f;
+            builder.Uniforms["contrastPivot"] = data.ContrastPivot;
+            builder.Uniforms["saturation"] = data.Saturation / 100f;
+            builder.Uniforms["vibrance"] = data.Vibrance / 100f;
+            builder.Uniforms["hue"] = data.Hue;
+            builder.Uniforms["temperature"] = data.Temperature / 100f;
+            builder.Uniforms["tint"] = data.Tint / 100f;
+
+            float lowRange = Math.Clamp(data.LowRange, 0f, 100f);
+            float highRange = Math.Clamp(data.HighRange, 0f, 100f);
+            if (lowRange > highRange)
+            {
+                (lowRange, highRange) = (highRange, lowRange);
+            }
+
+            builder.Uniforms["lowRange"] = lowRange / 100f;
+            builder.Uniforms["highRange"] = highRange / 100f;
+            builder.Uniforms["shadows"] = ToColorVector(data.Shadows);
+            builder.Uniforms["midtones"] = ToColorVector(data.Midtones);
+            builder.Uniforms["highlights"] = ToColorVector(data.Highlights);
+            builder.Uniforms["lift"] = ToColorVector(data.Lift);
+            builder.Uniforms["gamma"] = ToColorVector(data.Gamma, 0.001f);
+            builder.Uniforms["gain"] = ToColorVector(data.Gain, 0.0f);
+            builder.Uniforms["offset"] = ToColorVector(data.Offset);
+
+            using SKShader finalShader = builder.Build();
+            using var paint = new SKPaint { Shader = finalShader };
+
+            EffectTarget newTarget = context.CreateTarget(target.Bounds);
+            var canvas = newTarget.RenderTarget!.Value.Canvas;
+            canvas.DrawRect(new SKRect(0, 0, newTarget.Bounds.Width, newTarget.Bounds.Height), paint);
+
+            context.Targets[i] = newTarget;
+            target.Dispose();
+        }
+    }
+
+    private static SKColorF ToColorVector(GradingColor value, float minValue = float.NegativeInfinity)
+    {
+        return new SKColorF(
+            Math.Max(value.R, minValue),
+            Math.Max(value.G, minValue),
+            Math.Max(value.B, minValue),
+            1f);
+    }
+}
diff --git a/src/Beutl.Engine/Graphics/FilterEffects/Curves.cs b/src/Beutl.Engine/Graphics/FilterEffects/Curves.cs
new file mode 100644
index 000000000..3b797cced
--- /dev/null
+++ b/src/Beutl.Engine/Graphics/FilterEffects/Curves.cs
@@ -0,0 +1,189 @@
+using System.ComponentModel.DataAnnotations;
+
+using Beutl.Engine;
+using Beutl.Language;
+using Beutl.Logging;
+using Microsoft.Extensions.Logging;
+using SkiaSharp;
+
+namespace Beutl.Graphics.Effects;
+
+public sealed partial class Curves : FilterEffect
+{
+    private static readonly ILogger s_logger = Log.CreateLogger<Curves>();
+    private static readonly SKRuntimeEffect? s_runtimeEffect;
+
+    static Curves()
+    {
+        const string sksl =
+            """
+            uniform shader src;
+            uniform shader masterCurve;
+            uniform shader redCurve;
+            uniform shader greenCurve;
+            uniform shader blueCurve;
+            uniform shader hueVsHue;
+            uniform shader hueVsSat;
+            uniform shader hueVsLuma;
+            uniform shader lumaVsSat;
+            uniform shader satVsSat;
+
+            const float3 LUMA = float3(0.2126, 0.7152, 0.0722);
+
+            float3 rgb_to_hsv(float3 c)
+            {
+                float4 K = float4(0., -1./3., 2./3., -1.);
+                float4 p = mix(float4(c.bg, K.wz), float4(c.gb, K.xy), step(c.b, c.g));
+                float4 q = mix(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));
+
+                float d = q.x - min(q.w, q.y);
+                float e = 1e-10;
+                return float3(abs(q.z + (q.w - q.y) / (6. * d + e)), d / (q.x + e), q.x);
+            }
+
+            float3 hsv_to_rgb(float3 c)
+            {
+                float4 K = float4(1., 2./3., 1./3., 3.);
+                float3 p = abs(fract(c.xxx + K.xyz) * 6. - K.www);
+                return c.z * mix(K.xxx, clamp(p - K.xxx, 0., 1.), c.y);
+            }
+
+            half4 main(float2 coord) {
+                half4 baseColor = src.eval(coord);
+                if (baseColor.a <= 0.0001) return baseColor;
+
+                float3 rgb = baseColor.rgb / baseColor.a;
+                float luma = dot(rgb, LUMA);
+                float3 hsv = rgb_to_hsv(rgb);
+
+                float hueShift = hueVsHue.eval(float2(hsv.x, 0.5)).a - 0.5;
+                hsv.x = fract(hsv.x + hueShift + 1.0);
+
+                // Curve value 0.5 = no change, 0.0 = 0x, 1.0 = 2x
+                hsv.y *= hueVsSat.eval(float2(hsv.x, 0.5)).a * 2.0;
+                hsv.z *= hueVsLuma.eval(float2(hsv.x, 0.5)).a * 2.0;
+
+                hsv.y *= lumaVsSat.eval(float2(luma, 0.5)).a * 2.0;
+                hsv.y = clamp(hsv.y, 0.0, 1.0);
+
+                hsv.y *= satVsSat.eval(float2(hsv.y, 0.5)).a * 2.0;
+                hsv.y = clamp(hsv.y, 0.0, 1.0);
+
+                rgb = hsv_to_rgb(hsv);
+
+                rgb.r = redCurve.eval(float2(rgb.r, 0.5)).a;
+                rgb.g = greenCurve.eval(float2(rgb.g, 0.5)).a;
+                rgb.b = blueCurve.eval(float2(rgb.b, 0.5)).a;
+
+                rgb.r = masterCurve.eval(float2(rgb.r, 0.5)).a;
+                rgb.g = masterCurve.eval(float2(rgb.g, 0.5)).a;
+                rgb.b = masterCurve.eval(float2(rgb.b, 0.5)).a;
+
+                rgb = clamp(rgb, 0.0, 1.0);
+                return half4(rgb * baseColor.a, baseColor.a);
+            }
+            """;
+
+        s_runtimeEffect = SKRuntimeEffect.CreateShader(sksl, out string? errorText);
+        if (errorText is not null)
+        {
+            s_logger.LogError("Failed to compile curves shader: {ErrorText}", errorText);
+        }
+    }
+
+    public Curves()
+    {
+        ScanProperties<Curves>();
+    }
+
+    [Display(Name = nameof(Strings.CustomCurve), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> MasterCurve { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0), new CurveControlPoint(1, 1)]));
+
+    [Display(Name = nameof(Strings.RedCurve), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> RedCurve { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0), new CurveControlPoint(1, 1)]));
+
+    [Display(Name = nameof(Strings.GreenCurve), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> GreenCurve { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0), new CurveControlPoint(1, 1)]));
+
+    [Display(Name = nameof(Strings.BlueCurve), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> BlueCurve { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0), new CurveControlPoint(1, 1)]));
+
+    [Display(Name = nameof(Strings.HueVsHue), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> HueVsHue { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0.5f), new CurveControlPoint(1, 0.5f)]));
+
+    [Display(Name = nameof(Strings.HueVsSaturation), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> HueVsSaturation { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0.5f), new CurveControlPoint(1, 0.5f)]));
+
+    [Display(Name = nameof(Strings.HueVsLuminance), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> HueVsLuminance { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0.5f), new CurveControlPoint(1, 0.5f)]));
+
+    [Display(Name = nameof(Strings.LuminanceVsSaturation), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> LuminanceVsSaturation { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0.5f), new CurveControlPoint(1, 0.5f)]));
+
+    [Display(Name = nameof(Strings.SaturationVsSaturation), ResourceType = typeof(Strings))]
+    public IProperty<CurveMap> SaturationVsSaturation { get; } = Property.Create(new CurveMap([new CurveControlPoint(0, 0.5f), new CurveControlPoint(1, 0.5f)]));
+
+    public override void ApplyTo(FilterEffectContext context, FilterEffect.Resource resource)
+    {
+        if (s_runtimeEffect is null)
+        {
+            throw new InvalidOperationException("Failed to compile SKSL.");
+        }
+
+        var r = (Resource)resource;
+
+        context.CustomEffect(
+            (Resource: r, Dummy: 0),
+            static (data, ctx) => OnApply(data.Resource, ctx),
+            static (_, rect) => rect);
+    }
+
+    private static void OnApply(Resource data, CustomFilterEffectContext context)
+    {
+        if (s_runtimeEffect is null)
+            return;
+
+        using SKShader master = data.MasterCurve.ToShader();
+        using SKShader red = data.RedCurve.ToShader();
+        using SKShader green = data.GreenCurve.ToShader();
+        using SKShader blue = data.BlueCurve.ToShader();
+        using SKShader hueHue = data.HueVsHue.ToShader();
+        using SKShader hueSat = data.HueVsSaturation.ToShader();
+        using SKShader hueLum = data.HueVsLuminance.ToShader();
+        using SKShader lumSat = data.LuminanceVsSaturation.ToShader();
+        using SKShader satSat = data.SaturationVsSaturation.ToShader();
+
+        for (int i = 0; i < context.Targets.Count; i++)
+        {
+            EffectTarget target = context.Targets[i];
+            if (target.RenderTarget is not { } renderTarget)
+                continue;
+
+            using SKImage image = renderTarget.Value.Snapshot();
+            using SKShader baseShader = SKShader.CreateImage(image, SKShaderTileMode.Decal, SKShaderTileMode.Decal);
+
+            var builder = new SKRuntimeShaderBuilder(s_runtimeEffect);
+
+            builder.Children["src"] = baseShader;
+            builder.Children["masterCurve"] = master;
+            builder.Children["redCurve"] = red;
+            builder.Children["greenCurve"] = green;
+            builder.Children["blueCurve"] = blue;
+            builder.Children["hueVsHue"] = hueHue;
+            builder.Children["hueVsSat"] = hueSat;
+            builder.Children["hueVsLuma"] = hueLum;
+            builder.Children["lumaVsSat"] = lumSat;
+            builder.Children["satVsSat"] = satSat;
+
+            using SKShader finalShader = builder.Build();
+            using var paint = new SKPaint { Shader = finalShader };
+
+            EffectTarget newTarget = context.CreateTarget(target.Bounds);
+            var canvas = newTarget.RenderTarget!.Value.Canvas;
+            canvas.DrawRect(new SKRect(0, 0, newTarget.Bounds.Width, newTarget.Bounds.Height), paint);
+
+            context.Targets[i] = newTarget;
+            target.Dispose();
+        }
+    }
+}
diff --git a/src/Beutl.Engine/Graphics/Rendering/RenderLayer.cs b/src/Beutl.Engine/Graphics/Rendering/RenderLayer.cs
index e79326000..2d2f18beb 100644
--- a/src/Beutl.Engine/Graphics/Rendering/RenderLayer.cs
+++ b/src/Beutl.Engine/Graphics/Rendering/RenderLayer.cs
@@ -43,6 +43,7 @@ public void Clear()
         _currentFrame?.Clear();
     }
 
+    // TODO: DrawableがDetachされたときにキャッシュを削除する仕組みを入れる
     // Drawable
     public void Add(Drawable drawable, TimeSpan time)
     {
diff --git a/src/Beutl.Engine/Media/GradingColor.cs b/src/Beutl.Engine/Media/GradingColor.cs
new file mode 100644
index 000000000..00f1d9c19
--- /dev/null
+++ b/src/Beutl.Engine/Media/GradingColor.cs
@@ -0,0 +1,318 @@
+using System.ComponentModel;
+using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
+using System.Numerics;
+using System.Text.Json.Serialization;
+using Beutl.Converters;
+
+namespace Beutl.Media;
+
+/// <summary>
+/// A color value used for color grading operations (Lift, Gamma, Gain, Offset).
+/// Each component (R, G, B) is a float value that can be negative.
+/// </summary>
+[JsonConverter(typeof(GradingColorJsonConverter))]
+[TypeConverter(typeof(GradingColorConverter))]
+public readonly struct GradingColor
+    : IEquatable<GradingColor>,
+        IParsable<GradingColor>,
+        ISpanParsable<GradingColor>
+{
+    /// <summary>
+    /// Represents a neutral grading color (0, 0, 0) with intensity 1.
+    /// </summary>
+    public static readonly GradingColor Zero = new(0f, 0f, 0f);
+
+    /// <summary>
+    /// Represents a neutral grading color (1, 1, 1) with intensity 1.
+    /// </summary>
+    public static readonly GradingColor One = new(1f, 1f, 1f);
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="GradingColor"/> struct.
+    /// </summary>
+    /// <param name="r">The red component.</param>
+    /// <param name="g">The green component.</param>
+    /// <param name="b">The blue component.</param>
+    public GradingColor(float r, float g, float b)
+    {
+        R = r;
+        G = g;
+        B = b;
+    }
+
+    /// <summary>
+    /// Gets the Red component of the color.
+    /// </summary>
+    public float R { get; }
+
+    /// <summary>
+    /// Gets the Green component of the color.
+    /// </summary>
+    public float G { get; }
+
+    /// <summary>
+    /// Gets the Blue component of the color.
+    /// </summary>
+    public float B { get; }
+
+    /// <summary>
+    /// Creates a <see cref="GradingColor"/> from red, green and blue components.
+    /// </summary>
+    /// <param name="r">The red component.</param>
+    /// <param name="g">The green component.</param>
+    /// <param name="b">The blue component.</param>
+    /// <returns>The grading color.</returns>
+    public static GradingColor FromRgb(float r, float g, float b)
+    {
+        return new GradingColor(r, g, b);
+    }
+
+    /// <summary>
+    /// Creates a <see cref="GradingColor"/> from a <see cref="Color"/>.
+    /// </summary>
+    /// <param name="color">The source color.</param>
+    /// <param name="intensity">The intensity multiplier (default: 1.0).</param>
+    /// <param name="scale">The scale factor for conversion (default: 1/255).</param>
+    /// <returns>The grading color.</returns>
+    public static GradingColor FromColor(Color color, float scale = 1f / 255f)
+    {
+        return new GradingColor(
+            color.R * scale,
+            color.G * scale,
+            color.B * scale);
+    }
+
+    /// <summary>
+    /// Creates a <see cref="GradingColor"/> from a <see cref="Vector3"/>.
+    /// </summary>
+    /// <param name="vector">The source vector.</param>
+    /// <returns>The grading color.</returns>
+    public static GradingColor FromVector3(Vector3 vector)
+    {
+        return new GradingColor(vector.X, vector.Y, vector.Z);
+    }
+
+    /// <summary>
+    /// Converts this <see cref="GradingColor"/> to a <see cref="Vector3"/>.
+    /// Uses effective values (R * Intensity, G * Intensity, B * Intensity).
+    /// </summary>
+    /// <returns>The vector representation.</returns>
+    public Vector3 ToVector3()
+    {
+        return new Vector3(R, G, B);
+    }
+
+    /// <summary>
+    /// Converts this <see cref="GradingColor"/> to a <see cref="Color"/>.
+    /// Uses effective values and clamps to 0-255 range.
+    /// </summary>
+    /// <returns>The color representation.</returns>
+    public Color ToColor()
+    {
+        return Color.FromArgb(
+            255,
+            (byte)Math.Clamp(R * 255f, 0f, 255f),
+            (byte)Math.Clamp(G * 255f, 0f, 255f),
+            (byte)Math.Clamp(B * 255f, 0f, 255f));
+    }
+
+    /// <summary>
+    /// Parses a grading color string in format "R, G, B" or "R, G, B, I".
+    /// </summary>
+    /// <param name="s">The color string.</param>
+    /// <returns>The <see cref="GradingColor"/>.</returns>
+    public static GradingColor Parse(string s)
+    {
+        ArgumentNullException.ThrowIfNull(s);
+
+        if (TryParse(s, out GradingColor color))
+        {
+            return color;
+        }
+
+        throw new FormatException($"Invalid grading color string: '{s}'.");
+    }
+
+    /// <summary>
+    /// Parses a grading color string in format "R, G, B" or "R, G, B, I".
+    /// </summary>
+    /// <param name="s">The color string.</param>
+    /// <returns>The <see cref="GradingColor"/>.</returns>
+    public static GradingColor Parse(ReadOnlySpan<char> s)
+    {
+        if (TryParse(s, out GradingColor color))
+        {
+            return color;
+        }
+
+        throw new FormatException($"Invalid grading color string: '{s.ToString()}'.");
+    }
+
+    /// <summary>
+    /// Tries to parse a grading color string in format "R, G, B" or "R, G, B, I".
+    /// </summary>
+    /// <param name="s">The color string.</param>
+    /// <param name="color">The parsed color.</param>
+    /// <returns>True if parsing was successful.</returns>
+    public static bool TryParse(string? s, out GradingColor color)
+    {
+        color = default;
+
+        if (string.IsNullOrWhiteSpace(s))
+        {
+            return false;
+        }
+
+        return TryParse(s.AsSpan(), out color);
+    }
+
+    /// <summary>
+    /// Tries to parse a grading color string in format "R, G, B" or "R, G, B, I".
+    /// </summary>
+    /// <param name="s">The color string.</param>
+    /// <param name="color">The parsed color.</param>
+    /// <returns>True if parsing was successful.</returns>
+    public static bool TryParse(ReadOnlySpan<char> s, out GradingColor color)
+    {
+        color = default;
+        s = s.Trim();
+
+        if (s.Length == 0)
+        {
+            return false;
+        }
+
+        int firstComma = s.IndexOf(',');
+        if (firstComma < 0)
+        {
+            return false;
+        }
+
+        int secondComma = s.Slice(firstComma + 1).IndexOf(',');
+        if (secondComma < 0)
+        {
+            return false;
+        }
+
+        secondComma += firstComma + 1;
+
+        ReadOnlySpan<char> rStr = s.Slice(0, firstComma).Trim();
+        ReadOnlySpan<char> gStr = s.Slice(firstComma + 1, secondComma - firstComma - 1).Trim();
+        ReadOnlySpan<char> bStr = s.Slice(secondComma + 1).Trim();
+
+        if (!float.TryParse(rStr, NumberStyles.Float, CultureInfo.InvariantCulture, out float r) ||
+            !float.TryParse(gStr, NumberStyles.Float, CultureInfo.InvariantCulture, out float g) ||
+            !float.TryParse(bStr, NumberStyles.Float, CultureInfo.InvariantCulture, out float b))
+        {
+            return false;
+        }
+
+        color = new GradingColor(r, g, b);
+        return true;
+    }
+
+    /// <summary>
+    /// Returns the string representation of the grading color.
+    /// Format: "R, G, B, I" if intensity is not 1.0, otherwise "R, G, B".
+    /// </summary>
+    /// <returns>The string representation.</returns>
+    public override string ToString()
+    {
+        return string.Create(CultureInfo.InvariantCulture, $"{R}, {G}, {B}");
+    }
+
+    /// <inheritdoc/>
+    public bool Equals(GradingColor other)
+    {
+        return R == other.R && G == other.G && B == other.B;
+    }
+
+    /// <inheritdoc/>
+    public override bool Equals(object? obj)
+    {
+        return obj is GradingColor other && Equals(other);
+    }
+
+    /// <inheritdoc/>
+    public override int GetHashCode()
+    {
+        return HashCode.Combine(R, G, B);
+    }
+
+    /// <summary>
+    /// Checks if two grading colors are equal.
+    /// </summary>
+    public static bool operator ==(GradingColor left, GradingColor right)
+    {
+        return left.Equals(right);
+    }
+
+    /// <summary>
+    /// Checks if two grading colors are not equal.
+    /// </summary>
+    public static bool operator !=(GradingColor left, GradingColor right)
+    {
+        return !left.Equals(right);
+    }
+
+    /// <summary>
+    /// Adds two grading colors. Intensity is averaged.
+    /// </summary>
+    public static GradingColor operator +(GradingColor left, GradingColor right)
+    {
+        return new GradingColor(
+            left.R + right.R,
+            left.G + right.G,
+            left.B + right.B);
+    }
+
+    /// <summary>
+    /// Subtracts two grading colors. Intensity is averaged.
+    /// </summary>
+    public static GradingColor operator -(GradingColor left, GradingColor right)
+    {
+        return new GradingColor(
+            left.R - right.R,
+            left.G - right.G,
+            left.B - right.B);
+    }
+
+    /// <summary>
+    /// Multiplies a grading color by a scalar (affects RGB, not intensity).
+    /// </summary>
+    public static GradingColor operator *(GradingColor color, float scalar)
+    {
+        return new GradingColor(color.R * scalar, color.G * scalar, color.B * scalar);
+    }
+
+    /// <summary>
+    /// Multiplies a scalar by a grading color (affects RGB, not intensity).
+    /// </summary>
+    public static GradingColor operator *(float scalar, GradingColor color)
+    {
+        return color * scalar;
+    }
+
+    static GradingColor IParsable<GradingColor>.Parse(string s, IFormatProvider? provider)
+    {
+        return Parse(s);
+    }
+
+    static bool IParsable<GradingColor>.TryParse([NotNullWhen(true)] string? s, IFormatProvider? provider,
+        [MaybeNullWhen(false)] out GradingColor result)
+    {
+        return TryParse(s, out result);
+    }
+
+    static GradingColor ISpanParsable<GradingColor>.Parse(ReadOnlySpan<char> s, IFormatProvider? provider)
+    {
+        return Parse(s);
+    }
+
+    static bool ISpanParsable<GradingColor>.TryParse([NotNullWhen(true)] ReadOnlySpan<char> s,
+        IFormatProvider? provider, [MaybeNullWhen(false)] out GradingColor result)
+    {
+        return TryParse(s, out result);
+    }
+}
diff --git a/src/Beutl.Language/Strings.Designer.cs b/src/Beutl.Language/Strings.Designer.cs
index 38731e0cb..7f2f39250 100644
--- a/src/Beutl.Language/Strings.Designer.cs
+++ b/src/Beutl.Language/Strings.Designer.cs
@@ -51,6 +51,66 @@ public static string File {
             }
         }
         
+        public static string BlueCurve {
+            get {
+                return ResourceManager.GetString("BlueCurve", resourceCulture);
+            }
+        }
+        
+        public static string Curves {
+            get {
+                return ResourceManager.GetString("Curves", resourceCulture);
+            }
+        }
+        
+        public static string CustomCurve {
+            get {
+                return ResourceManager.GetString("CustomCurve", resourceCulture);
+            }
+        }
+        
+        public static string GreenCurve {
+            get {
+                return ResourceManager.GetString("GreenCurve", resourceCulture);
+            }
+        }
+        
+        public static string HueVsHue {
+            get {
+                return ResourceManager.GetString("HueVsHue", resourceCulture);
+            }
+        }
+        
+        public static string HueVsLuminance {
+            get {
+                return ResourceManager.GetString("HueVsLuminance", resourceCulture);
+            }
+        }
+        
+        public static string HueVsSaturation {
+            get {
+                return ResourceManager.GetString("HueVsSaturation", resourceCulture);
+            }
+        }
+        
+        public static string LuminanceVsSaturation {
+            get {
+                return ResourceManager.GetString("LuminanceVsSaturation", resourceCulture);
+            }
+        }
+        
+        public static string RedCurve {
+            get {
+                return ResourceManager.GetString("RedCurve", resourceCulture);
+            }
+        }
+        
+        public static string SaturationVsSaturation {
+            get {
+                return ResourceManager.GetString("SaturationVsSaturation", resourceCulture);
+            }
+        }
+        
         public static string CreateNew {
             get {
                 return ResourceManager.GetString("CreateNew", resourceCulture);
@@ -93,6 +153,12 @@ public static string Close {
             }
         }
         
+        public static string ColorScopes {
+            get {
+                return ResourceManager.GetString("ColorScopes", resourceCulture);
+            }
+        }
+        
         public static string CloseProject {
             get {
                 return ResourceManager.GetString("CloseProject", resourceCulture);
@@ -1185,6 +1251,84 @@ public static string Gamma {
             }
         }
         
+        public static string ColorGrading {
+            get {
+                return ResourceManager.GetString("ColorGrading", resourceCulture);
+            }
+        }
+        
+        public static string ColorGrading_Missing {
+            get {
+                return ResourceManager.GetString("ColorGrading_Missing", resourceCulture);
+            }
+        }
+        
+        public static string ColorCurves_Missing {
+            get {
+                return ResourceManager.GetString("ColorCurves_Missing", resourceCulture);
+            }
+        }
+        
+        public static string Temperature {
+            get {
+                return ResourceManager.GetString("Temperature", resourceCulture);
+            }
+        }
+        
+        public static string Tint {
+            get {
+                return ResourceManager.GetString("Tint", resourceCulture);
+            }
+        }
+        
+        public static string Exposure {
+            get {
+                return ResourceManager.GetString("Exposure", resourceCulture);
+            }
+        }
+        
+        public static string LowRange {
+            get {
+                return ResourceManager.GetString("LowRange", resourceCulture);
+            }
+        }
+        
+        public static string HighRange {
+            get {
+                return ResourceManager.GetString("HighRange", resourceCulture);
+            }
+        }
+        
+        public static string Shadows {
+            get {
+                return ResourceManager.GetString("Shadows", resourceCulture);
+            }
+        }
+        
+        public static string Midtones {
+            get {
+                return ResourceManager.GetString("Midtones", resourceCulture);
+            }
+        }
+        
+        public static string Highlights {
+            get {
+                return ResourceManager.GetString("Highlights", resourceCulture);
+            }
+        }
+        
+        public static string Lift {
+            get {
+                return ResourceManager.GetString("Lift", resourceCulture);
+            }
+        }
+        
+        public static string Gain {
+            get {
+                return ResourceManager.GetString("Gain", resourceCulture);
+            }
+        }
+        
         public static string Invert {
             get {
                 return ResourceManager.GetString("Invert", resourceCulture);
@@ -1239,6 +1383,12 @@ public static string Contrast {
             }
         }
         
+        public static string ContrastPivot {
+            get {
+                return ResourceManager.GetString("ContrastPivot", resourceCulture);
+            }
+        }
+        
         public static string Addition {
             get {
                 return ResourceManager.GetString("Addition", resourceCulture);
@@ -1388,25 +1538,37 @@ public static string RemoveAnimation {
                 return ResourceManager.GetString("RemoveAnimation", resourceCulture);
             }
         }
-
+        
         public static string EditExpression {
             get {
                 return ResourceManager.GetString("EditExpression", resourceCulture);
             }
         }
-
+        
         public static string RemoveExpression {
             get {
                 return ResourceManager.GetString("RemoveExpression", resourceCulture);
             }
         }
-
+        
         public static string ExpressionHelp {
             get {
                 return ResourceManager.GetString("ExpressionHelp", resourceCulture);
             }
         }
-
+        
+        public static string CopyPropertyPath {
+            get {
+                return ResourceManager.GetString("CopyPropertyPath", resourceCulture);
+            }
+        }
+        
+        public static string CopyGetPropertyCode {
+            get {
+                return ResourceManager.GetString("CopyGetPropertyCode", resourceCulture);
+            }
+        }
+        
         public static string ColorPalette {
             get {
                 return ResourceManager.GetString("ColorPalette", resourceCulture);
@@ -1424,19 +1586,19 @@ public static string SplitByCurrentFrame {
                 return ResourceManager.GetString("SplitByCurrentFrame", resourceCulture);
             }
         }
-
+        
         public static string GroupSelectedElements {
             get {
                 return ResourceManager.GetString("GroupSelectedElements", resourceCulture);
             }
         }
-
+        
         public static string UngroupSelectedElements {
             get {
                 return ResourceManager.GetString("UngroupSelectedElements", resourceCulture);
             }
         }
-
+        
         public static string Agree {
             get {
                 return ResourceManager.GetString("Agree", resourceCulture);
@@ -1815,18 +1977,36 @@ public static string Blue {
             }
         }
         
+        public static string Master {
+            get {
+                return ResourceManager.GetString("Master", resourceCulture);
+            }
+        }
+        
         public static string Hue {
             get {
                 return ResourceManager.GetString("Hue", resourceCulture);
             }
         }
         
+        public static string Intensity {
+            get {
+                return ResourceManager.GetString("Intensity", resourceCulture);
+            }
+        }
+        
         public static string Saturation {
             get {
                 return ResourceManager.GetString("Saturation", resourceCulture);
             }
         }
         
+        public static string Vibrance {
+            get {
+                return ResourceManager.GetString("Vibrance", resourceCulture);
+            }
+        }
+        
         public static string ShowSliders {
             get {
                 return ResourceManager.GetString("ShowSliders", resourceCulture);
@@ -2690,77 +2870,113 @@ public static string PathFollowEffect {
                 return ResourceManager.GetString("PathFollowEffect", resourceCulture);
             }
         }
-
-        public static string CopyPropertyPath {
-            get {
-                return ResourceManager.GetString("CopyPropertyPath", resourceCulture);
-            }
-        }
-
-        public static string CopyGetPropertyCode {
-            get {
-                return ResourceManager.GetString("CopyGetPropertyCode", resourceCulture);
-            }
-        }
-
+        
         public static string Expression_Input {
             get {
                 return ResourceManager.GetString("Expression_Input", resourceCulture);
             }
         }
-
+        
         public static string Expression_Help {
             get {
                 return ResourceManager.GetString("Expression_Help", resourceCulture);
             }
         }
-
+        
         public static string Expression_Variables {
             get {
                 return ResourceManager.GetString("Expression_Variables", resourceCulture);
             }
         }
-
+        
         public static string Expression_Functions {
             get {
                 return ResourceManager.GetString("Expression_Functions", resourceCulture);
             }
         }
-
+        
         public static string Expression_Variables_Description {
             get {
                 return ResourceManager.GetString("Expression_Variables_Description", resourceCulture);
             }
         }
-
+        
         public static string Expression_Functions_Trigonometric {
             get {
                 return ResourceManager.GetString("Expression_Functions_Trigonometric", resourceCulture);
             }
         }
-
+        
         public static string Expression_Functions_Math {
             get {
                 return ResourceManager.GetString("Expression_Functions_Math", resourceCulture);
             }
         }
-
+        
         public static string Expression_Functions_Interpolation {
             get {
                 return ResourceManager.GetString("Expression_Functions_Interpolation", resourceCulture);
             }
         }
-
+        
         public static string Expression_Functions_Utility {
             get {
                 return ResourceManager.GetString("Expression_Functions_Utility", resourceCulture);
             }
         }
-
+        
         public static string Expression_GetProperty_Description {
             get {
                 return ResourceManager.GetString("Expression_GetProperty_Description", resourceCulture);
             }
         }
+        
+        public static string Histogram {
+            get {
+                return ResourceManager.GetString("Histogram", resourceCulture);
+            }
+        }
+        
+        public static string Vectorscope {
+            get {
+                return ResourceManager.GetString("Vectorscope", resourceCulture);
+            }
+        }
+        
+        public static string Waveform {
+            get {
+                return ResourceManager.GetString("Waveform", resourceCulture);
+            }
+        }
+        
+        public static string Mode {
+            get {
+                return ResourceManager.GetString("Mode", resourceCulture);
+            }
+        }
+        
+        public static string Luma {
+            get {
+                return ResourceManager.GetString("Luma", resourceCulture);
+            }
+        }
+        
+        public static string RgbOverlay {
+            get {
+                return ResourceManager.GetString("RgbOverlay", resourceCulture);
+            }
+        }
+        
+        public static string RgbParade {
+            get {
+                return ResourceManager.GetString("RgbParade", resourceCulture);
+            }
+        }
+        
+        public static string ShowGrid {
+            get {
+                return ResourceManager.GetString("ShowGrid", resourceCulture);
+            }
+        }
     }
 }
diff --git a/src/Beutl.Language/Strings.ja.resx b/src/Beutl.Language/Strings.ja.resx
index 97c9939b6..a2ac8e698 100644
--- a/src/Beutl.Language/Strings.ja.resx
+++ b/src/Beutl.Language/Strings.ja.resx
@@ -125,9 +125,42 @@
   <data name="File" xml:space="preserve">
     <value>ファイル</value>
   </data>
+  <data name="BlueCurve" xml:space="preserve">
+    <value>ブルーカーブ</value>
+  </data>
+  <data name="Curves" xml:space="preserve">
+    <value>カーブ</value>
+  </data>
+  <data name="CustomCurve" xml:space="preserve">
+    <value>カスタム(RGB)</value>
+  </data>
+  <data name="GreenCurve" xml:space="preserve">
+    <value>グリーンカーブ</value>
+  </data>
+  <data name="HueVsHue" xml:space="preserve">
+    <value>色相 vs 色相</value>
+  </data>
+  <data name="HueVsLuminance" xml:space="preserve">
+    <value>色相 vs 輝度</value>
+  </data>
+  <data name="HueVsSaturation" xml:space="preserve">
+    <value>色相 vs 彩度</value>
+  </data>
+  <data name="LuminanceVsSaturation" xml:space="preserve">
+    <value>輝度 vs 彩度</value>
+  </data>
+  <data name="RedCurve" xml:space="preserve">
+    <value>レッドカーブ</value>
+  </data>
+  <data name="SaturationVsSaturation" xml:space="preserve">
+    <value>彩度 vs 彩度</value>
+  </data>
   <data name="Close" xml:space="preserve">
     <value>閉じる</value>
   </data>
+  <data name="ColorScopes" xml:space="preserve">
+    <value>スコープ</value>
+  </data>
   <data name="Add" xml:space="preserve">
     <value>追加</value>
   </data>
@@ -692,6 +725,45 @@
   <data name="Gamma" xml:space="preserve">
     <value>ガンマ</value>
   </data>
+  <data name="ColorGrading" xml:space="preserve">
+    <value>カラーグレーディング</value>
+  </data>
+  <data name="ColorGrading_Missing" xml:space="preserve">
+    <value>カラーグレーディングエフェクトが選択されていません。</value>
+  </data>
+  <data name="ColorCurves_Missing" xml:space="preserve">
+    <value>カラーカーブエフェクトが選択されていません。</value>
+  </data>
+  <data name="Temperature" xml:space="preserve">
+    <value>色温度</value>
+  </data>
+  <data name="Tint" xml:space="preserve">
+    <value>色かぶり補正</value>
+  </data>
+  <data name="Exposure" xml:space="preserve">
+    <value>露出</value>
+  </data>
+  <data name="LowRange" xml:space="preserve">
+    <value>ローレンジ</value>
+  </data>
+  <data name="HighRange" xml:space="preserve">
+    <value>ハイレンジ</value>
+  </data>
+  <data name="Shadows" xml:space="preserve">
+    <value>シャドウ</value>
+  </data>
+  <data name="Midtones" xml:space="preserve">
+    <value>ミッドトーン</value>
+  </data>
+  <data name="Highlights" xml:space="preserve">
+    <value>ハイライト</value>
+  </data>
+  <data name="Lift" xml:space="preserve">
+    <value>リフト</value>
+  </data>
+  <data name="Gain" xml:space="preserve">
+    <value>ゲイン</value>
+  </data>
   <data name="Invert" xml:space="preserve">
     <value>反転</value>
   </data>
@@ -719,6 +791,9 @@
   <data name="Contrast" xml:space="preserve">
     <value>コントラスト</value>
   </data>
+  <data name="ContrastPivot" xml:space="preserve">
+    <value>コントラストのピボット</value>
+  </data>
   <data name="Addition" xml:space="preserve">
     <value>加算</value>
   </data>
@@ -1013,12 +1088,21 @@
   <data name="Blue" xml:space="preserve">
     <value>青</value>
   </data>
+  <data name="Master" xml:space="preserve">
+    <value>マスター</value>
+  </data>
   <data name="Hue" xml:space="preserve">
     <value>色相</value>
   </data>
+  <data name="Intensity" xml:space="preserve">
+    <value>強度</value>
+  </data>
   <data name="Saturation" xml:space="preserve">
     <value>彩度</value>
   </data>
+  <data name="Vibrance" xml:space="preserve">
+    <value>バイブランス</value>
+  </data>
   <data name="ShowSliders" xml:space="preserve">
     <value>スライダーを表示</value>
   </data>
@@ -1491,4 +1575,28 @@ PI: 数学定数 π（3.14159...）</value>
 GetProperty&lt;T&gt;("path") または GetProperty&lt;T&gt;(guid, "propertyName")
 例: GetProperty&lt;double&gt;("{GUID}.Opacity")</value>
   </data>
+  <data name="Histogram" xml:space="preserve">
+    <value>ヒストグラム</value>
+  </data>
+  <data name="Vectorscope" xml:space="preserve">
+    <value>ベクトルスコープ</value>
+  </data>
+  <data name="Waveform" xml:space="preserve">
+    <value>ウェーブフォーム</value>
+  </data>
+  <data name="Mode" xml:space="preserve">
+    <value>モード</value>
+  </data>
+  <data name="Luma" xml:space="preserve">
+    <value>輝度</value>
+  </data>
+  <data name="RgbOverlay" xml:space="preserve">
+    <value>RGBオーバーレイ</value>
+  </data>
+  <data name="RgbParade" xml:space="preserve">
+    <value>RGBパレード</value>
+  </data>
+  <data name="ShowGrid" xml:space="preserve">
+    <value>グリッドを表示</value>
+  </data>
 </root>
diff --git a/src/Beutl.Language/Strings.resx b/src/Beutl.Language/Strings.resx
index 8a3e46bcb..11ef0c2a2 100644
--- a/src/Beutl.Language/Strings.resx
+++ b/src/Beutl.Language/Strings.resx
@@ -120,6 +120,36 @@
   <data name="File" xml:space="preserve">
     <value>File</value>
   </data>
+  <data name="BlueCurve" xml:space="preserve">
+    <value>Blue curve</value>
+  </data>
+  <data name="Curves" xml:space="preserve">
+    <value>Curves</value>
+  </data>
+  <data name="CustomCurve" xml:space="preserve">
+    <value>Custom (RGB)</value>
+  </data>
+  <data name="GreenCurve" xml:space="preserve">
+    <value>Green curve</value>
+  </data>
+  <data name="HueVsHue" xml:space="preserve">
+    <value>Hue vs Hue</value>
+  </data>
+  <data name="HueVsLuminance" xml:space="preserve">
+    <value>Hue vs Luminance</value>
+  </data>
+  <data name="HueVsSaturation" xml:space="preserve">
+    <value>Hue vs Saturation</value>
+  </data>
+  <data name="LuminanceVsSaturation" xml:space="preserve">
+    <value>Luminance vs Saturation</value>
+  </data>
+  <data name="RedCurve" xml:space="preserve">
+    <value>Red curve</value>
+  </data>
+  <data name="SaturationVsSaturation" xml:space="preserve">
+    <value>Saturation vs Saturation</value>
+  </data>
   <data name="CreateNew" xml:space="preserve">
     <value>Create New</value>
   </data>
@@ -141,6 +171,9 @@
   <data name="Close" xml:space="preserve">
     <value>Close</value>
   </data>
+  <data name="ColorScopes" xml:space="preserve">
+    <value>Scopes</value>
+  </data>
   <data name="CloseProject" xml:space="preserve">
     <value>Close Project</value>
   </data>
@@ -687,6 +720,45 @@
   <data name="Gamma" xml:space="preserve">
     <value>Gamma</value>
   </data>
+  <data name="ColorGrading" xml:space="preserve">
+    <value>Color Grading</value>
+  </data>
+  <data name="ColorGrading_Missing" xml:space="preserve">
+    <value>No Color Grading effect is selected.</value>
+  </data>
+  <data name="ColorCurves_Missing" xml:space="preserve">
+    <value>No Color Curves effect is selected.</value>
+  </data>
+  <data name="Temperature" xml:space="preserve">
+    <value>Temperature</value>
+  </data>
+  <data name="Tint" xml:space="preserve">
+    <value>Tint</value>
+  </data>
+  <data name="Exposure" xml:space="preserve">
+    <value>Exposure</value>
+  </data>
+  <data name="LowRange" xml:space="preserve">
+    <value>Low Range</value>
+  </data>
+  <data name="HighRange" xml:space="preserve">
+    <value>High Range</value>
+  </data>
+  <data name="Shadows" xml:space="preserve">
+    <value>Shadows</value>
+  </data>
+  <data name="Midtones" xml:space="preserve">
+    <value>Midtones</value>
+  </data>
+  <data name="Highlights" xml:space="preserve">
+    <value>Highlights</value>
+  </data>
+  <data name="Lift" xml:space="preserve">
+    <value>Lift</value>
+  </data>
+  <data name="Gain" xml:space="preserve">
+    <value>Gain</value>
+  </data>
   <data name="Invert" xml:space="preserve">
     <value>Invert</value>
   </data>
@@ -714,6 +786,9 @@
   <data name="Contrast" xml:space="preserve">
     <value>Contrast</value>
   </data>
+  <data name="ContrastPivot" xml:space="preserve">
+    <value>Contrast Pivot</value>
+  </data>
   <data name="Addition" xml:space="preserve">
     <value>Addition</value>
   </data>
@@ -1008,12 +1083,21 @@
   <data name="Blue" xml:space="preserve">
     <value>Blue</value>
   </data>
+  <data name="Master" xml:space="preserve">
+    <value>Master</value>
+  </data>
   <data name="Hue" xml:space="preserve">
     <value>Hue</value>
   </data>
+  <data name="Intensity" xml:space="preserve">
+    <value>Intensity</value>
+  </data>
   <data name="Saturation" xml:space="preserve">
     <value>Saturation</value>
   </data>
+  <data name="Vibrance" xml:space="preserve">
+    <value>Vibrance</value>
+  </data>
   <data name="ShowSliders" xml:space="preserve">
     <value>Show sliders</value>
   </data>
@@ -1486,4 +1570,28 @@ Random: Random(seed), Random(seed, min, max), FrameRandom(), FrameRandom(min, ma
 GetProperty&lt;T&gt;("path") or GetProperty&lt;T&gt;(guid, "propertyName")
 Example: GetProperty&lt;double&gt;("{GUID}.Opacity")</value>
   </data>
+  <data name="Histogram" xml:space="preserve">
+    <value>Histogram</value>
+  </data>
+  <data name="Vectorscope" xml:space="preserve">
+    <value>Vectorscope</value>
+  </data>
+  <data name="Waveform" xml:space="preserve">
+    <value>Waveform</value>
+  </data>
+  <data name="Mode" xml:space="preserve">
+    <value>Mode</value>
+  </data>
+  <data name="Luma" xml:space="preserve">
+    <value>Luma</value>
+  </data>
+  <data name="RgbOverlay" xml:space="preserve">
+    <value>RGB Overlay</value>
+  </data>
+  <data name="RgbParade" xml:space="preserve">
+    <value>RGB Parade</value>
+  </data>
+  <data name="ShowGrid" xml:space="preserve">
+    <value>Show Grid</value>
+  </data>
 </root>
diff --git a/src/Beutl.Operators/LibraryRegistrar.cs b/src/Beutl.Operators/LibraryRegistrar.cs
index a5e12f2d4..f2cd23401 100644
--- a/src/Beutl.Operators/LibraryRegistrar.cs
+++ b/src/Beutl.Operators/LibraryRegistrar.cs
@@ -132,6 +132,8 @@ public static void RegisterAll()
                 .AddFilterEffect<Threshold>(Strings.Threshold)
                 .AddFilterEffect<Brightness>(Strings.Brightness)
                 .AddFilterEffect<Gamma>(Strings.Gamma)
+                .AddFilterEffect<ColorGrading>(Strings.ColorGrading)
+                .AddFilterEffect<Curves>(Strings.Curves)
                 .AddFilterEffect<Invert>(Strings.Invert)
                 .AddFilterEffect<LutEffect>(Strings.LUT_Cube_File)
                 .AddFilterEffect<BlendEffect>(Strings.BlendEffect)
diff --git a/src/Beutl/Services/PrimitiveImpls/ColorGradingPropertiesExtension.cs b/src/Beutl/Services/PrimitiveImpls/ColorGradingPropertiesExtension.cs
new file mode 100644
index 000000000..bd5e95aa0
--- /dev/null
+++ b/src/Beutl/Services/PrimitiveImpls/ColorGradingPropertiesExtension.cs
@@ -0,0 +1,50 @@
+using System.Diagnostics.CodeAnalysis;
+using Avalonia.Controls;
+using Beutl.Graphics.Effects;
+using Beutl.ViewModels.Editors;
+using Beutl.Views.Editors;
+
+namespace Beutl.Services.PrimitiveImpls;
+
+[PrimitiveImpl]
+public sealed class ColorGradingPropertiesExtension : PropertyEditorExtension
+{
+    public static readonly ColorGradingPropertiesExtension Instance = new();
+
+    public override IEnumerable<IPropertyAdapter> MatchProperty(IReadOnlyList<IPropertyAdapter> properties)
+    {
+        try
+        {
+            var colorGradingProps = properties.Where(p => p.ImplementedType == typeof(ColorGrading)).ToArray();
+            if (colorGradingProps.Length > 1)
+            {
+                return colorGradingProps;
+            }
+        }
+        catch
+        {
+        }
+
+        return [];
+    }
+
+    public override bool TryCreateContext(IReadOnlyList<IPropertyAdapter> properties,
+        [NotNullWhen(true)] out IPropertyEditorContext? context)
+    {
+        if (properties.Count <= 1
+            || properties[0].ImplementedType != typeof(ColorGrading))
+        {
+            context = null;
+            return false;
+        }
+
+        context = new ColorGradingPropertiesViewModel(properties);
+        return true;
+    }
+
+    public override bool TryCreateControl(IPropertyEditorContext context, [NotNullWhen(true)] out Control? control)
+    {
+        control = new ColorGradingPropertiesEditor();
+        return true;
+    }
+}
diff --git a/src/Beutl/Services/PrimitiveImpls/ColorGradingTabExtension.cs b/src/Beutl/Services/PrimitiveImpls/ColorGradingTabExtension.cs
new file mode 100644
index 000000000..3d20dde20
--- /dev/null
+++ b/src/Beutl/Services/PrimitiveImpls/ColorGradingTabExtension.cs
@@ -0,0 +1,58 @@
+using System.Diagnostics.CodeAnalysis;
+
+using Avalonia.Controls;
+using Beutl.ViewModels;
+using Beutl.ViewModels.Tools;
+using Beutl.Views.Tools;
+using FluentAvalonia.UI.Controls;
+using SymbolIconSource = FluentIcons.FluentAvalonia.SymbolIconSource;
+using Symbol = FluentIcons.Common.Symbol;
+
+namespace Beutl.Services.PrimitiveImpls;
+
+[PrimitiveImpl]
+public sealed class ColorGradingTabExtension : ToolTabExtension
+{
+    public static readonly ColorGradingTabExtension Instance = new();
+
+    public override bool CanMultiple => true;
+
+    public override string Name => "Color Grading Tab";
+
+    public override string DisplayName => Strings.ColorGrading;
+
+    public override string Header => Strings.ColorGrading;
+
+    public override IconSource GetIcon()
+    {
+        return new SymbolIconSource { Symbol = Symbol.ColorBackground };
+    }
+
+    public override bool TryCreateContent(IEditorContext editorContext, [NotNullWhen(true)] out Control? control)
+    {
+        if (editorContext is EditViewModel)
+        {
+            control = new ColorGradingTab();
+            return true;
+        }
+        else
+        {
+            control = null;
+            return false;
+        }
+    }
+
+    public override bool TryCreateContext(IEditorContext editorContext, [NotNullWhen(true)] out IToolContext? context)
+    {
+        if (editorContext is EditViewModel editViewModel)
+        {
+            context = new ColorGradingTabViewModel(editViewModel);
+            return true;
+        }
+        else
+        {
+            context = null;
+            return false;
+        }
+    }
+}
diff --git a/src/Beutl/Services/PrimitiveImpls/ColorScopesTabExtension.cs b/src/Beutl/Services/PrimitiveImpls/ColorScopesTabExtension.cs
new file mode 100644
index 000000000..0172eb4d7
--- /dev/null
+++ b/src/Beutl/Services/PrimitiveImpls/ColorScopesTabExtension.cs
@@ -0,0 +1,58 @@
+using System.Diagnostics.CodeAnalysis;
+using Avalonia.Controls;
+using Avalonia.Media;
+using Beutl.ViewModels;
+using Beutl.ViewModels.Tools;
+using Beutl.Views.Tools;
+using FluentAvalonia.UI.Controls;
+using SymbolIconSource = FluentIcons.FluentAvalonia.SymbolIconSource;
+using Symbol = FluentIcons.Common.Symbol;
+
+namespace Beutl.Services.PrimitiveImpls;
+
+[PrimitiveImpl]
+public sealed class ColorScopesTabExtension : ToolTabExtension
+{
+    public static readonly ColorScopesTabExtension Instance = new();
+
+    public override bool CanMultiple => true;
+
+    public override string Name => "Color Scopes Tab";
+
+    public override string DisplayName => Strings.ColorScopes;
+
+    public override string Header => Strings.ColorScopes;
+
+    public override IconSource GetIcon()
+    {
+        return new SymbolIconSource { Symbol = Symbol.Microscope };
+    }
+
+    public override bool TryCreateContent(IEditorContext editorContext, [NotNullWhen(true)] out Control? control)
+    {
+        if (editorContext is EditViewModel)
+        {
+            control = new ColorScopesTab();
+            return true;
+        }
+        else
+        {
+            control = null;
+            return false;
+        }
+    }
+
+    public override bool TryCreateContext(IEditorContext editorContext, [NotNullWhen(true)] out IToolContext? context)
+    {
+        if (editorContext is EditViewModel editViewModel)
+        {
+            context = new ColorScopesTabViewModel(editViewModel);
+            return true;
+        }
+        else
+        {
+            context = null;
+            return false;
+        }
+    }
+}
diff --git a/src/Beutl/Services/PrimitiveImpls/CurvesTabExtension.cs b/src/Beutl/Services/PrimitiveImpls/CurvesTabExtension.cs
new file mode 100644
index 000000000..03e57e63a
--- /dev/null
+++ b/src/Beutl/Services/PrimitiveImpls/CurvesTabExtension.cs
@@ -0,0 +1,58 @@
+using System.Diagnostics.CodeAnalysis;
+
+using Avalonia.Controls;
+using Beutl.ViewModels;
+using Beutl.ViewModels.Tools;
+using Beutl.Views.Tools;
+using FluentAvalonia.UI.Controls;
+using SymbolIconSource = FluentIcons.FluentAvalonia.SymbolIconSource;
+using Symbol = FluentIcons.Common.Symbol;
+
+namespace Beutl.Services.PrimitiveImpls;
+
+[PrimitiveImpl]
+public sealed class CurvesTabExtension : ToolTabExtension
+{
+    public static readonly CurvesTabExtension Instance = new();
+
+    public override bool CanMultiple => true;
+
+    public override string Name => "Curves Tab";
+
+    public override string DisplayName => Strings.Curves;
+
+    public override string Header => Strings.Curves;
+
+    public override IconSource GetIcon()
+    {
+        return new SymbolIconSource { Symbol = Symbol.Edit };
+    }
+
+    public override bool TryCreateContent(IEditorContext editorContext, [NotNullWhen(true)] out Control? control)
+    {
+        if (editorContext is EditViewModel)
+        {
+            control = new CurvesTab();
+            return true;
+        }
+        else
+        {
+            control = null;
+            return false;
+        }
+    }
+
+    public override bool TryCreateContext(IEditorContext editorContext, [NotNullWhen(true)] out IToolContext? context)
+    {
+        if (editorContext is EditViewModel editViewModel)
+        {
+            context = new CurvesTabViewModel(editViewModel);
+            return true;
+        }
+        else
+        {
+            context = null;
+            return false;
+        }
+    }
+}
diff --git a/src/Beutl/Services/PropertyEditorService.cs b/src/Beutl/Services/PropertyEditorService.cs
index 212c5c783..7f20d942b 100644
--- a/src/Beutl/Services/PropertyEditorService.cs
+++ b/src/Beutl/Services/PropertyEditorService.cs
@@ -179,6 +179,7 @@ private record struct ListItemEditor(Func<IPropertyAdapter, IListItemEditor?> Cr
             new(typeof(FileInfo), new(_ => new StorageFileEditor(), s => new StorageFileEditorViewModel(s.ToTyped<FileInfo>()))),
 
             new(typeof(Color), new(_ => new ColorEditor(), s => new ColorEditorViewModel(s.ToTyped<Color>()))),
+            new(typeof(GradingColor), new(_ => new GradingColorEditor(), s => new GradingColorEditorViewModel(s.ToTyped<GradingColor>()))),
 
             new(typeof(Point), new(_ => new Vector2Editor<float>(), s => new PointEditorViewModel(s.ToTyped<Point>()))),
             new(typeof(Size), new(_ => new Vector2Editor<float>(), s => new SizeEditorViewModel(s.ToTyped<Size>()))),
@@ -207,6 +208,7 @@ private record struct ListItemEditor(Func<IPropertyAdapter, IListItemEditor?> Cr
             new(typeof(Geometry), new(_ => new GeometryEditor(), s => new GeometryEditorViewModel(s.ToTyped<Geometry?>()))),
             new(typeof(AudioEffect), new(_ => new AudioEffectEditor(), s => new AudioEffectEditorViewModel(s.ToTyped<AudioEffect?>()))),
             new(typeof(Transform), new(_ => new TransformEditor(), s => new TransformEditorViewModel(s.ToTyped<Transform?>()))),
+            new(typeof(CurveMap), new(_ => new CurveMapEditor(), s => new CurveMapEditorViewModel(s.ToTyped<CurveMap>()))),
             new(typeof(ICoreList<GradientStop>), new(_ => new GradientStopsEditor(), s => new GradientStopsEditorViewModel(s.ToTyped<ICoreList<GradientStop>>()))),
             new(typeof(DisplacementMapTransform), new(_ => new DisplacementMapTransformEditor(), s => new DisplacementMapTransformEditorViewModel(s.ToTyped<DisplacementMapTransform?>()))),
             new(typeof(IList), new(CreateListEditor, CreateListEditorViewModel)),
diff --git a/src/Beutl/Services/StartupTasks/LoadPrimitiveExtensionTask.cs b/src/Beutl/Services/StartupTasks/LoadPrimitiveExtensionTask.cs
index 0e5e6c343..b22df57f3 100644
--- a/src/Beutl/Services/StartupTasks/LoadPrimitiveExtensionTask.cs
+++ b/src/Beutl/Services/StartupTasks/LoadPrimitiveExtensionTask.cs
@@ -27,7 +27,11 @@ public sealed class LoadPrimitiveExtensionTask : StartupTask
         LibraryTabExtension.Instance,
         AnimatedImageReaderExtension.Instance,
         AnimatedPngReaderExtension.Instance,
-        MainViewExtension.Instance
+        MainViewExtension.Instance,
+        ColorScopesTabExtension.Instance,
+        ColorGradingTabExtension.Instance,
+        CurvesTabExtension.Instance,
+        ColorGradingPropertiesExtension.Instance
     ];
 
     public LoadPrimitiveExtensionTask(PackageManager manager)
diff --git a/src/Beutl/ViewModels/Editors/ColorGradingPropertiesViewModel.cs b/src/Beutl/ViewModels/Editors/ColorGradingPropertiesViewModel.cs
new file mode 100644
index 000000000..292681cbf
--- /dev/null
+++ b/src/Beutl/ViewModels/Editors/ColorGradingPropertiesViewModel.cs
@@ -0,0 +1,137 @@
+using System.Text.Json.Nodes;
+using Beutl.Graphics.Effects;
+using Beutl.Operation;
+using Beutl.Services;
+using Beutl.Services.PrimitiveImpls;
+using Microsoft.Extensions.DependencyInjection;
+using Reactive.Bindings;
+
+namespace Beutl.ViewModels.Editors;
+
+public class ColorGradingPropertiesViewModel : IPropertyEditorContext, IServiceProvider
+{
+    private readonly IReadOnlyList<IPropertyAdapter> _props;
+    private EditViewModel? _editViewModel;
+    private IServiceProvider? _parentServices;
+
+    public ColorGradingPropertiesViewModel(IReadOnlyList<IPropertyAdapter> props)
+    {
+        _props = props;
+        Properties.EnsureCapacity(props.Count);
+        foreach (IPropertyAdapter prop in props)
+        {
+            (IPropertyAdapter[]? foundItems, PropertyEditorExtension? extension) =
+                PropertyEditorService.MatchProperty([prop]);
+            if (foundItems == null || extension == null) continue;
+
+            if (extension.TryCreateContext(foundItems, out IPropertyEditorContext? context))
+            {
+                Properties.Add(context);
+            }
+        }
+    }
+
+    public PropertyEditorExtension Extension => ColorGradingPropertiesExtension.Instance;
+
+    public ReactivePropertySlim<bool> IsExpanded { get; } = new(false);
+
+    public CoreList<IPropertyEditorContext> Properties { get; } = [];
+
+    public ColorGrading? TryGetColorGrading()
+    {
+        if(_props.Count == 0) return null;
+        return _props[0].GetEngineProperty()?.GetOwnerObject() as ColorGrading;
+    }
+
+    public object? GetService(Type serviceType)
+    {
+        return _parentServices?.GetService(serviceType);
+    }
+
+    private void AcceptChildren()
+    {
+        var visitor = new Visitor(this);
+        foreach (IPropertyEditorContext item in Properties)
+        {
+            item.Accept(visitor);
+        }
+    }
+
+    public void Accept(IPropertyEditorContextVisitor visitor)
+    {
+        visitor.Visit(this);
+        if (visitor is IServiceProvider serviceProvider)
+        {
+            _parentServices = serviceProvider;
+            _editViewModel = serviceProvider.GetService<EditViewModel>();
+        }
+
+        if (visitor is IServiceProvider)
+        {
+            AcceptChildren();
+        }
+    }
+
+    public void ReadFromJson(JsonObject json)
+    {
+        if (json.TryGetPropertyValue(nameof(IsExpanded), out JsonNode? isExpandedNode)
+            && isExpandedNode is JsonValue isExpanded)
+        {
+            IsExpanded.Value = (bool)isExpanded;
+        }
+
+        if (json.TryGetPropertyValue(nameof(Properties), out JsonNode? propsNode)
+            && propsNode is JsonArray propsArray)
+        {
+            foreach ((JsonNode? node, IPropertyEditorContext? context) in propsArray.Zip(Properties))
+            {
+                if (node != null)
+                {
+                    context.ReadFromJson(node.AsObject());
+                }
+            }
+        }
+    }
+
+    public void WriteToJson(JsonObject json)
+    {
+        try
+        {
+            json[nameof(IsExpanded)] = IsExpanded.Value;
+            var array = new JsonArray();
+
+            foreach (IPropertyEditorContext? item in Properties.GetMarshal().Value)
+            {
+                var node = new JsonObject();
+                item.WriteToJson(node);
+                array.Add(node);
+            }
+
+            json[nameof(Properties)] = array;
+        }
+        catch
+        {
+        }
+    }
+
+    public void Dispose()
+    {
+        IsExpanded.Dispose();
+        foreach (IPropertyEditorContext item in Properties)
+        {
+            item.Dispose();
+        }
+    }
+
+    private sealed record Visitor(ColorGradingPropertiesViewModel Obj) : IServiceProvider, IPropertyEditorContextVisitor
+    {
+        public object? GetService(Type serviceType)
+        {
+            return Obj._parentServices?.GetService(serviceType);
+        }
+
+        public void Visit(IPropertyEditorContext context)
+        {
+        }
+    }
+}
diff --git a/src/Beutl/ViewModels/Editors/CurveMapEditorViewModel.cs b/src/Beutl/ViewModels/Editors/CurveMapEditorViewModel.cs
new file mode 100644
index 000000000..5a7e3cb7c
--- /dev/null
+++ b/src/Beutl/ViewModels/Editors/CurveMapEditorViewModel.cs
@@ -0,0 +1,13 @@
+using Beutl.Graphics;
+using Beutl.Graphics.Effects;
+
+namespace Beutl.ViewModels.Editors;
+
+public sealed class CurveMapEditorViewModel(IPropertyAdapter<CurveMap> property)
+    : ValueEditorViewModel<CurveMap>(property)
+{
+    public Curves? TryGetCurves()
+    {
+        return PropertyAdapter.GetEngineProperty()?.GetOwnerObject() as Curves;
+    }
+}
diff --git a/src/Beutl/ViewModels/Editors/GradingColorEditorViewModel.cs b/src/Beutl/ViewModels/Editors/GradingColorEditorViewModel.cs
new file mode 100644
index 000000000..2a25123cb
--- /dev/null
+++ b/src/Beutl/ViewModels/Editors/GradingColorEditorViewModel.cs
@@ -0,0 +1,65 @@
+using Avalonia;
+using Avalonia.Interactivity;
+
+using Beutl.Controls.PropertyEditors;
+using Beutl.Media;
+
+using Reactive.Bindings;
+using Reactive.Bindings.Extensions;
+
+namespace Beutl.ViewModels.Editors;
+
+public sealed class GradingColorEditorViewModel : ValueEditorViewModel<GradingColor>, IConfigureLivePreview
+{
+    public GradingColorEditorViewModel(IPropertyAdapter<GradingColor> property)
+        : base(property)
+    {
+    }
+
+    public ReactivePropertySlim<bool> IsLivePreviewEnabled { get; } = new(true);
+
+    public override void Accept(IPropertyEditorContextVisitor visitor)
+    {
+        base.Accept(visitor);
+        if (visitor is GradingColorEditor editor && !Disposables.IsDisposed)
+        {
+            editor.Bind(GradingColorEditor.ValueProperty, Value.ToBinding())
+                .DisposeWith(Disposables);
+            editor.Bind(GradingColorEditor.IsLivePreviewEnabledProperty, IsLivePreviewEnabled.ToBinding())
+                .DisposeWith(Disposables);
+            editor.AddDisposableHandler(PropertyEditor.ValueConfirmedEvent, OnValueConfirmed)
+                .DisposeWith(Disposables);
+            editor.AddDisposableHandler(PropertyEditor.ValueChangedEvent, OnValueChanged)
+                .DisposeWith(Disposables);
+        }
+        if (visitor is ColorGradingWheel wheel && !Disposables.IsDisposed)
+        {
+            wheel.Bind(ColorGradingWheel.ColorProperty, Value.ToBinding())
+                .DisposeWith(Disposables);
+            wheel.AddDisposableHandler(PropertyEditor.ValueConfirmedEvent, OnValueConfirmed)
+                .DisposeWith(Disposables);
+            wheel.AddDisposableHandler(PropertyEditor.ValueChangedEvent, OnValueChanged)
+                .DisposeWith(Disposables);
+        }
+    }
+
+    private void OnValueChanged(object? sender, PropertyEditorValueChangedEventArgs e)
+    {
+        if (sender is GradingColorEditor editor)
+        {
+            editor.Value = SetCurrentValueAndGetCoerced(editor.Value);
+        }
+        else if (sender is ColorGradingWheel wheel)
+        {
+            wheel.Color = SetCurrentValueAndGetCoerced(wheel.Color);
+        }
+    }
+
+    private void OnValueConfirmed(object? sender, PropertyEditorValueChangedEventArgs e)
+    {
+        if (e is PropertyEditorValueChangedEventArgs<GradingColor> args)
+        {
+            SetValue(args.OldValue, args.NewValue);
+        }
+    }
+}
diff --git a/src/Beutl/ViewModels/Tools/ColorGradingTabViewModel.cs b/src/Beutl/ViewModels/Tools/ColorGradingTabViewModel.cs
new file mode 100644
index 000000000..056576930
--- /dev/null
+++ b/src/Beutl/ViewModels/Tools/ColorGradingTabViewModel.cs
@@ -0,0 +1,269 @@
+using System.Text.Json.Nodes;
+using Beutl.Editor;
+using Beutl.Engine;
+using Beutl.Graphics.Effects;
+using Beutl.Media;
+using Beutl.Operation;
+using Beutl.ProjectSystem;
+using Beutl.Services.PrimitiveImpls;
+using Beutl.ViewModels.Editors;
+using Reactive.Bindings;
+
+namespace Beutl.ViewModels.Tools;
+
+public record ColorGradingWheelMode(string Name, int Value)
+{
+    public static readonly ColorGradingWheelMode ShadowsMidtonesHighlights =
+        new($"{Strings.Shadows} / {Strings.Midtones} / {Strings.Highlights}", 0);
+
+    public static readonly ColorGradingWheelMode LiftGammaGainOffset =
+        new($"{Strings.Lift} / {Strings.Gamma} / {Strings.Gain} / {Strings.Offset}", 1);
+}
+
+public sealed class ColorGradingTabViewModel : IToolContext, IPropertyEditorContextVisitor
+{
+    private readonly CompositeDisposable _disposables = [];
+    private readonly EditViewModel _editViewModel;
+    private readonly CompositeDisposable _effectDisposables = [];
+
+    public ColorGradingTabViewModel(EditViewModel editViewModel)
+    {
+        _editViewModel = editViewModel;
+
+        Effect.Subscribe(SetEditors)
+            .DisposeWith(_disposables);
+
+        HasColorGrading = Effect
+            .Select(x => x != null)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        IsLogMode = WheelMode
+            .Select(v => v == ColorGradingWheelMode.ShadowsMidtonesHighlights)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        IsLiftGammaGainMode = WheelMode
+            .Select(v => v == ColorGradingWheelMode.LiftGammaGainOffset)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        IsColorGradingMissing = HasColorGrading
+            .Select(v => !v)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+    }
+
+    public string Header => Strings.ColorGrading;
+
+    public ToolTabExtension Extension => ColorGradingTabExtension.Instance;
+
+    public IReactiveProperty<bool> IsSelected { get; } = new ReactiveProperty<bool>();
+
+    public IReactiveProperty<ToolTabExtension.TabPlacement> Placement { get; } =
+        new ReactivePropertySlim<ToolTabExtension.TabPlacement>(ToolTabExtension.TabPlacement.RightLowerBottom);
+
+    public IReactiveProperty<ToolTabExtension.TabDisplayMode> DisplayMode { get; } =
+        new ReactivePropertySlim<ToolTabExtension.TabDisplayMode>();
+
+    public ReadOnlyReactivePropertySlim<bool> HasColorGrading { get; }
+
+    public ReactivePropertySlim<ColorGrading?> Effect { get; } = new();
+
+    public ReactivePropertySlim<ColorGradingWheelMode> WheelMode { get; } =
+        new(ColorGradingWheelMode.ShadowsMidtonesHighlights);
+
+    public ReactivePropertySlim<bool> IsNumberEditorsVisible { get; } = new(true);
+
+    public ColorGradingWheelMode[] AvailableWheelModes { get; } =
+    [
+        ColorGradingWheelMode.ShadowsMidtonesHighlights,
+        ColorGradingWheelMode.LiftGammaGainOffset
+    ];
+
+    public ReadOnlyReactivePropertySlim<bool> IsLogMode { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> IsLiftGammaGainMode { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> IsColorGradingMissing { get; }
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> TemperatureEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> TintEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> ExposureEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> ContrastEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> ContrastPivotEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> SaturationEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> VibranceEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> HueEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> LowRangeEditor { get; } = new();
+
+    public ReactivePropertySlim<NumberEditorViewModel<float>?> HighRangeEditor { get; } = new();
+
+    public ReactivePropertySlim<GradingColorEditorViewModel?> ShadowsEditor { get; } = new();
+
+    public ReactivePropertySlim<GradingColorEditorViewModel?> MidtonesEditor { get; } = new();
+
+    public ReactivePropertySlim<GradingColorEditorViewModel?> HighlightsEditor { get; } = new();
+
+    public ReactivePropertySlim<GradingColorEditorViewModel?> LiftEditor { get; } = new();
+
+    public ReactivePropertySlim<GradingColorEditorViewModel?> GammaEditor { get; } = new();
+
+    public ReactivePropertySlim<GradingColorEditorViewModel?> GainEditor { get; } = new();
+
+    public ReactivePropertySlim<GradingColorEditorViewModel?> OffsetEditor { get; } = new();
+
+    public void Visit(IPropertyEditorContext context)
+    {
+    }
+
+    public object? GetService(Type serviceType)
+    {
+        if (serviceType == typeof(EditViewModel))
+            return _editViewModel;
+
+        if (serviceType == typeof(HistoryManager))
+            return _editViewModel.HistoryManager;
+
+        if (serviceType == typeof(Element))
+            return Effect.Value?.FindHierarchicalParent<Element>();
+
+        if (serviceType == typeof(ColorGrading))
+            return Effect.Value;
+
+        if (serviceType == typeof(Scene))
+            return _editViewModel.Scene;
+
+        return _editViewModel.GetService(serviceType);
+    }
+
+    public void Dispose()
+    {
+        ClearEditors();
+        _disposables.Dispose();
+    }
+
+    public void ReadFromJson(JsonObject json)
+    {
+        if (json.TryGetPropertyValue("wheelMode", out var wheelModeNode)
+            && wheelModeNode is JsonValue wheelModeValue
+            && wheelModeValue.TryGetValue(out int mode))
+        {
+            WheelMode.Value = AvailableWheelModes.FirstOrDefault(i => i.Value == mode) ?? WheelMode.Value;
+        }
+
+        if (json.TryGetPropertyValue("effectId", out var effectIdNode)
+            && effectIdNode is JsonValue effectIdValue
+            && effectIdValue.TryGetValue(out string? effectIdStr)
+            && Guid.TryParse(effectIdStr, out Guid effectId))
+        {
+            var colorGrading = _editViewModel.Scene.FindById(effectId) as ColorGrading;
+            Effect.Value = colorGrading;
+        }
+
+        if (json.TryGetPropertyValue("isNumberEditorsVisible", out var isNumberEditorsVisibleNode)
+            && isNumberEditorsVisibleNode is JsonValue isNumberEditorsVisibleValue
+            && isNumberEditorsVisibleValue.TryGetValue(out bool isVisible))
+        {
+            IsNumberEditorsVisible.Value = isVisible;
+        }
+    }
+
+    public void WriteToJson(JsonObject json)
+    {
+        json["wheelMode"] = WheelMode.Value.Value;
+        json["effectId"] = Effect.Value?.Id;
+        json["isNumberEditorsVisible"] = IsNumberEditorsVisible.Value;
+    }
+
+    private void SetEditors(ColorGrading? effect)
+    {
+        ClearEditors();
+
+        if (effect == null)
+            return;
+
+        TemperatureEditor.Value = CreateNumberEditor(effect.Temperature);
+        TintEditor.Value = CreateNumberEditor(effect.Tint);
+        ExposureEditor.Value = CreateNumberEditor(effect.Exposure);
+        ContrastEditor.Value = CreateNumberEditor(effect.Contrast);
+        ContrastPivotEditor.Value = CreateNumberEditor(effect.ContrastPivot);
+        SaturationEditor.Value = CreateNumberEditor(effect.Saturation);
+        VibranceEditor.Value = CreateNumberEditor(effect.Vibrance);
+        HueEditor.Value = CreateNumberEditor(effect.Hue);
+        LowRangeEditor.Value = CreateNumberEditor(effect.LowRange);
+        HighRangeEditor.Value = CreateNumberEditor(effect.HighRange);
+
+        ShadowsEditor.Value = CreateColorEditor(effect.Shadows);
+        MidtonesEditor.Value = CreateColorEditor(effect.Midtones);
+        HighlightsEditor.Value = CreateColorEditor(effect.Highlights);
+        LiftEditor.Value = CreateColorEditor(effect.Lift);
+        GammaEditor.Value = CreateColorEditor(effect.Gamma);
+        GainEditor.Value = CreateColorEditor(effect.Gain);
+        OffsetEditor.Value = CreateColorEditor(effect.Offset);
+
+        effect.DetachedFromHierarchy += OnEffectDetached;
+        _effectDisposables.Add(Disposable.Create(() => effect.DetachedFromHierarchy -= OnEffectDetached));
+    }
+
+    private void OnEffectDetached(object? sender, HierarchyAttachmentEventArgs e)
+    {
+        Effect.Value = null;
+    }
+
+    private NumberEditorViewModel<float>? CreateNumberEditor(IProperty<float> property)
+    {
+        if (property is not AnimatableProperty<float> anim)
+            return null;
+
+        var adapter = new AnimatablePropertyAdapter<float>(anim, Effect.Value!);
+        var vm = new NumberEditorViewModel<float>(adapter);
+        vm.Accept(this);
+        _effectDisposables.Add(vm);
+        return vm;
+    }
+
+    private GradingColorEditorViewModel? CreateColorEditor(IProperty<GradingColor> property)
+    {
+        if (property is not AnimatableProperty<GradingColor> anim)
+            return null;
+
+        var adapter = new AnimatablePropertyAdapter<GradingColor>(anim, Effect.Value!);
+        var vm = new GradingColorEditorViewModel(adapter);
+        vm.Accept(this);
+        _effectDisposables.Add(vm);
+        return vm;
+    }
+
+    private void ClearEditors()
+    {
+        TemperatureEditor.Value = null;
+        TintEditor.Value = null;
+        ExposureEditor.Value = null;
+        ContrastEditor.Value = null;
+        ContrastPivotEditor.Value = null;
+        SaturationEditor.Value = null;
+        VibranceEditor.Value = null;
+        HueEditor.Value = null;
+        LowRangeEditor.Value = null;
+        HighRangeEditor.Value = null;
+
+        ShadowsEditor.Value = null;
+        MidtonesEditor.Value = null;
+        HighlightsEditor.Value = null;
+        LiftEditor.Value = null;
+        GammaEditor.Value = null;
+        GainEditor.Value = null;
+        OffsetEditor.Value = null;
+
+        _effectDisposables.Clear();
+    }
+}
diff --git a/src/Beutl/ViewModels/Tools/ColorScopesTabViewModel.cs b/src/Beutl/ViewModels/Tools/ColorScopesTabViewModel.cs
new file mode 100644
index 000000000..b3d07a909
--- /dev/null
+++ b/src/Beutl/ViewModels/Tools/ColorScopesTabViewModel.cs
@@ -0,0 +1,115 @@
+using System.Text.Json.Nodes;
+using Avalonia.Media.Imaging;
+using Beutl.Services.PrimitiveImpls;
+using Beutl.Views.Tools.Scopes;
+using Reactive.Bindings;
+
+namespace Beutl.ViewModels.Tools;
+
+public enum ColorScopeType
+{
+    Waveform,
+    Histogram,
+    Vectorscope
+}
+
+public sealed class ColorScopesTabViewModel : IToolContext
+{
+    private readonly CompositeDisposable _disposables = [];
+    private readonly EditViewModel _editViewModel;
+
+    public ColorScopesTabViewModel(EditViewModel editViewModel)
+    {
+        _editViewModel = editViewModel;
+        SourceBitmap.Value = editViewModel.Player.PreviewImage.Value as WriteableBitmap;
+
+        // Update scope after rendering is complete
+        editViewModel.Player.AfterRendered.CombineLatest(IsSelected)
+            .Subscribe(_ =>
+            {
+                if (!IsSelected.Value) return;
+
+                SourceBitmap.Value = editViewModel.Player.PreviewImage.Value as WriteableBitmap;
+                RefreshRequested?.Invoke(this, EventArgs.Empty);
+            })
+            .DisposeWith(_disposables);
+
+        SelectedScopeType.Skip(1)
+            .Subscribe(_ => RefreshRequested?.Invoke(this, EventArgs.Empty))
+            .DisposeWith(_disposables);
+    }
+
+    public event EventHandler? RefreshRequested;
+
+    public string Header => Strings.ColorScopes;
+
+    public ToolTabExtension Extension => ColorScopesTabExtension.Instance;
+
+    public ReactivePropertySlim<ColorScopeType> SelectedScopeType { get; } = new(ColorScopeType.Waveform);
+
+    public ReactivePropertySlim<WriteableBitmap?> SourceBitmap { get; } = new();
+
+    // Waveform settings
+    public ReactivePropertySlim<WaveformMode> WaveformMode { get; } = new(Views.Tools.Scopes.WaveformMode.RgbOverlay);
+
+    // Histogram settings
+    public ReactivePropertySlim<HistogramMode> HistogramMode { get; } = new(Views.Tools.Scopes.HistogramMode.Parade);
+
+    public IReactiveProperty<bool> IsSelected { get; } = new ReactiveProperty<bool>();
+
+    public IReactiveProperty<ToolTabExtension.TabPlacement> Placement { get; } =
+        new ReactivePropertySlim<ToolTabExtension.TabPlacement>(ToolTabExtension.TabPlacement.RightUpperTop);
+
+    public IReactiveProperty<ToolTabExtension.TabDisplayMode> DisplayMode { get; } =
+        new ReactivePropertySlim<ToolTabExtension.TabDisplayMode>();
+
+    public void Dispose()
+    {
+        _disposables.Dispose();
+    }
+
+    public object? GetService(Type serviceType)
+    {
+        return null;
+    }
+
+    public void ReadFromJson(JsonObject json)
+    {
+        if (json.TryGetPropertyValue("scopeType", out var scopeTypeNode) && scopeTypeNode is JsonValue scopeTypeValue)
+        {
+            if (scopeTypeValue.TryGetValue(out int scopeType) && Enum.IsDefined(typeof(ColorScopeType), scopeType))
+            {
+                SelectedScopeType.Value = (ColorScopeType)scopeType;
+            }
+        }
+
+        // Waveform settings
+        if (json.TryGetPropertyValue("waveformMode", out var modeNode) && modeNode is JsonValue modeValue)
+        {
+            if (modeValue.TryGetValue(out int mode) && Enum.IsDefined(typeof(WaveformMode), mode))
+            {
+                WaveformMode.Value = (WaveformMode)mode;
+            }
+        }
+
+        // Histogram settings
+        if (json.TryGetPropertyValue("histogramMode", out var histogramModeNode) && histogramModeNode is JsonValue histogramModeValue)
+        {
+            if (histogramModeValue.TryGetValue(out int histogramMode) && Enum.IsDefined(typeof(HistogramMode), histogramMode))
+            {
+                HistogramMode.Value = (HistogramMode)histogramMode;
+            }
+        }
+    }
+
+    public void WriteToJson(JsonObject json)
+    {
+        json["scopeType"] = (int)SelectedScopeType.Value;
+
+        // Waveform settings
+        json["waveformMode"] = (int)WaveformMode.Value;
+
+        // Histogram settings
+        json["histogramMode"] = (int)HistogramMode.Value;
+    }
+}
diff --git a/src/Beutl/ViewModels/Tools/CurvePresenterViewModel.cs b/src/Beutl/ViewModels/Tools/CurvePresenterViewModel.cs
new file mode 100644
index 000000000..7096c06e6
--- /dev/null
+++ b/src/Beutl/ViewModels/Tools/CurvePresenterViewModel.cs
@@ -0,0 +1,87 @@
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+using Beutl.Editor;
+using Beutl.Engine;
+using Beutl.Graphics;
+using Beutl.Graphics.Effects;
+
+namespace Beutl.ViewModels.Tools;
+
+public sealed class CurvePresenterViewModel : IDisposable
+{
+    private readonly Curves _effect;
+    private readonly IProperty<CurveMap> _property;
+    private readonly HistoryManager _history;
+    private bool _isUpdating;
+
+    public CurvePresenterViewModel(string header, Curves effect, IProperty<CurveMap> property,
+        HistoryManager history)
+    {
+        Header = header;
+        _effect = effect;
+        _property = property;
+        _history = history;
+
+        Points = new ObservableCollection<CurveControlPoint>(_property.CurrentValue.Points);
+        Points.CollectionChanged += OnCollectionChanged;
+        _property.ValueChanged += OnPropertyChanged;
+    }
+
+    public string Header { get; }
+
+    public ObservableCollection<CurveControlPoint> Points { get; }
+
+    public void BeginEdit()
+    {
+    }
+
+    public void EndEdit()
+    {
+        _history.Commit(CommandNames.EditProperty);
+    }
+
+    // Viewからの変更を反映
+    private void OnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+    {
+        if (_isUpdating) return;
+
+        _isUpdating = true;
+        try
+        {
+            var map = new CurveMap(Points);
+            _property.CurrentValue = map;
+        }
+        finally
+        {
+            _isUpdating = false;
+        }
+    }
+
+    // Modelからの変更を反映
+    private void OnPropertyChanged(object? sender, PropertyValueChangedEventArgs<CurveMap> e)
+    {
+        if (_isUpdating) return;
+
+        _isUpdating = true;
+        try
+        {
+            Points.CollectionChanged -= OnCollectionChanged;
+            Points.Clear();
+            foreach (var point in _property.CurrentValue.Points)
+            {
+                Points.Add(point);
+            }
+            Points.CollectionChanged += OnCollectionChanged;
+        }
+        finally
+        {
+            _isUpdating = false;
+        }
+    }
+
+    public void Dispose()
+    {
+        Points.CollectionChanged -= OnCollectionChanged;
+        _property.ValueChanged -= OnPropertyChanged;
+    }
+}
diff --git a/src/Beutl/ViewModels/Tools/CurvesTabViewModel.cs b/src/Beutl/ViewModels/Tools/CurvesTabViewModel.cs
new file mode 100644
index 000000000..3018ac9cd
--- /dev/null
+++ b/src/Beutl/ViewModels/Tools/CurvesTabViewModel.cs
@@ -0,0 +1,424 @@
+using System.Text.Json.Nodes;
+
+using Beutl.Controls.Curves;
+using Beutl.Engine;
+using Beutl.Graphics;
+using Beutl.Graphics.Effects;
+using Beutl.ProjectSystem;
+using Beutl.Services.PrimitiveImpls;
+using Avalonia.Media.Imaging;
+using Beutl.Editor;
+using Reactive.Bindings;
+using Reactive.Bindings.Extensions;
+
+namespace Beutl.ViewModels.Tools;
+
+public enum CurveGroup
+{
+    Custom,
+    HueVsHue,
+    HueVsSaturation,
+    HueVsLuminance,
+    LuminanceVsSaturation,
+    SaturationVsSaturation,
+}
+
+public enum CustomCurveChannel
+{
+    Master,
+    Red,
+    Green,
+    Blue,
+}
+
+public record CurveGroupItem(CurveGroup Group, string DisplayName);
+
+public record CustomCurveChannelItem(CustomCurveChannel Channel, string DisplayName);
+
+public sealed class CurvesTabViewModel : IToolContext
+{
+    private readonly CompositeDisposable _disposables = [];
+    private readonly CompositeDisposable _effectDisposables = [];
+    private readonly EditViewModel _editViewModel;
+
+    public CurvesTabViewModel(EditViewModel editViewModel)
+    {
+        _editViewModel = editViewModel;
+
+        SourceBitmap.Value = editViewModel.Player.PreviewImage.Value as WriteableBitmap;
+
+        Effect.Subscribe(SetEditors)
+            .DisposeWith(_disposables);
+
+        editViewModel.Player.AfterRendered.CombineLatest(IsSelected)
+            .ObserveOnUIDispatcher()
+            .Subscribe(_ =>
+            {
+                if (!IsSelected.Value) return;
+
+                var bitmap = editViewModel.Player.PreviewImage.Value as WriteableBitmap;
+                if (ReferenceEquals(SourceBitmap.Value, bitmap))
+                {
+                    SourceBitmap.Value = null;
+                }
+
+                SourceBitmap.Value = bitmap;
+                UpdateHistogramForCurrentGroup();
+            })
+            .DisposeWith(_disposables);
+
+        HasCurves = Effect
+            .Select(x => x != null)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        IsCurvesMissing = HasCurves
+            .Select(v => !v)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        CurveGroups =
+        [
+            new CurveGroupItem(CurveGroup.Custom, Strings.CustomCurve),
+            new CurveGroupItem(CurveGroup.HueVsHue, Strings.HueVsHue),
+            new CurveGroupItem(CurveGroup.HueVsSaturation, Strings.HueVsSaturation),
+            new CurveGroupItem(CurveGroup.HueVsLuminance, Strings.HueVsLuminance),
+            new CurveGroupItem(CurveGroup.LuminanceVsSaturation, Strings.LuminanceVsSaturation),
+            new CurveGroupItem(CurveGroup.SaturationVsSaturation, Strings.SaturationVsSaturation),
+        ];
+
+        CustomCurveChannels =
+        [
+            new CustomCurveChannelItem(CustomCurveChannel.Master, Strings.Master),
+            new CustomCurveChannelItem(CustomCurveChannel.Red, Strings.Red),
+            new CustomCurveChannelItem(CustomCurveChannel.Green, Strings.Green),
+            new CustomCurveChannelItem(CustomCurveChannel.Blue, Strings.Blue),
+        ];
+
+        SelectedGroupItem = new ReactivePropertySlim<CurveGroupItem?>(CurveGroups.FirstOrDefault());
+        SelectedChannelItem = new ReactivePropertySlim<CustomCurveChannelItem?>(CustomCurveChannels.FirstOrDefault());
+
+        SelectedGroupItem
+            .Where(v => v != null)
+            .Select(v => v!.Group)
+            .Subscribe(group => SelectedGroup.Value = group)
+            .DisposeWith(_disposables);
+
+        SelectedGroup
+            .Subscribe(group =>
+            {
+                CurveGroupItem? item = CurveGroups.FirstOrDefault(v => v.Group == group);
+                if (!EqualityComparer<CurveGroupItem?>.Default.Equals(SelectedGroupItem.Value, item))
+                {
+                    SelectedGroupItem.Value = item;
+                }
+
+                UpdateHistogramForCurrentGroup();
+            })
+            .DisposeWith(_disposables);
+
+        ShowCustom = SelectedGroup
+            .Select(x => x == CurveGroup.Custom)
+            .ToReadOnlyReactivePropertySlim(initialValue: true)
+            .DisposeWith(_disposables)!;
+
+        SelectedChannelItem
+            .Where(v => v != null)
+            .Select(v => v!.Channel)
+            .Subscribe(channel => SelectedChannel.Value = channel)
+            .DisposeWith(_disposables);
+
+        SelectedChannel
+            .Subscribe(channel =>
+            {
+                CustomCurveChannelItem? item = CustomCurveChannels.FirstOrDefault(v => v.Channel == channel);
+                if (!EqualityComparer<CustomCurveChannelItem?>.Default.Equals(SelectedChannelItem.Value, item))
+                {
+                    SelectedChannelItem.Value = item;
+                }
+            })
+            .DisposeWith(_disposables);
+
+        ShowMasterCurve = ShowCustom
+            .CombineLatest(SelectedChannel, (showCustom, channel) => showCustom && channel == CustomCurveChannel.Master)
+            .ToReadOnlyReactivePropertySlim(initialValue: true)
+            .DisposeWith(_disposables)!;
+
+        ShowRedCurve = ShowCustom
+            .CombineLatest(SelectedChannel, (showCustom, channel) => showCustom && channel == CustomCurveChannel.Red)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        ShowGreenCurve = ShowCustom
+            .CombineLatest(SelectedChannel, (showCustom, channel) => showCustom && channel == CustomCurveChannel.Green)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        ShowBlueCurve = ShowCustom
+            .CombineLatest(SelectedChannel, (showCustom, channel) => showCustom && channel == CustomCurveChannel.Blue)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        ShowHueVsHue = SelectedGroup
+            .Select(x => x == CurveGroup.HueVsHue)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        ShowHueVsSaturation = SelectedGroup
+            .Select(x => x == CurveGroup.HueVsSaturation)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        ShowHueVsLuminance = SelectedGroup
+            .Select(x => x == CurveGroup.HueVsLuminance)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        ShowLuminanceVsSaturation = SelectedGroup
+            .Select(x => x == CurveGroup.LuminanceVsSaturation)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+
+        ShowSaturationVsSaturation = SelectedGroup
+            .Select(x => x == CurveGroup.SaturationVsSaturation)
+            .ToReadOnlyReactivePropertySlim()
+            .DisposeWith(_disposables)!;
+    }
+
+    public string Header => Strings.Curves;
+
+    public ToolTabExtension Extension => CurvesTabExtension.Instance;
+
+    public IReactiveProperty<bool> IsSelected { get; } = new ReactiveProperty<bool>();
+
+    public IReactiveProperty<ToolTabExtension.TabPlacement> Placement { get; } =
+        new ReactivePropertySlim<ToolTabExtension.TabPlacement>(ToolTabExtension.TabPlacement.RightLowerBottom);
+
+    public IReactiveProperty<ToolTabExtension.TabDisplayMode> DisplayMode { get; } =
+        new ReactivePropertySlim<ToolTabExtension.TabDisplayMode>();
+
+    public ReadOnlyReactivePropertySlim<bool> HasCurves { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> IsCurvesMissing { get; }
+
+    public IReadOnlyList<CurveGroupItem> CurveGroups { get; }
+
+    public IReadOnlyList<CustomCurveChannelItem> CustomCurveChannels { get; }
+
+    public ReactivePropertySlim<WriteableBitmap?> SourceBitmap { get; } = new();
+
+    public CurveVisualizationRenderer Renderer { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> MasterCurve { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> RedCurve { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> GreenCurve { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> BlueCurve { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> HueVsHue { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> HueVsSaturation { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> HueVsLuminance { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> LuminanceVsSaturation { get; } = new();
+
+    public ReactivePropertySlim<CurvePresenterViewModel?> SaturationVsSaturation { get; } = new();
+
+    public ReactivePropertySlim<CurveGroupItem?> SelectedGroupItem { get; }
+
+    public ReactivePropertySlim<CurveGroup> SelectedGroup { get; } = new(CurveGroup.Custom);
+
+    public ReactivePropertySlim<CustomCurveChannelItem?> SelectedChannelItem { get; }
+
+    public ReactivePropertySlim<CustomCurveChannel> SelectedChannel { get; } = new(CustomCurveChannel.Master);
+
+    public ReadOnlyReactivePropertySlim<bool> ShowCustom { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowMasterCurve { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowRedCurve { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowGreenCurve { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowBlueCurve { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowHueVsHue { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowHueVsSaturation { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowHueVsLuminance { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowLuminanceVsSaturation { get; }
+
+    public ReadOnlyReactivePropertySlim<bool> ShowSaturationVsSaturation { get; }
+
+    public ReactivePropertySlim<Curves?> Effect { get; } = new();
+
+    public void Dispose()
+    {
+        ClearEditors();
+        _disposables.Dispose();
+    }
+
+    public void ReadFromJson(JsonObject json)
+    {
+        if (json.TryGetPropertyValue("selectedGroup", out var selectedGroupNode)
+            && selectedGroupNode is JsonValue selectedGroupValue
+            && selectedGroupValue.TryGetValue(out int selectedGroup))
+        {
+            SelectedGroup.Value = (CurveGroup)selectedGroup;
+        }
+
+        if (json.TryGetPropertyValue("selectedChannel", out var selectedChannelNode)
+            && selectedChannelNode is JsonValue selectedChannelValue
+            && selectedChannelValue.TryGetValue(out int selectedChannel))
+        {
+            SelectedChannel.Value = (CustomCurveChannel)selectedChannel;
+        }
+
+        if (json.TryGetPropertyValue("effectId", out var effectIdNode)
+            && effectIdNode is JsonValue effectIdValue
+            && effectIdValue.TryGetValue(out string? effectIdStr)
+            && Guid.TryParse(effectIdStr, out Guid effectId))
+        {
+            var colorGrading = _editViewModel.Scene.FindById(effectId) as Curves;
+            Effect.Value = colorGrading;
+        }
+    }
+
+    public void WriteToJson(JsonObject json)
+    {
+        json["selectedGroup"] = (int)SelectedGroup.Value;
+        json["selectedChannel"] = (int)SelectedChannel.Value;
+        json["effectId"] = Effect.Value?.Id;
+    }
+
+    public object? GetService(Type serviceType)
+    {
+        if (serviceType == typeof(EditViewModel))
+            return _editViewModel;
+
+        if (serviceType == typeof(HistoryManager))
+            return _editViewModel.HistoryManager;
+
+        if (serviceType == typeof(Element))
+            return Effect.Value?.FindHierarchicalParent<Element>();
+
+        if (serviceType == typeof(Curves))
+            return Effect.Value;
+
+        if (serviceType == typeof(Scene))
+            return _editViewModel.Scene;
+
+        return _editViewModel.GetService(serviceType);
+    }
+
+    public void SelectCurveByPropertyName(string propertyName)
+    {
+        switch (propertyName)
+        {
+            case nameof(Curves.MasterCurve):
+                SelectedGroup.Value = CurveGroup.Custom;
+                SelectedChannel.Value = CustomCurveChannel.Master;
+                break;
+            case nameof(Curves.RedCurve):
+                SelectedGroup.Value = CurveGroup.Custom;
+                SelectedChannel.Value = CustomCurveChannel.Red;
+                break;
+            case nameof(Curves.GreenCurve):
+                SelectedGroup.Value = CurveGroup.Custom;
+                SelectedChannel.Value = CustomCurveChannel.Green;
+                break;
+            case nameof(Curves.BlueCurve):
+                SelectedGroup.Value = CurveGroup.Custom;
+                SelectedChannel.Value = CustomCurveChannel.Blue;
+                break;
+            case nameof(Curves.HueVsHue):
+                SelectedGroup.Value = CurveGroup.HueVsHue;
+                break;
+            case nameof(Curves.HueVsSaturation):
+                SelectedGroup.Value = CurveGroup.HueVsSaturation;
+                break;
+            case nameof(Curves.HueVsLuminance):
+                SelectedGroup.Value = CurveGroup.HueVsLuminance;
+                break;
+            case nameof(Curves.LuminanceVsSaturation):
+                SelectedGroup.Value = CurveGroup.LuminanceVsSaturation;
+                break;
+            case nameof(Curves.SaturationVsSaturation):
+                SelectedGroup.Value = CurveGroup.SaturationVsSaturation;
+                break;
+        }
+    }
+
+    private void SetEditors(Curves? effect)
+    {
+        ClearEditors();
+
+        if (effect == null)
+            return;
+
+        MasterCurve.Value = CreateCurve(effect.MasterCurve);
+        RedCurve.Value = CreateCurve(effect.RedCurve);
+        GreenCurve.Value = CreateCurve(effect.GreenCurve);
+        BlueCurve.Value = CreateCurve(effect.BlueCurve);
+        HueVsHue.Value = CreateCurve(effect.HueVsHue);
+        HueVsSaturation.Value = CreateCurve(effect.HueVsSaturation);
+        HueVsLuminance.Value = CreateCurve(effect.HueVsLuminance);
+        LuminanceVsSaturation.Value = CreateCurve(effect.LuminanceVsSaturation);
+        SaturationVsSaturation.Value = CreateCurve(effect.SaturationVsSaturation);
+
+        effect.DetachedFromHierarchy += OnEffectDetached;
+        _effectDisposables.Add(Disposable.Create(() => effect.DetachedFromHierarchy -= OnEffectDetached));
+    }
+
+    private void OnEffectDetached(object? sender, HierarchyAttachmentEventArgs e)
+    {
+        Effect.Value = null;
+    }
+
+    private CurvePresenterViewModel CreateCurve(IProperty<CurveMap> property)
+    {
+        var vm = new CurvePresenterViewModel(property.Name, Effect.Value!, property, _editViewModel.HistoryManager);
+        _effectDisposables.Add(vm);
+        return vm;
+    }
+
+    private void ClearEditors()
+    {
+        _effectDisposables.Clear();
+
+        MasterCurve.Value = null;
+        RedCurve.Value = null;
+        GreenCurve.Value = null;
+        BlueCurve.Value = null;
+        HueVsHue.Value = null;
+        HueVsSaturation.Value = null;
+        HueVsLuminance.Value = null;
+        LuminanceVsSaturation.Value = null;
+        SaturationVsSaturation.Value = null;
+    }
+
+    private void UpdateHistogramForCurrentGroup()
+    {
+        HistogramCategory requiredCategory = GetRequiredCategory(SelectedGroup.Value);
+        Renderer.UpdateHistogram(SourceBitmap.Value, requiredCategory);
+    }
+
+    private static HistogramCategory GetRequiredCategory(CurveGroup group)
+    {
+        return group switch
+        {
+            CurveGroup.Custom => HistogramCategory.Rgb,
+            CurveGroup.HueVsHue => HistogramCategory.Hue,
+            CurveGroup.HueVsSaturation => HistogramCategory.Hue,
+            CurveGroup.HueVsLuminance => HistogramCategory.Hue,
+            CurveGroup.LuminanceVsSaturation => HistogramCategory.Luminance,
+            CurveGroup.SaturationVsSaturation => HistogramCategory.Saturation,
+            _ => HistogramCategory.None
+        };
+    }
+}
diff --git a/src/Beutl/Views/Editors/ColorGradingPropertiesEditor.axaml b/src/Beutl/Views/Editors/ColorGradingPropertiesEditor.axaml
new file mode 100644
index 000000000..11f322ed2
--- /dev/null
+++ b/src/Beutl/Views/Editors/ColorGradingPropertiesEditor.axaml
@@ -0,0 +1,42 @@
+<UserControl x:Class="Beutl.Views.Editors.ColorGradingPropertiesEditor"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:icons="using:FluentIcons.FluentAvalonia"
+             xmlns:lang="using:Beutl.Language"
+             xmlns:local="using:Beutl.Views.Editors"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:media="using:Beutl.Media"
+             xmlns:ui="using:FluentAvalonia.UI.Controls"
+             xmlns:vm="using:Beutl.ViewModels.Editors"
+             x:Name="root"
+             d:DesignHeight="300"
+             d:DesignWidth="300"
+             x:CompileBindings="True"
+             x:DataType="vm:ColorGradingPropertiesViewModel"
+             mc:Ignorable="d">
+    <StackPanel Margin="0,8,0,4" Spacing="8">
+        <Button HorizontalAlignment="Stretch"
+                Click="OpenTabClick"
+                Content="{x:Static lang:Strings.EditInTab}" />
+
+        <ToggleButton x:Name="expandProps"
+                      Height="24"
+                      Padding="0"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Bottom"
+                      HorizontalContentAlignment="Center"
+                      VerticalContentAlignment="Center"
+                      Background="{DynamicResource ButtonBackground}"
+                      IsChecked="{Binding IsExpanded.Value}"
+                      Theme="{StaticResource ExpandCollapseToggleButtonStyle}" />
+
+        <ItemsControl x:Name="propsItemsControl" ItemsSource="{Binding Properties}">
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <ContentControl Content="{Binding Converter={StaticResource ViewModelToViewConverter}}" />
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+    </StackPanel>
+</UserControl>
diff --git a/src/Beutl/Views/Editors/ColorGradingPropertiesEditor.axaml.cs b/src/Beutl/Views/Editors/ColorGradingPropertiesEditor.axaml.cs
new file mode 100644
index 000000000..5db32f379
--- /dev/null
+++ b/src/Beutl/Views/Editors/ColorGradingPropertiesEditor.axaml.cs
@@ -0,0 +1,58 @@
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Interactivity;
+using Beutl.ProjectSystem;
+using Beutl.Services.PrimitiveImpls;
+using Beutl.ViewModels;
+using Beutl.ViewModels.Editors;
+using Beutl.ViewModels.Tools;
+using Microsoft.Extensions.DependencyInjection;
+using static Beutl.Views.Editors.PropertiesEditor;
+
+namespace Beutl.Views.Editors;
+
+public sealed partial class ColorGradingPropertiesEditor : UserControl
+{
+    private static readonly CrossFade s_transition = new(TimeSpan.FromMilliseconds(250));
+    private CancellationTokenSource? _lastTransitionCts;
+
+    public ColorGradingPropertiesEditor()
+    {
+        Resources["ViewModelToViewConverter"] = ViewModelToViewConverter.Instance;
+        InitializeComponent();
+
+        expandProps.GetObservable(ToggleButton.IsCheckedProperty)
+            .Subscribe(async v =>
+            {
+                _lastTransitionCts?.Cancel();
+                _lastTransitionCts = new CancellationTokenSource();
+                CancellationToken localToken = _lastTransitionCts.Token;
+
+                if (v == true)
+                {
+                    await s_transition.Start(null, propsItemsControl, localToken);
+                }
+                else
+                {
+                    await s_transition.Start(propsItemsControl, null, localToken);
+                }
+            });
+    }
+
+    private void OpenTabClick(object? sender, RoutedEventArgs e)
+    {
+        if (DataContext is ColorGradingPropertiesViewModel context &&
+            context.GetService<EditViewModel>() is { } editViewModel &&
+            context.TryGetColorGrading() is { } colorGrading)
+        {
+            var toolTab = editViewModel.FindToolTab<ColorGradingTabViewModel>() ??
+                          new ColorGradingTabViewModel(editViewModel);
+
+            toolTab.Effect.Value = colorGrading;
+
+            editViewModel.OpenToolTab(toolTab);
+        }
+    }
+}
diff --git a/src/Beutl/Views/Editors/CurveMapEditor.axaml b/src/Beutl/Views/Editors/CurveMapEditor.axaml
new file mode 100644
index 000000000..43d53159e
--- /dev/null
+++ b/src/Beutl/Views/Editors/CurveMapEditor.axaml
@@ -0,0 +1,46 @@
+<UserControl x:Class="Beutl.Views.Editors.CurveMapEditor"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:icons="using:FluentIcons.FluentAvalonia"
+             xmlns:lang="using:Beutl.Language"
+             xmlns:local="using:Beutl.Views.Editors"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="using:Beutl.ViewModels.Editors"
+             Margin="4,0"
+             d:DesignWidth="300"
+             x:CompileBindings="True"
+             x:DataType="vm:CurveMapEditorViewModel"
+             mc:Ignorable="d">
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="2*" />
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="150" SharedSizeGroup="TextBox_SizeGroup" />
+            <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
+
+        <TextBlock Margin="4,0,0,0"
+                   HorizontalAlignment="Left"
+                   VerticalAlignment="Center"
+                   ClipToBounds="False"
+                   Text="{Binding Header}"
+                   TextTrimming="CharacterEllipsis" />
+
+        <GridSplitter Grid.Column="1" Background="Transparent" />
+
+        <Button Grid.Column="2"
+                Margin="4"
+                HorizontalAlignment="Stretch"
+                HorizontalContentAlignment="Left"
+                Click="OpenCurvesTab_Click"
+                IsEnabled="{Binding CanEdit.Value}">
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <icons:SymbolIcon VerticalAlignment="Center" Symbol="Edit" />
+                <TextBlock Text="{x:Static lang:Strings.Curves}" />
+            </StackPanel>
+        </Button>
+
+        <local:PropertyEditorMenu Grid.Column="3" />
+    </Grid>
+</UserControl>
diff --git a/src/Beutl/Views/Editors/CurveMapEditor.axaml.cs b/src/Beutl/Views/Editors/CurveMapEditor.axaml.cs
new file mode 100644
index 000000000..894e02736
--- /dev/null
+++ b/src/Beutl/Views/Editors/CurveMapEditor.axaml.cs
@@ -0,0 +1,36 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Beutl.ViewModels;
+using Beutl.ViewModels.Editors;
+using Beutl.ViewModels.Tools;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace Beutl.Views.Editors;
+
+public partial class CurveMapEditor : UserControl
+{
+    public CurveMapEditor()
+    {
+        InitializeComponent();
+    }
+
+    private void OpenCurvesTab_Click(object? sender, RoutedEventArgs e)
+    {
+        if (DataContext is CurveMapEditorViewModel { IsDisposed: false } viewModel
+            && viewModel.GetService<EditViewModel>() is { } editViewModel
+            && viewModel.TryGetCurves() is { } curves)
+        {
+            CurvesTabViewModel context = editViewModel.FindToolTab<CurvesTabViewModel>()
+                ?? new CurvesTabViewModel(editViewModel);
+
+            context.Effect.Value = curves;
+            var prop = viewModel.PropertyAdapter.GetEngineProperty();
+            if (prop != null)
+            {
+                context.SelectCurveByPropertyName(prop.Name);
+            }
+
+            editViewModel.OpenToolTab(context);
+        }
+    }
+}
diff --git a/src/Beutl/Views/Tools/ColorGradingTab.axaml b/src/Beutl/Views/Tools/ColorGradingTab.axaml
new file mode 100644
index 000000000..2500b550b
--- /dev/null
+++ b/src/Beutl/Views/Tools/ColorGradingTab.axaml
@@ -0,0 +1,251 @@
+<UserControl x:Class="Beutl.Views.Tools.ColorGradingTab"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:icons="clr-namespace:FluentIcons.FluentAvalonia;assembly=FluentIcons.FluentAvalonia"
+             xmlns:lang="using:Beutl.Language"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:pe="using:Beutl.Controls.PropertyEditors"
+             xmlns:vm="using:Beutl.ViewModels.Tools"
+             d:DesignHeight="720"
+             d:DesignWidth="1080"
+             x:CompileBindings="True"
+             x:DataType="vm:ColorGradingTabViewModel"
+             mc:Ignorable="d">
+    <UserControl.Resources>
+        <ControlTheme x:Key="MinimalNumberEditor"
+                      BasedOn="{StaticResource {x:Type pe:StringEditor}}"
+                      TargetType="pe:StringEditor">
+            <Setter Property="MinWidth" Value="0" />
+            <Setter Property="Margin" Value="0" />
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Border Padding="{TemplateBinding Padding}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="2*" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+
+                            <TextBlock Name="PART_HeaderTextBlock"
+                                       HorizontalAlignment="Left"
+                                       VerticalAlignment="Center"
+                                       ClipToBounds="False"
+                                       Text="{TemplateBinding Header}"
+                                       TextTrimming="CharacterEllipsis" />
+
+                            <Grid Grid.Column="1"
+                                  Margin="8,4,4,4"
+                                  ColumnDefinitions="*,Auto">
+                                <TextBox x:Name="PART_InnerTextBox"
+                                         IsEnabled="{TemplateBinding IsReadOnly,
+                                                                     Converter={x:Static BoolConverters.Not}}"
+                                         Text="{TemplateBinding Text,
+                                                                Mode=TwoWay}" />
+
+                                <StackPanel Name="LeftRightButtons"
+                                            Grid.Column="1"
+                                            Margin="4,0,0,0"
+                                            Orientation="Horizontal">
+                                    <Button Name="PART_LeftButton"
+                                            Classes="left"
+                                            Theme="{StaticResource PropertyEditorLeftRightButton}" />
+
+                                    <Button Name="PART_RightButton"
+                                            Classes="right"
+                                            Theme="{StaticResource PropertyEditorLeftRightButton}" />
+                                </StackPanel>
+                            </Grid>
+
+                            <ContentPresenter Name="PART_MenuContentPresenter"
+                                              Grid.Column="2"
+                                              Content="{TemplateBinding MenuContent}"
+                                              ContentTemplate="{TemplateBinding MenuContentTemplate}" />
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </ControlTheme>
+
+        <ControlTheme x:Key="PropertiesVisibilityToggleButtonStyle" TargetType="ToggleButton">
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
+            <Setter Property="BorderBrush" Value="Transparent" />
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="Padding" Value="{StaticResource ButtonPadding}" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+            <Setter Property="FontWeight" Value="Normal" />
+            <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+            <Setter Property="HorizontalContentAlignment" Value="Center" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Border Name="PART_Root"
+                            Padding="{TemplateBinding Padding}"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <icons:SymbolIcon Name="PART_SymbolIcon"
+                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          Symbol="Edit" />
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+
+            <Style Selector="^:checked /template/ icons|SymbolIcon#PART_SymbolIcon">
+                <Setter Property="Symbol" Value="EditOff" />
+            </Style>
+
+            <Style Selector="^:pointerover /template/ Border#PART_Root">
+                <Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
+            </Style>
+
+            <Style Selector="^:pressed /template/ Border#PART_Root">
+                <Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ icons|SymbolIcon#PART_SymbolIcon">
+                <Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
+            </Style>
+
+            <Style Selector="^:disabled /template/ Border#PART_Root">
+                <Setter Property="Background" Value="{DynamicResource SubtleFillColorDisabledBrush}" />
+            </Style>
+            <Style Selector="^:disabled /template/ icons|SymbolIcon#PART_SymbolIcon">
+                <Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
+            </Style>
+        </ControlTheme>
+    </UserControl.Resources>
+    <Grid RowDefinitions="Auto,Auto,*">
+        <Grid Grid.Row="0"
+              Height="32"
+              ColumnDefinitions="*,Auto,Auto">
+            <TextBlock Grid.Column="0"
+                       Margin="8,0,0,0"
+                       VerticalAlignment="Center"
+                       FontWeight="SemiBold"
+                       Text="{x:Static lang:Strings.ColorGrading}" />
+
+            <ToggleButton Grid.Column="1"
+                          Width="32"
+                          Height="32"
+                          Margin="0,0,4,0"
+                          VerticalAlignment="Center"
+                          IsChecked="{Binding IsNumberEditorsVisible.Value, Mode=TwoWay}"
+                          Theme="{StaticResource PropertiesVisibilityToggleButtonStyle}" />
+
+            <ComboBox Grid.Column="2"
+                      HorizontalAlignment="Right"
+                      VerticalAlignment="Center"
+                      DisplayMemberBinding="{ReflectionBinding Name}"
+                      ItemsSource="{Binding AvailableWheelModes}"
+                      SelectedValue="{Binding WheelMode.Value, Mode=TwoWay}"
+                      Theme="{StaticResource LiteComboBoxStyle}" />
+        </Grid>
+
+        <WrapPanel Grid.Row="1" Margin="8,0">
+            <WrapPanel.IsVisible>
+                <MultiBinding Converter="{x:Static BoolConverters.And}">
+                    <Binding Path="HasColorGrading.Value" />
+                    <Binding Path="IsNumberEditorsVisible.Value" />
+                </MultiBinding>
+            </WrapPanel.IsVisible>
+            <pe:NumberEditor x:Name="TemperatureEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding TemperatureEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+            <pe:NumberEditor x:Name="TintEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding TintEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+
+            <pe:NumberEditor x:Name="ExposureEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding ExposureEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+            <pe:NumberEditor x:Name="ContrastEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding ContrastEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+
+            <pe:NumberEditor x:Name="ContrastPivotEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding ContrastPivotEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+            <pe:NumberEditor x:Name="SaturationEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding SaturationEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+            <pe:NumberEditor x:Name="VibranceEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding VibranceEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+
+            <pe:NumberEditor x:Name="HueEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding HueEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+
+            <pe:NumberEditor x:Name="LowRangeEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding LowRangeEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+            <pe:NumberEditor x:Name="HighRangeEditor"
+                             x:TypeArguments="x:Single"
+                             DataContext="{Binding HighRangeEditor.Value}"
+                             Theme="{StaticResource MinimalNumberEditor}" />
+        </WrapPanel>
+
+        <Panel Grid.Row="2" IsVisible="{Binding HasColorGrading.Value}">
+            <Grid x:Name="LogControls"
+                  VerticalAlignment="Stretch"
+                  ColumnDefinitions="*,*,*"
+                  ColumnSpacing="8"
+                  IsVisible="{Binding IsLogMode.Value}">
+                <pe:ColorGradingWheel x:Name="ShadowsPicker"
+                                      Grid.Column="0"
+                                      DataContext="{Binding ShadowsEditor.Value}" />
+                <pe:ColorGradingWheel x:Name="MidtonesPicker"
+                                      Grid.Column="1"
+                                      DataContext="{Binding MidtonesEditor.Value}" />
+                <pe:ColorGradingWheel x:Name="HighlightsPicker"
+                                      Grid.Column="2"
+                                      DataContext="{Binding HighlightsEditor.Value}" />
+            </Grid>
+
+            <Grid x:Name="LiftControls"
+                  VerticalAlignment="Stretch"
+                  ColumnDefinitions="*,*,*,*"
+                  ColumnSpacing="8"
+                  IsVisible="{Binding IsLiftGammaGainMode.Value}">
+                <pe:ColorGradingWheel x:Name="LiftPicker"
+                                      Grid.Column="0"
+                                      DataContext="{Binding LiftEditor.Value}" />
+                <pe:ColorGradingWheel x:Name="GammaPicker"
+                                      Grid.Column="1"
+                                      DataContext="{Binding GammaEditor.Value}" />
+                <pe:ColorGradingWheel x:Name="GainPicker"
+                                      Grid.Column="2"
+                                      DataContext="{Binding GainEditor.Value}" />
+                <pe:ColorGradingWheel x:Name="OffsetPicker"
+                                      Grid.Column="3"
+                                      DataContext="{Binding OffsetEditor.Value}" />
+            </Grid>
+        </Panel>
+
+        <TextBlock Grid.RowSpan="3"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   IsVisible="{Binding IsColorGradingMissing.Value}"
+                   Text="{x:Static lang:Strings.ColorGrading_Missing}"
+                   TextWrapping="Wrap" />
+    </Grid>
+</UserControl>
diff --git a/src/Beutl/Views/Tools/ColorGradingTab.axaml.cs b/src/Beutl/Views/Tools/ColorGradingTab.axaml.cs
new file mode 100644
index 000000000..74fa25cdc
--- /dev/null
+++ b/src/Beutl/Views/Tools/ColorGradingTab.axaml.cs
@@ -0,0 +1,69 @@
+using Avalonia;
+using Avalonia.Controls;
+
+using Beutl.Controls.PropertyEditors;
+using Beutl.ViewModels.Editors;
+using Beutl.ViewModels.Tools;
+using Beutl.Views.Editors;
+
+namespace Beutl.Views.Tools;
+
+public partial class ColorGradingTab : UserControl
+{
+    private readonly CompositeDisposable _subscriptions = [];
+
+    public ColorGradingTab()
+    {
+        InitializeComponent();
+
+        DataContextChanged += OnDataContextChanged;
+    }
+
+    private void OnDataContextChanged(object? sender, EventArgs e)
+    {
+        _subscriptions.Clear();
+        if (DataContext is ColorGradingTabViewModel vm)
+        {
+            _subscriptions.Add(vm.TemperatureEditor.Subscribe(v => BindNumberEditor(TemperatureEditor, v)));
+            _subscriptions.Add(vm.TintEditor.Subscribe(v => BindNumberEditor(TintEditor, v)));
+            _subscriptions.Add(vm.ExposureEditor.Subscribe(v => BindNumberEditor(ExposureEditor, v)));
+            _subscriptions.Add(vm.ContrastEditor.Subscribe(v => BindNumberEditor(ContrastEditor, v)));
+            _subscriptions.Add(vm.ContrastPivotEditor.Subscribe(v => BindNumberEditor(ContrastPivotEditor, v)));
+            _subscriptions.Add(vm.SaturationEditor.Subscribe(v => BindNumberEditor(SaturationEditor, v)));
+            _subscriptions.Add(vm.VibranceEditor.Subscribe(v => BindNumberEditor(VibranceEditor, v)));
+            _subscriptions.Add(vm.HueEditor.Subscribe(v => BindNumberEditor(HueEditor, v)));
+            _subscriptions.Add(vm.LowRangeEditor.Subscribe(v => BindNumberEditor(LowRangeEditor, v)));
+            _subscriptions.Add(vm.HighRangeEditor.Subscribe(v => BindNumberEditor(HighRangeEditor, v)));
+
+            _subscriptions.Add(vm.ShadowsEditor.Subscribe(v => BindColorPicker(ShadowsPicker, v)));
+            _subscriptions.Add(vm.MidtonesEditor.Subscribe(v => BindColorPicker(MidtonesPicker, v)));
+            _subscriptions.Add(vm.HighlightsEditor.Subscribe(v => BindColorPicker(HighlightsPicker, v)));
+            _subscriptions.Add(vm.LiftEditor.Subscribe(v => BindColorPicker(LiftPicker, v)));
+            _subscriptions.Add(vm.GammaEditor.Subscribe(v => BindColorPicker(GammaPicker, v)));
+            _subscriptions.Add(vm.GainEditor.Subscribe(v => BindColorPicker(GainPicker, v)));
+            _subscriptions.Add(vm.OffsetEditor.Subscribe(v => BindColorPicker(OffsetPicker, v)));
+        }
+    }
+
+    private void BindNumberEditor(NumberEditor<float> editor, NumberEditorViewModel<float>? viewModel)
+    {
+        editor.MenuContent = new PropertyEditorMenu();
+        if (viewModel != null)
+        {
+            viewModel.Accept(editor);
+        }
+    }
+
+    private void BindColorPicker(ColorGradingWheel picker, GradingColorEditorViewModel? viewModel)
+    {
+        if (viewModel == null)
+        {
+            picker.IsEnabled = false;
+            return;
+        }
+
+        picker.IsEnabled = true;
+        picker.MenuContent = new PropertyEditorMenu();
+        viewModel.Accept(picker);
+    }
+}
diff --git a/src/Beutl/Views/Tools/ColorScopesTab.axaml b/src/Beutl/Views/Tools/ColorScopesTab.axaml
new file mode 100644
index 000000000..80361630a
--- /dev/null
+++ b/src/Beutl/Views/Tools/ColorScopesTab.axaml
@@ -0,0 +1,84 @@
+<UserControl x:Class="Beutl.Views.Tools.ColorScopesTab"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:lang="using:Beutl.Language"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:scopes="using:Beutl.Views.Tools.Scopes"
+             xmlns:viewModels="using:Beutl.ViewModels.Tools"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
+             x:CompileBindings="True"
+             x:DataType="viewModels:ColorScopesTabViewModel"
+             mc:Ignorable="d">
+    <UserControl.Resources>
+        <SolidColorBrush x:Key="ScopeAxisBrush" Color="#141417" />
+        <SolidColorBrush x:Key="ScopeLabelBrush" Color="#808080" />
+        <SolidColorBrush x:Key="ScopeBackgroundBrush" Color="#050506" />
+    </UserControl.Resources>
+
+    <Grid RowDefinitions="Auto,*">
+        <Grid Height="32" ColumnDefinitions="Auto,Auto">
+            <ComboBox Grid.Column="0"
+                      Margin="8,0,0,0"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Center"
+                      SelectedIndex="{Binding SelectedScopeType.Value, Converter={x:Static scopes:ScopeTypeConverter.Instance}}"
+                      Theme="{StaticResource LiteComboBoxStyle}">
+                <ComboBoxItem Content="{x:Static lang:Strings.Waveform}" />
+                <ComboBoxItem Content="{x:Static lang:Strings.Histogram}" />
+                <ComboBoxItem Content="{x:Static lang:Strings.Vectorscope}" />
+            </ComboBox>
+
+            <Grid Grid.Column="1"
+                  VerticalAlignment="Center"
+                  IsVisible="{Binding SelectedScopeType.Value, Converter={x:Static scopes:ScopeTypeConverter.Instance}, ConverterParameter=Waveform}">
+                <ComboBox Margin="8,0,0,0"
+                          HorizontalAlignment="Stretch"
+                          SelectedIndex="{Binding WaveformMode.Value, Converter={x:Static scopes:WaveformModeConverter.Instance}}"
+                          Theme="{StaticResource LiteComboBoxStyle}">
+                    <ComboBoxItem Content="{x:Static lang:Strings.Luma}" />
+                    <ComboBoxItem Content="{x:Static lang:Strings.RgbOverlay}" />
+                    <ComboBoxItem Content="{x:Static lang:Strings.RgbParade}" />
+                </ComboBox>
+            </Grid>
+
+            <Grid Grid.Column="1"
+                  VerticalAlignment="Center"
+                  IsVisible="{Binding SelectedScopeType.Value, Converter={x:Static scopes:ScopeTypeConverter.Instance}, ConverterParameter=Histogram}">
+                <ComboBox Margin="8,0,0,0"
+                          HorizontalAlignment="Stretch"
+                          SelectedIndex="{Binding HistogramMode.Value, Converter={x:Static scopes:HistogramModeConverter.Instance}}"
+                          Theme="{StaticResource LiteComboBoxStyle}">
+                    <ComboBoxItem Content="{x:Static lang:Strings.RgbOverlay}" />
+                    <ComboBoxItem Content="{x:Static lang:Strings.RgbParade}" />
+                </ComboBox>
+            </Grid>
+        </Grid>
+
+        <Panel Grid.Row="1">
+            <scopes:WaveformControl x:Name="WaveformControl"
+                                    AxisBrush="{StaticResource ScopeAxisBrush}"
+                                    BackgroundBrush="{StaticResource ScopeBackgroundBrush}"
+                                    IsVisible="{Binding SelectedScopeType.Value, Converter={x:Static scopes:ScopeTypeConverter.Instance}, ConverterParameter=Waveform}"
+                                    LabelBrush="{StaticResource ScopeLabelBrush}"
+                                    Mode="{Binding WaveformMode.Value}"
+                                    SourceBitmap="{Binding SourceBitmap.Value}" />
+
+            <scopes:HistogramControl x:Name="HistogramControl"
+                                     AxisBrush="{StaticResource ScopeAxisBrush}"
+                                     BackgroundBrush="{StaticResource ScopeBackgroundBrush}"
+                                     IsVisible="{Binding SelectedScopeType.Value, Converter={x:Static scopes:ScopeTypeConverter.Instance}, ConverterParameter=Histogram}"
+                                     LabelBrush="{StaticResource ScopeLabelBrush}"
+                                     Mode="{Binding HistogramMode.Value}"
+                                     SourceBitmap="{Binding SourceBitmap.Value}" />
+
+            <scopes:VectorscopeControl x:Name="VectorscopeControl"
+                                       AxisBrush="{StaticResource ScopeAxisBrush}"
+                                       BackgroundBrush="{StaticResource ScopeBackgroundBrush}"
+                                       IsVisible="{Binding SelectedScopeType.Value, Converter={x:Static scopes:ScopeTypeConverter.Instance}, ConverterParameter=Vectorscope}"
+                                       LabelBrush="{StaticResource ScopeLabelBrush}"
+                                       SourceBitmap="{Binding SourceBitmap.Value}" />
+        </Panel>
+    </Grid>
+</UserControl>
diff --git a/src/Beutl/Views/Tools/ColorScopesTab.axaml.cs b/src/Beutl/Views/Tools/ColorScopesTab.axaml.cs
new file mode 100644
index 000000000..34192b01f
--- /dev/null
+++ b/src/Beutl/Views/Tools/ColorScopesTab.axaml.cs
@@ -0,0 +1,49 @@
+using Avalonia.Controls;
+using Avalonia.Threading;
+using Beutl.ViewModels.Tools;
+using Beutl.Views.Tools.Scopes;
+
+namespace Beutl.Views.Tools;
+
+public partial class ColorScopesTab : UserControl
+{
+    public ColorScopesTab()
+    {
+        InitializeComponent();
+
+        DataContextChanged += OnDataContextChanged;
+    }
+
+    private void OnDataContextChanged(object? sender, EventArgs e)
+    {
+        if (DataContext is ColorScopesTabViewModel viewModel)
+        {
+            RefreshCurrentScope();
+            viewModel.RefreshRequested += OnRefreshRequested;
+        }
+    }
+
+    private void OnRefreshRequested(object? sender, EventArgs e)
+    {
+        Dispatcher.UIThread.Post(RefreshCurrentScope);
+    }
+
+    private void RefreshCurrentScope()
+    {
+        if (DataContext is not ColorScopesTabViewModel viewModel)
+            return;
+
+        switch (viewModel.SelectedScopeType.Value)
+        {
+            case ColorScopeType.Waveform:
+                WaveformControl?.Refresh();
+                break;
+            case ColorScopeType.Histogram:
+                HistogramControl?.Refresh();
+                break;
+            case ColorScopeType.Vectorscope:
+                VectorscopeControl?.Refresh();
+                break;
+        }
+    }
+}
diff --git a/src/Beutl/Views/Tools/CurvesTab.axaml b/src/Beutl/Views/Tools/CurvesTab.axaml
new file mode 100644
index 000000000..cf3f826bb
--- /dev/null
+++ b/src/Beutl/Views/Tools/CurvesTab.axaml
@@ -0,0 +1,116 @@
+<UserControl x:Class="Beutl.Views.Tools.CurvesTab"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:curves="using:Beutl.Controls.Curves"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:lang="using:Beutl.Language"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="using:Beutl.ViewModels.Tools"
+             d:DesignHeight="720"
+             d:DesignWidth="1080"
+             x:CompileBindings="True"
+             x:DataType="vm:CurvesTabViewModel"
+             mc:Ignorable="d">
+    <Grid RowDefinitions="Auto,*">
+        <Grid Grid.Row="0"
+              Height="32"
+              ColumnDefinitions="*,Auto,Auto">
+            <TextBlock Grid.Column="0"
+                       Margin="8,0,0,0"
+                       VerticalAlignment="Center"
+                       FontWeight="SemiBold"
+                       Text="{x:Static lang:Strings.Curves}" />
+
+            <ComboBox Grid.Column="1"
+                      Margin="0,0,8,0"
+                      VerticalAlignment="Center"
+                      DisplayMemberBinding="{ReflectionBinding DisplayName}"
+                      IsVisible="{Binding ShowCustom.Value}"
+                      ItemsSource="{Binding CustomCurveChannels}"
+                      SelectedValue="{Binding SelectedChannelItem.Value, Mode=TwoWay}"
+                      Theme="{StaticResource LiteComboBoxStyle}" />
+
+            <ComboBox Grid.Column="2"
+                      HorizontalAlignment="Right"
+                      VerticalAlignment="Center"
+                      DisplayMemberBinding="{ReflectionBinding DisplayName}"
+                      ItemsSource="{Binding CurveGroups}"
+                      SelectedValue="{Binding SelectedGroupItem.Value, Mode=TwoWay}"
+                      Theme="{StaticResource LiteComboBoxStyle}" />
+        </Grid>
+
+        <Panel Grid.Row="1"
+               Margin="8,0,8,8"
+               IsVisible="{Binding HasCurves.Value}">
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowMasterCurve.Value}"
+                                Points="{Binding MasterCurve.Value.Points}"
+                                Visualization="Master"
+                                VisualizationRenderer="{Binding Renderer}" />
+
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowRedCurve.Value}"
+                                Points="{Binding RedCurve.Value.Points}"
+                                Visualization="Red"
+                                VisualizationRenderer="{Binding Renderer}" />
+
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowGreenCurve.Value}"
+                                Points="{Binding GreenCurve.Value.Points}"
+                                Visualization="Green"
+                                VisualizationRenderer="{Binding Renderer}" />
+
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowBlueCurve.Value}"
+                                Points="{Binding BlueCurve.Value.Points}"
+                                Visualization="Blue"
+                                VisualizationRenderer="{Binding Renderer}" />
+
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowHueVsHue.Value}"
+                                Points="{Binding HueVsHue.Value.Points}"
+                                Visualization="HueVsHue"
+                                VisualizationRenderer="{Binding Renderer}" />
+
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowHueVsSaturation.Value}"
+                                Points="{Binding HueVsSaturation.Value.Points}"
+                                Visualization="HueVsSaturation"
+                                VisualizationRenderer="{Binding Renderer}" />
+
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowHueVsLuminance.Value}"
+                                Points="{Binding HueVsLuminance.Value.Points}"
+                                Visualization="HueVsLuminance"
+                                VisualizationRenderer="{Binding Renderer}" />
+
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowLuminanceVsSaturation.Value}"
+                                Points="{Binding LuminanceVsSaturation.Value.Points}"
+                                Visualization="LuminanceVsSaturation"
+                                VisualizationRenderer="{Binding Renderer}" />
+
+            <curves:CurveEditor DragCompleted="CurveEditor_DragCompleted"
+                                DragStarted="CurveEditor_DragStarted"
+                                IsVisible="{Binding ShowSaturationVsSaturation.Value}"
+                                Points="{Binding SaturationVsSaturation.Value.Points}"
+                                Visualization="SaturationVsSaturation"
+                                VisualizationRenderer="{Binding Renderer}" />
+        </Panel>
+
+        <TextBlock Grid.Row="1"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   IsVisible="{Binding IsCurvesMissing.Value}"
+                   Text="{x:Static lang:Strings.ColorCurves_Missing}"
+                   TextWrapping="Wrap" />
+    </Grid>
+</UserControl>
diff --git a/src/Beutl/Views/Tools/CurvesTab.axaml.cs b/src/Beutl/Views/Tools/CurvesTab.axaml.cs
new file mode 100644
index 000000000..fe752be7c
--- /dev/null
+++ b/src/Beutl/Views/Tools/CurvesTab.axaml.cs
@@ -0,0 +1,46 @@
+using Avalonia.Controls;
+using Beutl.Controls.Curves;
+using Beutl.ViewModels.Tools;
+
+namespace Beutl.Views.Tools;
+
+public partial class CurvesTab : UserControl
+{
+    public CurvesTab()
+    {
+        InitializeComponent();
+    }
+
+    private void CurveEditor_DragStarted(object? sender, EventArgs e)
+    {
+        if (sender is CurveEditor editor && DataContext is CurvesTabViewModel viewModel)
+        {
+            GetCurvePresenter(editor, viewModel)?.BeginEdit();
+        }
+    }
+
+    private void CurveEditor_DragCompleted(object? sender, EventArgs e)
+    {
+        if (sender is CurveEditor editor && DataContext is CurvesTabViewModel viewModel)
+        {
+            GetCurvePresenter(editor, viewModel)?.EndEdit();
+        }
+    }
+
+    private static CurvePresenterViewModel? GetCurvePresenter(CurveEditor editor, CurvesTabViewModel viewModel)
+    {
+        return editor.Visualization switch
+        {
+            CurveVisualization.Master => viewModel.MasterCurve.Value,
+            CurveVisualization.Red => viewModel.RedCurve.Value,
+            CurveVisualization.Green => viewModel.GreenCurve.Value,
+            CurveVisualization.Blue => viewModel.BlueCurve.Value,
+            CurveVisualization.HueVsHue => viewModel.HueVsHue.Value,
+            CurveVisualization.HueVsSaturation => viewModel.HueVsSaturation.Value,
+            CurveVisualization.HueVsLuminance => viewModel.HueVsLuminance.Value,
+            CurveVisualization.LuminanceVsSaturation => viewModel.LuminanceVsSaturation.Value,
+            CurveVisualization.SaturationVsSaturation => viewModel.SaturationVsSaturation.Value,
+            _ => null
+        };
+    }
+}
diff --git a/src/Beutl/Views/Tools/Scopes/HistogramControl.cs b/src/Beutl/Views/Tools/Scopes/HistogramControl.cs
new file mode 100644
index 000000000..5d712cb80
--- /dev/null
+++ b/src/Beutl/Views/Tools/Scopes/HistogramControl.cs
@@ -0,0 +1,239 @@
+using Avalonia;
+using Avalonia.Media.Imaging;
+using Avalonia.Platform;
+
+namespace Beutl.Views.Tools.Scopes;
+
+/// <summary>
+/// Control that displays a histogram visualization of RGB color distribution.
+/// </summary>
+public class HistogramControl : ScopeControlBase
+{
+    public static readonly DirectProperty<HistogramControl, HistogramMode> ModeProperty =
+        AvaloniaProperty.RegisterDirect<HistogramControl, HistogramMode>(
+            nameof(Mode), o => o.Mode, (o, v) => o.Mode = v, HistogramMode.Overlay);
+
+    private HistogramMode _mode = HistogramMode.Overlay;
+
+    private static readonly string[] s_horizontalLabels = ["0", "64", "128", "192", "255"];
+    private static readonly (float R, float G, float B) s_colorRed = (1.00f, 0.25f, 0.25f);
+    private static readonly (float R, float G, float B) s_colorGreen = (0.25f, 1.00f, 0.35f);
+    private static readonly (float R, float G, float B) s_colorBlue = (0.35f, 0.60f, 1.00f);
+
+    static HistogramControl()
+    {
+        AffectsRender<HistogramControl>(ModeProperty);
+        ModeProperty.Changed.AddClassHandler<HistogramControl>((o, _) => o.Refresh());
+    }
+
+    public HistogramMode Mode
+    {
+        get => _mode;
+        set => SetAndRaise(ModeProperty, ref _mode, value);
+    }
+
+    protected override string[]? VerticalAxisLabels => null;
+
+    protected override string[]? HorizontalAxisLabels => s_horizontalLabels;
+
+    protected override unsafe WriteableBitmap RenderScope(
+        byte[] sourceData,
+        int sourceWidth,
+        int sourceHeight,
+        int sourceStride,
+        int targetWidth,
+        int targetHeight,
+        WriteableBitmap? existingBitmap)
+    {
+        // Calculate histograms
+        var rHist = new int[256];
+        var gHist = new int[256];
+        var bHist = new int[256];
+
+        int xStep = Math.Max(1, sourceWidth / 256);
+        int yStep = Math.Max(1, sourceHeight / 256);
+
+        for (int y = 0; y < sourceHeight; y += yStep)
+        {
+            int row = y * sourceStride;
+            for (int x = 0; x < sourceWidth; x += xStep)
+            {
+                int idx = row + x * 4;
+                bHist[sourceData[idx]]++;
+                gHist[sourceData[idx + 1]]++;
+                rHist[sourceData[idx + 2]]++;
+            }
+        }
+
+        var mode = Mode;
+
+        // Reuse existing bitmap if size matches
+        WriteableBitmap bitmap = existingBitmap?.PixelSize.Width == targetWidth && existingBitmap.PixelSize.Height == targetHeight
+            ? existingBitmap
+            : new WriteableBitmap(
+                new PixelSize(targetWidth, targetHeight),
+                new Vector(96, 96),
+                PixelFormat.Bgra8888,
+                AlphaFormat.Premul);
+
+        using ILockedFramebuffer fb = bitmap.Lock();
+        var dest = new Span<uint>((void*)fb.Address, (fb.RowBytes * fb.Size.Height) / sizeof(uint));
+        dest.Fill(PackColor(0, 0, 0, 0));
+        int stridePixels = fb.RowBytes / sizeof(uint);
+
+        if (mode == HistogramMode.Overlay)
+        {
+            RenderOverlayMode(rHist, gHist, bHist, dest, stridePixels, targetWidth, targetHeight);
+        }
+        else
+        {
+            RenderParadeMode(rHist, gHist, bHist, dest, stridePixels, targetWidth, targetHeight);
+        }
+
+        return bitmap;
+    }
+
+    private void RenderOverlayMode(int[] rHist, int[] gHist, int[] bHist, Span<uint> dest, int stridePixels, int targetWidth, int targetHeight)
+    {
+        int rMax = rHist.Max();
+        int gMax = gHist.Max();
+        int bMax = bHist.Max();
+        int max = Math.Max(rMax, Math.Max(gMax, bMax));
+        max = Math.Max(max, 1);
+
+        // Pre-compute colors (DaVinci Resolve style)
+        uint redColor = PackColor(
+            (byte)(s_colorRed.R * 200),
+            (byte)(s_colorRed.G * 200),
+            (byte)(s_colorRed.B * 200),
+            180);
+        uint greenColor = PackColor(
+            (byte)(s_colorGreen.R * 200),
+            (byte)(s_colorGreen.G * 200),
+            (byte)(s_colorGreen.B * 200),
+            180);
+        uint blueColor = PackColor(
+            (byte)(s_colorBlue.R * 200),
+            (byte)(s_colorBlue.G * 200),
+            (byte)(s_colorBlue.B * 200),
+            180);
+
+        // Render histogram bars
+        for (int i = 0; i < 256; i++)
+        {
+            int x = i * targetWidth / 256;
+            int nextX = (i + 1) * targetWidth / 256;
+            int barWidth = Math.Max(1, nextX - x);
+
+            int rHeight = rHist[i] * targetHeight / max;
+            int gHeight = gHist[i] * targetHeight / max;
+            int bHeight = bHist[i] * targetHeight / max;
+
+            int maxHeight = Math.Max(rHeight, Math.Max(gHeight, bHeight));
+
+            for (int bx = x; bx < x + barWidth && bx < stridePixels; bx++)
+            {
+                for (int y = 0; y < maxHeight && y < targetHeight; y++)
+                {
+                    int destY = targetHeight - 1 - y;
+                    if (destY < 0) continue;
+
+                    int destIndex = destY * stridePixels + bx;
+                    if (destIndex >= dest.Length) continue;
+
+                    uint color = dest[destIndex];
+
+                    if (y < rHeight)
+                        color = BlendAdd(color, redColor);
+                    if (y < gHeight)
+                        color = BlendAdd(color, greenColor);
+                    if (y < bHeight)
+                        color = BlendAdd(color, blueColor);
+
+                    dest[destIndex] = color;
+                }
+            }
+        }
+    }
+
+    private void RenderParadeMode(int[] rHist, int[] gHist, int[] bHist, Span<uint> dest, int stridePixels, int targetWidth, int targetHeight)
+    {
+        // In Parade mode, split the height into 3 equal sections: R (top), G (middle), B (bottom)
+        int sectionHeight = targetHeight / 3;
+        int rSectionStart = 0;
+        int gSectionStart = sectionHeight;
+        int bSectionStart = sectionHeight * 2;
+
+        int rMax = Math.Max(1, rHist.Max());
+        int gMax = Math.Max(1, gHist.Max());
+        int bMax = Math.Max(1, bHist.Max());
+
+        // Pre-compute colors (DaVinci Resolve style)
+        uint redColor = PackColor(
+            (byte)(s_colorRed.R * 220),
+            (byte)(s_colorRed.G * 220),
+            (byte)(s_colorRed.B * 220),
+            200);
+        uint greenColor = PackColor(
+            (byte)(s_colorGreen.R * 220),
+            (byte)(s_colorGreen.G * 220),
+            (byte)(s_colorGreen.B * 220),
+            200);
+        uint blueColor = PackColor(
+            (byte)(s_colorBlue.R * 220),
+            (byte)(s_colorBlue.G * 220),
+            (byte)(s_colorBlue.B * 220),
+            200);
+
+        // Render each channel in its section
+        for (int i = 0; i < 256; i++)
+        {
+            int x = i * targetWidth / 256;
+            int nextX = (i + 1) * targetWidth / 256;
+            int barWidth = Math.Max(1, nextX - x);
+
+            int rHeight = rHist[i] * sectionHeight / rMax;
+            int gHeight = gHist[i] * sectionHeight / gMax;
+            int bHeight = bHist[i] * sectionHeight / bMax;
+
+            for (int bx = x; bx < x + barWidth && bx < stridePixels; bx++)
+            {
+                // Red section (top) - draws from bottom of section upward
+                for (int y = 0; y < rHeight && y < sectionHeight; y++)
+                {
+                    int destY = rSectionStart + sectionHeight - 1 - y;
+                    if (destY < 0 || destY >= targetHeight) continue;
+
+                    int destIndex = destY * stridePixels + bx;
+                    if (destIndex >= dest.Length) continue;
+
+                    dest[destIndex] = BlendAdd(dest[destIndex], redColor);
+                }
+
+                // Green section (middle) - draws from bottom of section upward
+                for (int y = 0; y < gHeight && y < sectionHeight; y++)
+                {
+                    int destY = gSectionStart + sectionHeight - 1 - y;
+                    if (destY < 0 || destY >= targetHeight) continue;
+
+                    int destIndex = destY * stridePixels + bx;
+                    if (destIndex >= dest.Length) continue;
+
+                    dest[destIndex] = BlendAdd(dest[destIndex], greenColor);
+                }
+
+                // Blue section (bottom) - draws from bottom of section upward
+                for (int y = 0; y < bHeight && y < sectionHeight; y++)
+                {
+                    int destY = bSectionStart + sectionHeight - 1 - y;
+                    if (destY < 0 || destY >= targetHeight) continue;
+
+                    int destIndex = destY * stridePixels + bx;
+                    if (destIndex >= dest.Length) continue;
+
+                    dest[destIndex] = BlendAdd(dest[destIndex], blueColor);
+                }
+            }
+        }
+    }
+}
diff --git a/src/Beutl/Views/Tools/Scopes/HistogramModeConverter.cs b/src/Beutl/Views/Tools/Scopes/HistogramModeConverter.cs
new file mode 100644
index 000000000..eadf38ae7
--- /dev/null
+++ b/src/Beutl/Views/Tools/Scopes/HistogramModeConverter.cs
@@ -0,0 +1,35 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace Beutl.Views.Tools.Scopes;
+
+public enum HistogramMode
+{
+    Overlay = 0,
+    Parade = 1
+}
+
+public sealed class HistogramModeConverter : IValueConverter
+{
+    public static readonly HistogramModeConverter Instance = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is HistogramMode mode)
+        {
+            return (int)mode;
+        }
+
+        return 0;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is int index && Enum.IsDefined(typeof(HistogramMode), index))
+        {
+            return (HistogramMode)index;
+        }
+
+        return HistogramMode.Overlay;
+    }
+}
diff --git a/src/Beutl/Views/Tools/Scopes/ScopeControlBase.cs b/src/Beutl/Views/Tools/Scopes/ScopeControlBase.cs
new file mode 100644
index 000000000..f95861f8a
--- /dev/null
+++ b/src/Beutl/Views/Tools/Scopes/ScopeControlBase.cs
@@ -0,0 +1,375 @@
+using System.Buffers;
+using System.Runtime.InteropServices;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Media.Imaging;
+using Avalonia.Platform;
+using Avalonia.Threading;
+
+namespace Beutl.Views.Tools.Scopes;
+
+public abstract class ScopeControlBase : Control
+{
+    public static readonly StyledProperty<WriteableBitmap?> SourceBitmapProperty =
+        AvaloniaProperty.Register<ScopeControlBase, WriteableBitmap?>(nameof(SourceBitmap));
+
+    public static readonly StyledProperty<IBrush?> AxisBrushProperty =
+        AvaloniaProperty.Register<ScopeControlBase, IBrush?>(nameof(AxisBrush));
+
+    public static readonly StyledProperty<IBrush?> LabelBrushProperty =
+        AvaloniaProperty.Register<ScopeControlBase, IBrush?>(nameof(LabelBrush));
+
+    public static readonly StyledProperty<IBrush?> BackgroundBrushProperty =
+        AvaloniaProperty.Register<ScopeControlBase, IBrush?>(nameof(BackgroundBrush));
+
+    public static readonly StyledProperty<double> AxisMarginProperty =
+        AvaloniaProperty.Register<ScopeControlBase, double>(nameof(AxisMargin), 32);
+
+    protected static readonly Typeface DefaultTypeface = new(FontFamily.Default, FontStyle.Normal, FontWeight.Normal);
+
+    private static readonly ArrayPool<byte> s_bytePool = ArrayPool<byte>.Shared;
+    private readonly Pen _axisPen = new(Brushes.Gray, 1.5);
+    private readonly SemaphoreSlim _renderLock = new(1, 1);
+    private CancellationTokenSource? _renderCts;
+    private WriteableBitmap? _frontBuffer;
+    private WriteableBitmap? _backBuffer;
+
+    protected WriteableBitmap? RenderedBitmap => _frontBuffer;
+
+    public void Refresh()
+    {
+        OnSourceBitmapChanged();
+    }
+
+    static ScopeControlBase()
+    {
+        AffectsRender<ScopeControlBase>(
+            SourceBitmapProperty,
+            AxisBrushProperty,
+            LabelBrushProperty,
+            BackgroundBrushProperty,
+            AxisMarginProperty);
+
+        SourceBitmapProperty.Changed.AddClassHandler<ScopeControlBase>((s, e) => s.OnSourceBitmapChanged());
+        AxisBrushProperty.Changed.AddClassHandler<ScopeControlBase>((s, e) =>
+            s._axisPen.Brush = (e.NewValue as IBrush) ?? Brushes.Gray);
+    }
+
+    public WriteableBitmap? SourceBitmap
+    {
+        get => GetValue(SourceBitmapProperty);
+        set => SetValue(SourceBitmapProperty, value);
+    }
+
+    public IBrush? AxisBrush
+    {
+        get => GetValue(AxisBrushProperty);
+        set => SetValue(AxisBrushProperty, value);
+    }
+
+    public IBrush? LabelBrush
+    {
+        get => GetValue(LabelBrushProperty);
+        set => SetValue(LabelBrushProperty, value);
+    }
+
+    public IBrush? BackgroundBrush
+    {
+        get => GetValue(BackgroundBrushProperty);
+        set => SetValue(BackgroundBrushProperty, value);
+    }
+
+    public double AxisMargin
+    {
+        get => GetValue(AxisMarginProperty);
+        set => SetValue(AxisMarginProperty, value);
+    }
+
+    protected abstract string[]? VerticalAxisLabels { get; }
+
+    protected abstract string[]? HorizontalAxisLabels { get; }
+
+    protected abstract WriteableBitmap? RenderScope(
+        byte[] sourceData,
+        int sourceWidth,
+        int sourceHeight,
+        int sourceStride,
+        int targetWidth,
+        int targetHeight,
+        WriteableBitmap? existingBitmap);
+
+    private void OnSourceBitmapChanged()
+    {
+        StartBackgroundRender();
+    }
+
+    private async void StartBackgroundRender()
+    {
+        var bitmap = SourceBitmap;
+        if (bitmap == null)
+        {
+            _frontBuffer?.Dispose();
+            _frontBuffer = null;
+            _backBuffer?.Dispose();
+            _backBuffer = null;
+            InvalidateVisual();
+            return;
+        }
+
+        _renderCts?.Cancel();
+        _renderCts?.Dispose();
+        _renderCts = new CancellationTokenSource();
+        CancellationToken ct = _renderCts.Token;
+
+        byte[] sourceData;
+        int sourceWidth, sourceHeight, sourceStride;
+        unsafe
+        {
+            using ILockedFramebuffer frame = bitmap.Lock();
+            (sourceWidth, sourceHeight, sourceStride) = (frame.Size.Width, frame.Size.Height, frame.RowBytes);
+            int dataLength = sourceStride * sourceHeight;
+            sourceData = s_bytePool.Rent(dataLength);
+            new ReadOnlySpan<byte>((void*)frame.Address, dataLength).CopyTo(sourceData);
+        }
+
+        var backBuffer = _backBuffer;
+
+        bool lockTaken = false;
+        try
+        {
+            await _renderLock.WaitAsync(ct);
+            lockTaken = true;
+            var bounds = Bounds;
+            double axisMargin = AxisMargin;
+            int targetWidth = (int)Math.Max(1, bounds.Width - axisMargin);
+            int targetHeight = (int)Math.Max(1, bounds.Height - axisMargin);
+
+            if (targetWidth <= 0 || targetHeight <= 0) return;
+
+            await Task.Run(async () =>
+            {
+                try
+                {
+                    if (ct.IsCancellationRequested) return;
+
+                    var result = RenderScope(
+                        sourceData,
+                        sourceWidth,
+                        sourceHeight,
+                        sourceStride,
+                        targetWidth,
+                        targetHeight,
+                        backBuffer);
+
+                    if (result == null) return;
+
+                    await Dispatcher.UIThread.InvokeAsync(() =>
+                    {
+                        var oldFront = _frontBuffer;
+                        _frontBuffer = result;
+
+                        if (result != backBuffer)
+                        {
+                            _backBuffer?.Dispose();
+                            _backBuffer = oldFront;
+                        }
+                        else if (oldFront != result)
+                        {
+                            _backBuffer = oldFront;
+                        }
+
+                        InvalidateVisual();
+                    });
+                }
+                catch (OperationCanceledException)
+                {
+                }
+                catch (Exception ex)
+                {
+                    Debug.WriteLine($"Scope render error: {ex.Message}");
+                }
+            }, ct);
+        }
+        catch (OperationCanceledException)
+        {
+        }
+        finally
+        {
+            s_bytePool.Return(sourceData);
+            if (lockTaken)
+                _renderLock.Release();
+        }
+    }
+
+    protected override void OnSizeChanged(SizeChangedEventArgs e)
+    {
+        base.OnSizeChanged(e);
+        StartBackgroundRender();
+    }
+
+    public override void Render(DrawingContext context)
+    {
+        base.Render(context);
+
+        var bounds = Bounds;
+        double axisMargin = AxisMargin;
+        double contentWidth = bounds.Width - axisMargin;
+        double contentHeight = bounds.Height - axisMargin;
+
+        // Draw background
+        var bgBrush = BackgroundBrush;
+        if (bgBrush != null)
+        {
+            context.FillRectangle(bgBrush, new Rect(0, 0, bounds.Width, bounds.Height));
+        }
+
+        if (contentWidth <= 0 || contentHeight <= 0)
+            return;
+
+        var bitmap = _frontBuffer;
+        if (bitmap != null)
+        {
+            var destRect = new Rect(axisMargin, 0, contentWidth, contentHeight);
+            using (context.PushRenderOptions(new RenderOptions
+            {
+                BitmapInterpolationMode = BitmapInterpolationMode.HighQuality
+            }))
+            {
+                context.DrawImage(bitmap, destRect);
+            }
+        }
+
+        // Draw axes
+        DrawAxes(context, bounds, axisMargin, contentWidth, contentHeight);
+    }
+
+    private void DrawAxes(DrawingContext context, Rect bounds, double axisMargin, double contentWidth,
+        double contentHeight)
+    {
+        var labelBrush = LabelBrush ?? Brushes.Gray;
+
+        // Draw vertical axis line
+        context.DrawLine(_axisPen, new Point(axisMargin, 0), new Point(axisMargin, contentHeight));
+
+        // Draw horizontal axis line
+        context.DrawLine(_axisPen, new Point(axisMargin, contentHeight), new Point(bounds.Width, contentHeight));
+
+        // Draw vertical labels (from top to bottom)
+        var verticalLabels = VerticalAxisLabels;
+        if (verticalLabels is { Length: > 0 })
+        {
+            int count = verticalLabels.Length;
+            for (int i = 0; i < count; i++)
+            {
+                double y = count > 1 ? i * contentHeight / (count - 1) : contentHeight / 2;
+
+                var formattedText = new FormattedText(
+                    verticalLabels[i],
+                    CultureInfo.CurrentCulture,
+                    FlowDirection.LeftToRight,
+                    DefaultTypeface,
+                    10,
+                    labelBrush);
+
+                double textX = axisMargin - formattedText.Width - 4;
+                double textY = y - formattedText.Height / 2;
+                if (i == 0)
+                {
+                    textY = 4;
+                }
+                else if (i == count - 1)
+                {
+                    textY = contentHeight - formattedText.Height;
+                }
+
+                context.DrawText(formattedText, new Point(Math.Max(0, textX), textY));
+                context.DrawLine(_axisPen, new Point(axisMargin - 3, y), new Point(axisMargin, y));
+            }
+        }
+
+        // Draw horizontal labels (from left to right)
+        var horizontalLabels = HorizontalAxisLabels;
+        if (horizontalLabels is { Length: > 0 })
+        {
+            int count = horizontalLabels.Length;
+            for (int i = 0; i < count; i++)
+            {
+                double x = axisMargin + (count > 1 ? i * contentWidth / (count - 1) : contentWidth / 2);
+
+                var formattedText = new FormattedText(
+                    horizontalLabels[i],
+                    CultureInfo.CurrentCulture,
+                    FlowDirection.LeftToRight,
+                    DefaultTypeface,
+                    10,
+                    labelBrush);
+
+                double textX = x - formattedText.Width / 2;
+                double textY = contentHeight + 4;
+                if (i == 0)
+                {
+                    textX = axisMargin;
+                }
+                else if (i == count - 1)
+                {
+                    textX = bounds.Width - formattedText.Width;
+                }
+
+                context.DrawText(formattedText, new Point(textX, textY));
+                context.DrawLine(_axisPen, new Point(x, contentHeight), new Point(x, contentHeight + 3));
+            }
+        }
+    }
+
+    protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnDetachedFromVisualTree(e);
+
+        _renderCts?.Cancel();
+        _renderCts?.Dispose();
+        _renderCts = null;
+
+        _frontBuffer?.Dispose();
+        _frontBuffer = null;
+        _backBuffer?.Dispose();
+        _backBuffer = null;
+    }
+
+    protected static uint PackColor(byte r, byte g, byte b, byte a = 255)
+    {
+        return (uint)(b | (g << 8) | (r << 16) | (a << 24));
+    }
+
+    protected static void PlotPoint(Span<uint> dest, int stride, int x, int y, uint color)
+    {
+        int height = dest.Length / stride;
+        if ((uint)x >= (uint)stride || (uint)y >= (uint)height) return;
+
+        int idx = y * stride + x;
+        uint existing = dest[idx];
+        byte existingA = (byte)(existing >> 24);
+        byte newA = (byte)(color >> 24);
+        dest[idx] = newA > existingA ? color : BlendAdd(existing, color);
+    }
+
+    protected static uint BlendAdd(uint dst, uint src)
+    {
+        byte db = (byte)(dst);
+        byte dg = (byte)(dst >> 8);
+        byte dr = (byte)(dst >> 16);
+        byte da = (byte)(dst >> 24);
+
+        byte sb = (byte)(src);
+        byte sg = (byte)(src >> 8);
+        byte sr = (byte)(src >> 16);
+        byte sa = (byte)(src >> 24);
+
+        byte a = (byte)Math.Min(255, da + sa);
+        byte r = (byte)Math.Min(255, dr + sr * sa / 255);
+        byte g = (byte)Math.Min(255, dg + sg * sa / 255);
+        byte b = (byte)Math.Min(255, db + sb * sa / 255);
+
+        return PackColor(r, g, b, a);
+    }
+}
diff --git a/src/Beutl/Views/Tools/Scopes/ScopeTypeConverter.cs b/src/Beutl/Views/Tools/Scopes/ScopeTypeConverter.cs
new file mode 100644
index 000000000..6e551ffbb
--- /dev/null
+++ b/src/Beutl/Views/Tools/Scopes/ScopeTypeConverter.cs
@@ -0,0 +1,40 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+using Beutl.ViewModels.Tools;
+
+namespace Beutl.Views.Tools.Scopes;
+
+/// <summary>
+/// Converter for ColorScopeType enum to int (for ComboBox SelectedIndex) and to bool (for visibility).
+/// </summary>
+public sealed class ScopeTypeConverter : IValueConverter
+{
+    public static readonly ScopeTypeConverter Instance = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is ColorScopeType scopeType)
+        {
+            // If parameter is provided, check for equality (for visibility binding)
+            if (parameter is string paramStr && Enum.TryParse<ColorScopeType>(paramStr, out var targetType2))
+            {
+                return scopeType == targetType2;
+            }
+
+            // Otherwise return index for ComboBox
+            return (int)scopeType;
+        }
+
+        return parameter != null ? false : 0;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is int index && Enum.IsDefined(typeof(ColorScopeType), index))
+        {
+            return (ColorScopeType)index;
+        }
+
+        return ColorScopeType.Waveform;
+    }
+}
diff --git a/src/Beutl/Views/Tools/Scopes/VectorscopeControl.cs b/src/Beutl/Views/Tools/Scopes/VectorscopeControl.cs
new file mode 100644
index 000000000..561af5ab9
--- /dev/null
+++ b/src/Beutl/Views/Tools/Scopes/VectorscopeControl.cs
@@ -0,0 +1,206 @@
+using Avalonia;
+using Avalonia.Media;
+using Avalonia.Media.Imaging;
+using Avalonia.Platform;
+
+namespace Beutl.Views.Tools.Scopes;
+
+/// <summary>
+/// Control that displays a vectorscope visualization of color chrominance.
+/// </summary>
+public class VectorscopeControl : ScopeControlBase
+{
+    public static readonly DirectProperty<VectorscopeControl, bool> ShowColorTargetsProperty =
+        AvaloniaProperty.RegisterDirect<VectorscopeControl, bool>(nameof(ShowColorTargets), o => o.ShowColorTargets,
+            (o, v) => o.ShowColorTargets = v, true);
+
+    // Cached brushes and pens for rendering
+    private static readonly SolidColorBrush s_gridBrush = new(Color.FromArgb(160, 40, 40, 40));
+    private static readonly Pen s_gridPen = new(s_gridBrush,1.5);
+    private static readonly SolidColorBrush s_innerGridBrush = new(Color.FromArgb(120, 30, 30, 30));
+    private static readonly Pen s_innerGridPen = new(s_innerGridBrush, 1.5);
+
+    // Cached color target pens
+    private static readonly Pen s_redTargetPen = new(new SolidColorBrush(Color.FromArgb(180, 255, 0, 0)), 1.5);
+    private static readonly Pen s_greenTargetPen = new(new SolidColorBrush(Color.FromArgb(180, 0, 255, 0)), 1.5);
+    private static readonly Pen s_blueTargetPen = new(new SolidColorBrush(Color.FromArgb(180, 0, 0, 255)), 1.5);
+    private static readonly Pen s_cyanTargetPen = new(new SolidColorBrush(Color.FromArgb(180, 0, 255, 255)), 1.5);
+    private static readonly Pen s_magentaTargetPen = new(new SolidColorBrush(Color.FromArgb(180, 255, 0, 255)), 1.5);
+    private static readonly Pen s_yellowTargetPen = new(new SolidColorBrush(Color.FromArgb(180, 255, 255, 0)), 1.5);
+
+    public bool ShowColorTargets
+    {
+        get;
+        set => SetAndRaise(ShowColorTargetsProperty, ref field, value);
+    } = true;
+
+    // Vectorscope uses circular display, no standard axis labels
+    protected override string[]? VerticalAxisLabels => null;
+
+    protected override string[]? HorizontalAxisLabels => null;
+
+    protected override unsafe WriteableBitmap? RenderScope(
+        byte[] sourceData,
+        int sourceWidth,
+        int sourceHeight,
+        int sourceStride,
+        int targetWidth,
+        int targetHeight,
+        WriteableBitmap? existingBitmap)
+    {
+        // Use square size for vectorscope
+        int size = Math.Min(targetWidth, targetHeight);
+        if (size <= 0) return null;
+
+        // Reuse existing bitmap if size matches
+        WriteableBitmap bitmap = existingBitmap?.PixelSize.Width == size && existingBitmap.PixelSize.Height == size
+            ? existingBitmap
+            : new WriteableBitmap(
+                new PixelSize(size, size),
+                new Vector(96, 96),
+                PixelFormat.Bgra8888,
+                AlphaFormat.Premul);
+
+        using ILockedFramebuffer fb = bitmap.Lock();
+        var dest = new Span<uint>((void*)fb.Address, (fb.RowBytes * fb.Size.Height) / sizeof(uint));
+        dest.Fill(PackColor(0, 0, 0, 0));
+        int stridePixels = fb.RowBytes / sizeof(uint);
+
+        int step = Math.Max(1, Math.Max(sourceWidth, sourceHeight) / size);
+
+        for (int y = 0; y < sourceHeight; y += step)
+        {
+            int row = y * sourceStride;
+            for (int x = 0; x < sourceWidth; x += step)
+            {
+                int idx = row + x * 4;
+                byte b = sourceData[idx];
+                byte g = sourceData[idx + 1];
+                byte r = sourceData[idx + 2];
+
+                // Convert RGB to CbCr (YCbCr color space)
+                int cb = (int)(-0.168736f * r - 0.331264f * g + 0.5f * b + 128);
+                int cr = (int)(0.5f * r - 0.418688f * g - 0.081312f * b + 128);
+
+                cb = Math.Clamp(cb, 0, 255);
+                cr = Math.Clamp(cr, 0, 255);
+
+                int vx = cb * (size - 1) / 255;
+                int vy = (255 - cr) * (size - 1) / 255;
+
+                PlotPoint(dest, stridePixels, vx, vy, PackColor(r, g, b, 180));
+            }
+        }
+
+        return bitmap;
+    }
+
+    public override void Render(DrawingContext context)
+    {
+        // Override to handle square aspect ratio for vectorscope
+        var bounds = Bounds;
+        double axisMargin = AxisMargin;
+        double availableWidth = bounds.Width - axisMargin;
+        double availableHeight = bounds.Height - axisMargin;
+
+        // Draw background
+        var bgBrush = BackgroundBrush;
+        if (bgBrush != null)
+        {
+            context.FillRectangle(bgBrush, new Rect(0, 0, bounds.Width, bounds.Height));
+        }
+
+        if (availableWidth <= 0 || availableHeight <= 0)
+            return;
+
+        // Calculate square size and centering offset
+        double squareSize = Math.Min(availableWidth, availableHeight);
+        double offsetX = axisMargin + (availableWidth - squareSize) / 2;
+        double offsetY = (availableHeight - squareSize) / 2;
+
+        DrawVectorscopeGridOnContext(context, offsetX, offsetY, squareSize);
+
+        if (ShowColorTargets)
+        {
+            DrawColorTargetsOnContext(context, offsetX, offsetY, squareSize);
+        }
+
+        // Draw rendered scope image centered
+        var bitmap = RenderedBitmap;
+        if (bitmap != null)
+        {
+            var destRect = new Rect(offsetX, offsetY, squareSize, squareSize);
+            context.DrawImage(bitmap, destRect);
+        }
+
+        // Draw minimal axis indicators for vectorscope
+        DrawVectorscopeAxes(context, bounds, axisMargin, offsetX, offsetY, squareSize);
+    }
+
+    private void DrawVectorscopeAxes(DrawingContext context, Rect bounds, double axisMargin, double offsetX,
+        double offsetY, double squareSize)
+    {
+        var labelBrush = LabelBrush ?? Brushes.Gray;
+
+        // Draw Cb label (horizontal - blue-yellow axis)
+        var cbLabel = new FormattedText(
+            "Cb",
+            CultureInfo.CurrentCulture,
+            FlowDirection.LeftToRight,
+            DefaultTypeface,
+            10,
+            labelBrush);
+        context.DrawText(cbLabel, new Point(offsetX + squareSize / 2 - cbLabel.Width / 2, offsetY + squareSize + 4));
+
+        // Draw Cr label (vertical - red-cyan axis)
+        var crLabel = new FormattedText(
+            "Cr",
+            CultureInfo.CurrentCulture,
+            FlowDirection.LeftToRight,
+            DefaultTypeface,
+            10,
+            labelBrush);
+        context.DrawText(crLabel,
+            new Point(axisMargin - crLabel.Width - 4, offsetY + squareSize / 2 - crLabel.Height / 2));
+    }
+
+    private void DrawVectorscopeGridOnContext(DrawingContext context, double offsetX, double offsetY, double size)
+    {
+        double center = size / 2;
+        double radius = size / 2 - 6;
+
+        // Draw crosshairs
+        context.DrawLine(s_gridPen, new Point(offsetX, offsetY + center), new Point(offsetX + size, offsetY + center));
+        context.DrawLine(s_gridPen, new Point(offsetX + center, offsetY), new Point(offsetX + center, offsetY + size));
+
+        // Draw outer circle
+        context.DrawEllipse(null, s_gridPen, new Point(offsetX + center, offsetY + center), radius, radius);
+
+        // Draw 75% radius circle
+        double radius75 = radius * 0.75;
+        context.DrawEllipse(null, s_innerGridPen, new Point(offsetX + center, offsetY + center), radius75, radius75);
+    }
+
+    private void DrawColorTargetsOnContext(DrawingContext context, double offsetX, double offsetY, double size)
+    {
+        var colorTargets = new (int Cb, int Cr, Pen Pen)[]
+        {
+            (90, 240, s_redTargetPen),      // Red
+            (54, 34, s_greenTargetPen),     // Green
+            (240, 110, s_blueTargetPen),    // Blue
+            (166, 16, s_cyanTargetPen),     // Cyan
+            (202, 222, s_magentaTargetPen), // Magenta
+            (16, 146, s_yellowTargetPen)    // Yellow
+        };
+
+        double sizeD = size;
+        double boxSize = 8;
+        foreach (var (cb, cr, pen) in colorTargets)
+        {
+            double x = offsetX + cb * (sizeD - 1) / 255;
+            double y = offsetY + (255 - cr) * (sizeD - 1) / 255;
+
+            context.DrawRectangle(null, pen, new Rect(x - boxSize / 2, y - boxSize / 2, boxSize, boxSize));
+        }
+    }
+}
diff --git a/src/Beutl/Views/Tools/Scopes/WaveformControl.cs b/src/Beutl/Views/Tools/Scopes/WaveformControl.cs
new file mode 100644
index 000000000..8f862b1c4
--- /dev/null
+++ b/src/Beutl/Views/Tools/Scopes/WaveformControl.cs
@@ -0,0 +1,300 @@
+using Avalonia;
+using Avalonia.Media.Imaging;
+using Avalonia.Platform;
+
+namespace Beutl.Views.Tools.Scopes;
+
+public enum WaveformMode
+{
+    Luma = 0,
+    RgbOverlay = 1,
+    RgbParade = 2
+}
+
+public class WaveformControl : ScopeControlBase
+{
+    public static readonly DirectProperty<WaveformControl, WaveformMode> ModeProperty =
+        AvaloniaProperty.RegisterDirect<WaveformControl, WaveformMode>(
+            nameof(Mode), o => o.Mode, (o, v) => o.Mode = v, WaveformMode.Luma);
+
+    public static readonly DirectProperty<WaveformControl, float> ThicknessProperty =
+        AvaloniaProperty.RegisterDirect<WaveformControl, float>(
+            nameof(Thickness), o => o.Thickness, (o, v) => o.Thickness = v, 5f);
+
+    public static readonly DirectProperty<WaveformControl, float> GainProperty =
+        AvaloniaProperty.RegisterDirect<WaveformControl, float>(
+            nameof(Gain), o => o.Gain, (o, v) => o.Gain = v, 10.0f);
+
+    public static readonly DirectProperty<WaveformControl, bool> ShowGridProperty =
+        AvaloniaProperty.RegisterDirect<WaveformControl, bool>(
+            nameof(ShowGrid), o => o.ShowGrid, (o, v) => o.ShowGrid = v, true);
+
+    private WaveformMode _mode = WaveformMode.Luma;
+    private float _thickness = 5f;
+    private float _gain = 10.0f;
+    private bool _showGrid = true;
+
+    private static readonly string[] s_verticalLabels = ["100", "75", "50", "25", "0"];
+    private static readonly (float R, float G, float B) s_colorLuma = (0.85f, 0.92f, 1.00f);
+    private static readonly (float R, float G, float B) s_colorRed = (1.00f, 0.25f, 0.25f);
+    private static readonly (float R, float G, float B) s_colorGreen = (0.25f, 1.00f, 0.35f);
+    private static readonly (float R, float G, float B) s_colorBlue = (0.35f, 0.60f, 1.00f);
+    private static readonly (float R, float G, float B) s_colorGrid = (0.08f, 0.08f, 0.09f);
+
+    static WaveformControl()
+    {
+        AffectsRender<WaveformControl>(ModeProperty, ThicknessProperty, GainProperty, ShowGridProperty);
+        ModeProperty.Changed.AddClassHandler<WaveformControl>((o, _) => o.Refresh());
+    }
+
+    public WaveformMode Mode
+    {
+        get => _mode;
+        set => SetAndRaise(ModeProperty, ref _mode, value);
+    }
+
+    public float Thickness
+    {
+        get => _thickness;
+        set => SetAndRaise(ThicknessProperty, ref _thickness, value);
+    }
+
+    public float Gain
+    {
+        get => _gain;
+        set => SetAndRaise(GainProperty, ref _gain, value);
+    }
+
+    public bool ShowGrid
+    {
+        get => _showGrid;
+        set => SetAndRaise(ShowGridProperty, ref _showGrid, value);
+    }
+
+    protected override string[]? VerticalAxisLabels => s_verticalLabels;
+
+    protected override string[]? HorizontalAxisLabels => null;
+
+    protected override unsafe WriteableBitmap? RenderScope(
+        byte[] sourceData,
+        int sourceWidth,
+        int sourceHeight,
+        int sourceStride,
+        int targetWidth,
+        int targetHeight,
+        WriteableBitmap? existingBitmap)
+    {
+        WriteableBitmap result = existingBitmap?.PixelSize.Width == targetWidth && existingBitmap.PixelSize.Height == targetHeight
+            ? existingBitmap
+            : new WriteableBitmap(
+                new PixelSize(targetWidth, targetHeight),
+                new Vector(96, 96),
+                PixelFormat.Bgra8888,
+                AlphaFormat.Premul);
+
+        if (targetWidth == 0 || targetHeight == 0 || sourceWidth == 0 || sourceHeight == 0)
+        {
+            return result;
+        }
+
+        WaveformMode mode = Mode;
+        float thickness = Thickness;
+        float gain = Gain;
+        bool showGrid = ShowGrid;
+        float[]? gridStrength = showGrid ? CreateGridStrength(targetHeight) : null;
+        int sampleCount = (int)Math.Clamp(sourceHeight * 0.25f, 32f, 1024f);
+        float invSamplesGain = gain / Math.Max(sampleCount, 1);
+
+        // Pre-compute inverse values to avoid division in hot loops
+        float invTargetWidth = 1f / targetWidth;
+        float invSampleCount = 1f / sampleCount;
+
+        using ILockedFramebuffer fb = result.Lock();
+
+        fixed (byte* srcPtr = sourceData)
+        {
+            IntPtr safeSrcPtr = (IntPtr)srcPtr;
+            byte* destPtr = (byte*)fb.Address;
+            int destRowBytes = fb.RowBytes;
+
+            Parallel.For(0, targetWidth, x =>
+            {
+                float x01 = (x + 0.5f) * invTargetWidth;
+                float paradeBand = 0f;
+
+                if (mode == WaveformMode.RgbParade)
+                {
+                    float x3 = x01 * 3f;
+                    paradeBand = MathF.Min(2f, MathF.Floor(x3));
+                    x01 = x3 - paradeBand;
+                }
+
+                Span<float> rBuffer = targetHeight <= 1024 ? stackalloc float[targetHeight] : new float[targetHeight];
+                Span<float> gBuffer = targetHeight <= 1024 ? stackalloc float[targetHeight] : new float[targetHeight];
+                Span<float> bBuffer = targetHeight <= 1024 ? stackalloc float[targetHeight] : new float[targetHeight];
+                Span<float> yBuffer = targetHeight <= 1024 ? stackalloc float[targetHeight] : new float[targetHeight];
+
+                int srcX = Math.Clamp((int)(x01 * sourceWidth), 0, sourceWidth - 1);
+
+                for (int i = 0; i < sampleCount; i++)
+                {
+                    int srcY = Math.Clamp((int)((i + 0.5f) * invSampleCount * sourceHeight), 0, sourceHeight - 1);
+
+                    byte* sample = (byte*)safeSrcPtr + (srcY * sourceStride) + (srcX * 4);
+                    float b = sample[0] * (1f / 255f);
+                    float g = sample[1] * (1f / 255f);
+                    float r = sample[2] * (1f / 255f);
+                    float a = sample[3] * (1f / 255f);
+
+                    if (a > 0f && a < 1f)
+                    {
+                        float invA = 1f / a;
+                        r *= invA;
+                        g *= invA;
+                        b *= invA;
+                    }
+
+                    float y = (0.2126f * r) + (0.7152f * g) + (0.0722f * b);
+
+                    if (mode == WaveformMode.Luma)
+                    {
+                        AddContribution(yBuffer, y, targetHeight, thickness);
+                    }
+                    else if (mode == WaveformMode.RgbOverlay)
+                    {
+                        AddContribution(rBuffer, r, targetHeight, thickness);
+                        AddContribution(gBuffer, g, targetHeight, thickness);
+                        AddContribution(bBuffer, b, targetHeight, thickness);
+                    }
+                    else
+                    {
+                        float channel = paradeBand < 0.5f ? r : paradeBand < 1.5f ? g : b;
+
+                        if (paradeBand < 0.5f)
+                        {
+                            AddContribution(rBuffer, channel, targetHeight, thickness);
+                        }
+                        else if (paradeBand < 1.5f)
+                        {
+                            AddContribution(gBuffer, channel, targetHeight, thickness);
+                        }
+                        else
+                        {
+                            AddContribution(bBuffer, channel, targetHeight, thickness);
+                        }
+                    }
+                }
+
+                for (int y = 0; y < targetHeight; y++)
+                {
+                    float gridVal = showGrid && gridStrength is not null ? gridStrength[y] : 0f;
+                    float gridR = gridVal * s_colorGrid.R;
+                    float gridG = gridVal * s_colorGrid.G;
+                    float gridB = gridVal * s_colorGrid.B;
+
+                    // Fast tone mapping: 1 - exp(-x) ≈ x / (1 + x * 0.5) for brighter results
+                    float rrIn = rBuffer[y] * invSamplesGain;
+                    float ggIn = gBuffer[y] * invSamplesGain;
+                    float bbIn = bBuffer[y] * invSamplesGain;
+                    float yyIn = yBuffer[y] * invSamplesGain;
+
+                    float rr = rrIn / (1f + rrIn * 0.5f);
+                    float gg = ggIn / (1f + ggIn * 0.5f);
+                    float bb = bbIn / (1f + bbIn * 0.5f);
+                    float yy = yyIn / (1f + yyIn * 0.5f);
+
+                    float colR;
+                    float colG;
+                    float colB;
+
+                    if (mode == WaveformMode.Luma)
+                    {
+                        colR = yy * s_colorLuma.R;
+                        colG = yy * s_colorLuma.G;
+                        colB = yy * s_colorLuma.B;
+                    }
+                    else if (mode == WaveformMode.RgbOverlay)
+                    {
+                        colR = rr * s_colorRed.R + gg * s_colorGreen.R + bb * s_colorBlue.R;
+                        colG = rr * s_colorRed.G + gg * s_colorGreen.G + bb * s_colorBlue.G;
+                        colB = rr * s_colorRed.B + gg * s_colorGreen.B + bb * s_colorBlue.B;
+                    }
+                    else
+                    {
+                        colR = rr * s_colorRed.R + gg * s_colorGreen.R + bb * s_colorBlue.R;
+                        colG = rr * s_colorRed.G + gg * s_colorGreen.G + bb * s_colorBlue.G;
+                        colB = rr * s_colorRed.B + gg * s_colorGreen.B + bb * s_colorBlue.B;
+                    }
+
+                    // Fast gamma correction: pow(x, 0.769) ≈ sqrt(x) * (0.65 + 0.35*x) for brighter results
+                    float valR = MathF.Max(0f, colR + gridR);
+                    float valG = MathF.Max(0f, colG + gridG);
+                    float valB = MathF.Max(0f, colB + gridB);
+
+                    colR = MathF.Sqrt(valR) * (0.65f + 0.35f * valR);
+                    colG = MathF.Sqrt(valG) * (0.65f + 0.35f * valG);
+                    colB = MathF.Sqrt(valB) * (0.65f + 0.35f * valB);
+
+                    int destIndex = (y * destRowBytes) + (x * 4);
+                    destPtr[destIndex + 0] = (byte)(Math.Clamp(colB, 0f, 1f) * 255f);
+                    destPtr[destIndex + 1] = (byte)(Math.Clamp(colG, 0f, 1f) * 255f);
+                    destPtr[destIndex + 2] = (byte)(Math.Clamp(colR, 0f, 1f) * 255f);
+                    destPtr[destIndex + 3] = 255;
+                }
+            });
+        }
+
+        return result;
+    }
+
+    private static void AddContribution(Span<float> buffer, float value, int height, float thickness)
+    {
+        float clamped = Math.Clamp(value, 0f, 1f);
+        float yPos = 1f - clamped;
+        float center = yPos * height;
+        float radius = MathF.Max(thickness * 3f, 1f);
+        int start = Math.Max(0, (int)MathF.Floor(center - radius));
+        int end = Math.Min(height - 1, (int)MathF.Ceiling(center + radius));
+        float invDenom = 1f / MathF.Max(thickness, 1e-3f);
+        float invHeight = 1f / height;
+
+        for (int y = start; y <= end; y++)
+        {
+            float y01 = (y + 0.5f) * invHeight;
+            float k = MathF.Abs(y01 - yPos) * height * invDenom;
+            float kSq = k * k;
+            // Fast Gaussian approximation: exp(-x²) ≈ 1/(1 + x² + 0.5*x⁴) for small x
+            // More accurate and faster than MathF.Exp for this use case
+            float contribution = 1f / (1f + kSq + 0.5f * kSq * kSq);
+            buffer[y] += contribution;
+        }
+    }
+
+    private static float[] CreateGridStrength(int height)
+    {
+        var grid = new float[height];
+
+        for (int y = 0; y < height; y++)
+        {
+            float v = (y + 0.5f) / height;
+            float g = 0f;
+            g += 0.35f * GridLine(v, 1f - 0f, 0.75f, height);
+            g += 0.25f * GridLine(v, 1f - 0.25f, 0.75f, height);
+            g += 0.30f * GridLine(v, 1f - 0.50f, 0.75f, height);
+            g += 0.25f * GridLine(v, 1f - 0.75f, 0.75f, height);
+            g += 0.35f * GridLine(v, 1f - 1f, 0.75f, height);
+            grid[y] = g * 0.12f;
+        }
+
+        return grid;
+    }
+
+    private static float GridLine(float v, float t, float px, int height)
+    {
+        float d = MathF.Abs(v - t);
+        float k = (d * height) / MathF.Max(px, 1e-3f);
+        float kSq = k * k;
+        // Fast Gaussian approximation: exp(-x²) ≈ 1/(1 + x² + 0.5*x⁴)
+        return 1f / (1f + kSq + 0.5f * kSq * kSq);
+    }
+}
diff --git a/src/Beutl/Views/Tools/Scopes/WaveformModeConverter.cs b/src/Beutl/Views/Tools/Scopes/WaveformModeConverter.cs
new file mode 100644
index 000000000..ca17403aa
--- /dev/null
+++ b/src/Beutl/Views/Tools/Scopes/WaveformModeConverter.cs
@@ -0,0 +1,28 @@
+using Avalonia.Data.Converters;
+
+namespace Beutl.Views.Tools.Scopes;
+
+public sealed class WaveformModeConverter : IValueConverter
+{
+    public static readonly WaveformModeConverter Instance = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is WaveformMode mode)
+        {
+            return (int)mode;
+        }
+
+        return 0;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is int index && Enum.IsDefined(typeof(WaveformMode), index))
+        {
+            return (WaveformMode)index;
+        }
+
+        return WaveformMode.Luma;
+    }
+}