diff --git a/src/ui/canvas_view.zig b/src/ui/canvas_view.zig
index 6cf478e..30e904f 100644
--- a/src/ui/canvas_view.zig
+++ b/src/ui/canvas_view.zig
@@ -186,7 +186,7 @@ fn handleCanvasZoom(canvas: *Canvas, scroll: anytype) void {
                     switch (action) {
                         .wheel_y => |y| {
                             const viewport_pt = scroll.data().contentRectScale().pointFromPhysical(mouse.p);
-                            var content_pt = dvui.Point{
+                            const content_pt = dvui.Point{
                                 .x = viewport_pt.x + canvas.scroll.viewport.x,
                                 .y = viewport_pt.y + canvas.scroll.viewport.y,
                             };
@@ -204,13 +204,6 @@ fn handleCanvasZoom(canvas: *Canvas, scroll: anytype) void {
 
                             canvas.scroll.viewport.x -= dx;
                             canvas.scroll.viewport.y -= dy;
-                            content_pt = dvui.Point{
-                                .x = viewport_pt.x + canvas.scroll.viewport.x,
-                                .y = viewport_pt.y + canvas.scroll.viewport.y,
-                            };
-                            const fixed = canvas.contentPointToDocument(content_pt, natural_scale);
-
-                            std.debug.print("prev: {any}, after: {any}, fixed: {}\n", .{ doc_pt, doc_pt_after, fixed });
                         },
                         else => {},
                     }
@@ -467,14 +460,13 @@ fn drawPropertyEditor(canvas: *Canvas, obj: *Document.Object, prop: *const Prope
 }
 
 fn drawColorEditor(canvas: *Canvas, obj: *Document.Object, rgba: u32, is_fill: bool) void {
-    var comps = rgbaToComponents(rgba);
-    var changed = false;
-    changed = dvui.sliderEntry(@src(), "r: {d:0.0}", .{ .value = &comps.r, .min = 0, .max = 255, .interval = 1 }, .{ .expand = .horizontal }) or changed;
-    changed = dvui.sliderEntry(@src(), "g: {d:0.0}", .{ .value = &comps.g, .min = 0, .max = 255, .interval = 1 }, .{ .expand = .horizontal }) or changed;
-    changed = dvui.sliderEntry(@src(), "b: {d:0.0}", .{ .value = &comps.b, .min = 0, .max = 255, .interval = 1 }, .{ .expand = .horizontal }) or changed;
-    changed = dvui.sliderEntry(@src(), "a: {d:0.0}", .{ .value = &comps.a, .min = 0, .max = 255, .interval = 1 }, .{ .expand = .horizontal }) or changed;
-    if (changed) {
-        const next = componentsToRgba(comps);
+    var hsv = dvui.Color.HSV.fromColor(rgbaToColor(rgba));
+    if (dvui.colorPicker(
+        @src(),
+        .{ .hsv = &hsv, .dir = .horizontal, .sliders = .rgb, .alpha = true, .hex_text_entry = true },
+        .{ .expand = .horizontal },
+    )) {
+        const next = colorToRgba(hsv.toColor());
         if (is_fill) {
             obj.setProperty(canvas.document.allocator, .{ .data = .{ .fill_rgba = next } }) catch {};
         } else {
@@ -502,30 +494,18 @@ fn propertyLabel(tag: std.meta.Tag(PropertyData)) []const u8 {
     };
 }
 
-const RgbaComponents = struct {
-    r: f32,
-    g: f32,
-    b: f32,
-    a: f32,
-};
-
-fn rgbaToComponents(rgba: u32) RgbaComponents {
+fn rgbaToColor(rgba: u32) dvui.Color {
     return .{
-        .r = @floatFromInt((rgba >> 24) & 0xFF),
-        .g = @floatFromInt((rgba >> 16) & 0xFF),
-        .b = @floatFromInt((rgba >> 8) & 0xFF),
-        .a = @floatFromInt((rgba >> 0) & 0xFF),
+        .r = @intCast((rgba >> 24) & 0xFF),
+        .g = @intCast((rgba >> 16) & 0xFF),
+        .b = @intCast((rgba >> 8) & 0xFF),
+        .a = @intCast((rgba >> 0) & 0xFF),
     };
 }
 
-fn componentsToRgba(comps: RgbaComponents) u32 {
-    return (@as(u32, toByte(comps.r)) << 24) |
-        (@as(u32, toByte(comps.g)) << 16) |
-        (@as(u32, toByte(comps.b)) << 8) |
-        (@as(u32, toByte(comps.a)) << 0);
-}
-
-fn toByte(value: f32) u8 {
-    const clamped = std.math.clamp(@round(value), 0.0, 255.0);
-    return @intFromFloat(clamped);
+fn colorToRgba(color: dvui.Color) u32 {
+    return (@as(u32, color.r) << 24) |
+        (@as(u32, color.g) << 16) |
+        (@as(u32, color.b) << 8) |
+        (@as(u32, color.a) << 0);
 }