Skip to content

Feat: Add Qualifiers For Advanced Color Manipulation#1131

Draft
mmadesignerunknown wants to merge 8 commits into
CyberTimon:mainfrom
mmadesignerunknown:feat-9x9-hsl-curves
Draft

Feat: Add Qualifiers For Advanced Color Manipulation#1131
mmadesignerunknown wants to merge 8 commits into
CyberTimon:mainfrom
mmadesignerunknown:feat-9x9-hsl-curves

Conversation

@mmadesignerunknown
Copy link
Copy Markdown
Contributor

@mmadesignerunknown mmadesignerunknown commented May 4, 2026

Description

This PR adds a complete HSL Qualifiers system to the Color panel, enabling selective color grading based on Hue, Saturation, and Luminance ranges. Users can now target specific colors and independently shift their Hue, Saturation, and Luminance values.

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Performance improvement
  • Code refactoring
  • Documentation update
  • UI/UX improvement
  • Build/CI or Dependency update

Changes Made

  • New RangeSlider component (src/components/ui/RangeSlider.tsx): Dual-handle range slider with gradient backgrounds, value editing, shift+wheel fine adjustment, and reset functionality
  • Updated adjustments.tsx: Added Qualifier and QualifierHslRange interfaces to support qualifier data structure
  • Updated Color.tsx: Added complete Qualifiers panel with:
    • Add/delete qualifier buttons
    • Expand/collapse for each qualifier
    • Hue Range selector (0-360°) with rainbow gradient track
    • Saturation Range selector (0-100%) with grayscale gradient track
    • Luminance Range selector (0-100%) with black-to-white gradient track
    • Hue Shift control (-180° to +180°)
    • Saturation Shift control (-100% to +100%)
    • Luminance Shift control (-100% to +100%)
    • Double-click reset on any range label

Screenshots/Videos

image image image image

Testing

  • I have tested these changes locally and confirmed that they work as expected without issues

Test Configuration:

  • OS: Windows 10
  • Hardware: Intel i5

Checklist

  • My code follows the project's code style
  • I haven't added unnecessary AI-generated code comments
    • Some were added in the new file, I will clean them once the frontend gets approved
  • My changes generate no new warnings or errors

Additional Notes

AI Disclaimer:

Please state the involvement of AI in this PR:

  • This PR is entirely AI-generated
  • This PR is AI-generated but guided by a human
  • This PR was handwritten with AI assistance (spell check, logic suggestions, error resolving)
  • This PR contains only blood, sweat, and coffee (AI-free)

Issues Closed:

Closes #1080

@mmadesignerunknown mmadesignerunknown marked this pull request as draft May 4, 2026 15:37
@Flohhhhh
Copy link
Copy Markdown
Contributor

Flohhhhh commented May 4, 2026

Looks interesting!

Personally I don't use this at all in my workflow so I can't comment on the UX or effectiveness of it, but I do have one note for UI

I find the empty state a little overbearing "Qualifiers let you target..." should maybe be left to a tooltip or other method to explain? Empty state could just be "No qualifiers added. Click + to create one."

@mmadesignerunknown
Copy link
Copy Markdown
Contributor Author

Looks interesting!

Personally I don't use this at all in my workflow so I can't comment on the UX or effectiveness of it, but I do have one note for UI

I find the empty state a little overbearing "Qualifiers let you target..." should maybe be left to a tooltip or other method to explain? Empty state could just be "No qualifiers added. Click + to create one."

Great Idea!
Will implement once I get free from my exams and have some time ;)

Regards,

git checkout feat-color-grading-panel-restructuring
git merge upstream/main
git push origin feat-color-grading-panel-restructuring

git checkout feat-color-mixer-panel-improvements
git merge upstream/main
git push origin feat-color-mixer-panel-improvements

git checkout feat-gradient-sliders-for-color-grading-panel
git merge upstream/main
git push origin feat-gradient-sliders-for-color-grading-panel

git checkout feat-migration-from-sam-2-to-sam-3
git merge upstream/main
git push origin feat-migration-from-sam-2-to-sam-3

git checkout feat-more-control-on-color-wheels-while-dragging
git merge upstream/main
git push origin feat-more-control-on-color-wheels-while-dragging

git checkout feat-parametric-curve-improvements
git merge upstream/main
git push origin feat-parametric-curve-improvements

git checkout feat-parametric-tone-curve-with-sliders
git merge upstream/main
git push origin feat-parametric-tone-curve-with-sliders

git checkout feat-persisted-history
git merge upstream/main
git push origin feat-persisted-history

git checkout feat-tat-picker-for-color-mix-and-tone-curves
git merge upstream/main
git push origin feat-tat-picker-for-color-mix-and-tone-curves

git checkout feat-versioning
git merge upstream/main
git push origin feat-versioning
@mmadesignerunknown
Copy link
Copy Markdown
Contributor Author

mmadesignerunknown commented May 9, 2026

@Flohhhhh ,
Removed the "Qualifiers let's you target....".
I will add the tooltip once this PR gets approved: #1076, any other things you think should be adjusted, before I start working on the backend :)

Regards,

@mmadesignerunknown
Copy link
Copy Markdown
Contributor Author

Just a quick question @CyberTimon @Flohhhhh ,

Should I keep the backend for Color Mixer as it is, or make it like in the backend, the color adjustments in Color Mixer as pre-made Qualifiers that cannot be deleted.

A little confused here :(, Would appreciate the help!

Regards,

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.

FEATURE: Advanced Color Zones / HSL Curves

2 participants