Skip to content

Conversation

@TigerInYourDream
Copy link

Summary

Add a complete ColorPicker component with HSV color model support.

Components

  • MpHueSlider: Rainbow gradient hue slider with draggable thumb
  • MpSVPicker: 2D saturation/value picker area
  • MpColorSwatch: Color preview with checkerboard pattern for transparency visualization
  • MpPresetColor: Clickable preset color swatches with hover effects
  • MpColorPicker: Main composite component combining all sub-components

Features

  • HSV color model for intuitive color selection
  • Hex input field for precise color entry
  • 16 preset colors (8 vibrant + 8 grayscale) for quick selection
  • Bidirectional sync between all controls (slider, picker, hex input, preview)
  • Shader-based rendering for smooth gradients
  • Animator support for hover/pressed states

Technical Details

  • Uses Makepad's Sdf2d shader system for gradient rendering
  • Implements Hsv struct with conversion utilities:
    • to_rgb() / from_rgb()
    • to_hex() / from_hex()
    • to_vec4()
  • Feature-gated with ColorPicker feature flag
  • Follows existing component patterns in the codebase

Demo

Added ColorPicker demo section to component-zoo example app.

Screenshot

The component displays:

  • A large SV picker area at the top
  • Color preview swatch + hue slider + hex input in the middle
  • Two rows of preset colors at the bottom

Add a complete ColorPicker component with:
- MpHueSlider: Rainbow gradient hue slider
- MpSVPicker: 2D saturation/value picker
- MpColorSwatch: Color preview with checkerboard for transparency
- MpPresetColor: Clickable preset color swatches
- MpColorPicker: Main composite component
- Hsv struct: Color space conversion utilities

Features:
- HSV color model for intuitive color selection
- Hex input for precise color entry
- 16 preset colors for quick selection
- Bidirectional sync between all controls
- Shader-based rendering for smooth gradients
@TigerInYourDream
Copy link
Author

CleanShot 2026-01-29 at 15 28 14@2x

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant