Studio One - Color presets from image

[dr_vlat]

Hello Studio One users!

Some time ago I created a free tool that generates color presets in a Studio One format, using any provided image as a reference and applying color harmonization rules.
I mainly use it for myself, as I enjoy experimenting with the “feeling” of different color sets — but perhaps someone else will also find it useful.

I’ve made it into a web app that runs entirely on the client side. You can check it here:
https://s1.vladbox.org

Cheers!

 

[Lukas]

Very nice tool - congrats!

Looks very good. React? Vue?

 

[BobF]

Watching ...

 

[dr_vlat]

Very nice tool - congrats!

Looks very good. React? Vue?

Hi Lukas!
Thanks for the kind words, really appreciate it!

It’s React, but honestly the main credit for the React port goes to Grok. The original palette extractor I wrote years ago was intended for other software than S1, and it was written in C (since I usually sail the C/C++ waters when the programmer side of me wakes up). I just did some profiling and cleanup afterward—though the code was already pretty clean.

 

[dr_vlat]

v0.2.2 is online.

Changelog:

• Palette generation is more robust with k-means clustering and expanded palette types.
• More user-friendy with tooltips, dynamic thresholding, and a guided workflow.
• The copy-to-clipboard feature and color value display. (mostly for debug purposes, but who knows)
• Finer hue categories and new harmonization models for more variative results.
• Performance improvements, especially for large images.
• Dark mode as UI improvement.

Spoiler: Technical changelog (ai-generated)

New Features

• Version Update: Updated from v0.1 to v0.2.2, reflecting significant enhancements.
• New Palette Types:
  • Added support for triadic, analogous, and monochromatic palette types alongside complementary and variations.
  • New functions: generateTriadicPalette, generateAnalogousPalette, and generateMonochromaticPalette for generating color schemes based on color theory.
• Harmonization Options:
  • Added earthy and jewel harmonization models to the existing 70s, 80s, vibrant, neon, and pasteloptions.
• Adaptive Similarity Threshold:
  • Introduced useAdaptiveThreshold state and getAdaptiveThreshold function to dynamically adjust the similarity filter based on color diversity, with a user-toggleable checkbox.
• Color Value Display:
  • Added showColorValues state and toggle to display hex codes on palette swatches.
• Copy to Clipboard:
  • Added functionality to copy individual color hex codes to the clipboard with a "Copy" button on each swatch, with visual feedback ("Copied!" for 1.5 seconds).
• Expanded Color Categories:
  • Extended hue categories for categorical extraction from 6 (red, orange, yellow, green, blue, purple) to 12, adding coral, amber, lime, teal, indigo, and magenta for finer granularity.
• UI Enhancements:
  • Added Hint component with tooltips for Extraction Method, Dominant Colors, Palette Type, Colors per Group, and Similarity Filter to improve user guidance.
  • Included an introductory guide above controls, recommending Categorical mode with Analogouspalette and 10 colors per group, with tips for adjusting settings.
  • Added arrows (→) between control inputs on larger screens to visually guide the workflow.
• MIT License:
  • Added explicit mention of the MIT License for the project.

Improvements

• Color Extraction:
  • Replaced simple pixel averaging in getDominantColor with getMedianColor for more robust color representation.
  • Replaced basic color bucketing in getDominantColors with kMeansClustering for improved dominant color detection, including sampling and timeout handling (5 seconds).
• Color Variations:
  • Enhanced generateColorVariations to include slight hue and saturation variations for more natural results.
• Performance Optimization:
  • Reduced image processing size from maxDim=150 to maxDim=100 for faster palette generation.
  • Optimized kMeansClustering with a sample size of 1000 pixels and a maximum of 10 iterations.
• Similarity Filtering:
  • Improved filterSimilarColors to handle edge cases (e.g., single color) and optimize loop efficiency.
  • Adjusted similarity threshold range from 0-30 to dynamically adapt with getAdaptiveThreshold.
• RGB to LAB Conversion:
  • Simplified and optimized rgbToLab function for better readability and performance.
• Error Handling:
  • Added img.onerror handler to log image loading failures and reset loading state.
• UI/UX:
  • Increased max container width from max-w-4xl to max-w-6xl for better layout on larger screens.
  • Limited image preview height to max-h-64 for consistent display.
  • Improved swatch styling with hover effects and dynamic text color based on luminance.
  • Adjusted colorsPerHue default from 10 to 11 and range from 2-20 to 3-20 for better control.
  • Made dominantColorCount adjustable via a slider (1-16) when using complementary extraction, with a tooltip.
• Code Cleanup:
  • Removed commented-out hue sorting code.
  • Improved variable naming and code structure for clarity.

Bug Fixes

• Fixed potential issue in rgbToLab by simplifying variable assignments and ensuring correct scaling.
• Addressed potential infinite loop in kMeansClustering with a 5-second timeout.
• Fixed typo in SVG path for loading spinner (5.373e to 5.373).

 

[AAV]

This is actually quite lovely. . Though I mostly use the Color Toolbar utility for workflow efficiency, so I am not sure how much use I would make of this., But it is really a nice app and the results are aesthetically very appealing. Really nice. Thanks for sharing.