Color Picker

The Color Picker feature provides a custom color selection interface for the Matrix Framework Style Editor. It replaces Jimdo's built-in color picker with a more powerful and intuitive popup system that allows users to select colors from a predefined palette, adjust opacity, and input custom hex colors.

Custom Color Picker Popup

- Right-side positioning: Appears on the right side of the screen, similar to the Config Classes popup

- Draggable interface: Users can move the popup to their preferred location

- Click-outside-to-close: Intuitive closing behavior

- Professional styling: Matches the Matrix Framework design system

1. Color Palette

- 64 predefined colors: Grid of 8x8 color swatches for quick selection

- Visual feedback: Active color is highlighted with a blue border

- Hover effects: Color swatches scale up on hover for better visibility

- One-click selection: Instantly applies color to the selected cell

2. Custom Color Input

- Hex color input: Direct hex color code entry (e.g., `#1b2cc1`)

- Color preview: Visual preview box shows the current color

- Native color picker: Hidden native browser color picker for advanced selection

- Real-time updates: Preview updates immediately as you type or select

3. Opacity Control

- Slider interface: Range slider from 0% to 100% opacity

- Visual feedback: Percentage display shows current opacity value

- Smooth adjustment: Real-time opacity changes with immediate preview

4. Copy & Paste Functionality

- Copy button: Copies the current color's hex code to clipboard

- Paste button: Applies previously copied color to the current cell

- Visual feedback: Paste button is disabled when no color is copied

If you have encountered any bugs, errors, or unexpected behavior in the Color Picker please leave a comment below.