Skip to content

Conversation

@majiayu000
Copy link
Contributor

Summary

Add a hexadecimal input field to the color picker component, allowing users to input colors using hex notation (e.g., #FF5500) in addition to the visual palette.

Changes

  • Add satus.color.rgbToHex() function for RGB to hex conversion
  • Add satus.color.hexToRgb() function for hex to RGB conversion
    • Supports both full (#RRGGBB) and shorthand (#RGB) notation
  • Add hexadecimal input field to color picker modal
    • Input syncs with palette, hue slider, and color preview
    • Palette and hue slider update hex input when changed
  • Add CSS styles for hex input container, label, and input field
  • Add unit tests for color conversion and UI components

Features

  • HEX input field appears below the hue slider in the color picker
  • Typing a valid hex color updates the palette, cursor position, hue slider, and preview
  • Moving the palette cursor or hue slider updates the hex input
  • Supports both #RRGGBB and #RGB shorthand formats
  • Invalid hex values are ignored (no error shown, just no update)

Test plan

  • Open Themes > Custom and click on a color picker
  • Verify the HEX input field appears below the hue slider
  • Type a valid hex color (e.g., #FF5500) and verify the palette updates
  • Verify the color preview updates when typing a valid hex color
  • Move the palette cursor and verify the hex input updates
  • Move the hue slider and verify the hex input updates
  • Verify shorthand hex (#F50) works correctly
  • All unit tests pass (npm test)

Fixes #3381

…#3381)

Add a hexadecimal input field to the color picker component, allowing
users to input colors using hex notation (e.g., #FF5500) in addition
to the visual palette.

Changes:
- Add satus.color.rgbToHex() function for RGB to hex conversion
- Add satus.color.hexToRgb() function for hex to RGB conversion
  - Supports both full (#RRGGBB) and shorthand (#RGB) notation
- Add hexadecimal input field to color picker modal
  - Input syncs with palette, hue slider, and color preview
  - Palette and hue slider update hex input when changed
- Add CSS styles for hex input container, label, and input field
- Add unit tests for color conversion and UI components

The hex input provides a more precise way for users to input specific
colors, especially when copying colors from design tools or websites.

Co-Authored-By: Claude Opus 4.5 <[email protected]>
@ImprovedTube
Copy link
Member

thanks @majiayu000

tested?
(it can easily be tested. no need to submit prior or submit long LLM messages.)

@ImprovedTube ImprovedTube added the untested please test. (also applies to proactively merged pull requests.) label Dec 15, 2025
Update hex input field in real-time when user drags on the color
palette, matching the existing behavior of the hue slider.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

untested please test. (also applies to proactively merged pull requests.)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

💡hexadecimal input instead of (or in addition to) color wheel.

2 participants