ROGB Wheel Studio

Interactive multi-ring ROGB wheel with draggable marbles, collision blending, hover identification, and off-wheel movement space. Click any palette swatch to make it Selected, then hit Add Marble to drop a new draggable color anchor into the field.
Deploy-ready single file Local autosave + JSON export All rights reserved notice included
Base HEX: #FF0000
Base RGB: 255, 0, 0
Locked: 4:0
Selected HEX:
Selected RGB:
Source:
Drag marbles · click wheel = lock Hover marbles/lens = identify
Marble center markers are see‑through (outline only) so you can see the underlying wheel step. Layout and marble state can also be saved locally in your browser.
Use notes

This build is set up as a self-contained deploy page. It keeps your layout in local browser storage, lets you export/import a JSON snapshot, and keeps the original wheel interaction intact for quick hosting on Netlify or similar static hosts.

Credit / licensing

© Zach Bogart. All rights reserved. Do not copy, redistribute, repost, modify, resell, or republish this site or its design without permission. Contact the owner for licensing or reuse approval.

Marbles
Click a marble to make it Active (Active drives the left palette output).
Active:
Anchor HEX:
Selector:
Active mixed (outer 128) HEX:
Active mixed (outer 128) RGB:
Active marble palette output (2→256 + core)
Hover HEX:
Hover RGB:
Hover:
Collision lens palette output (overlap only)
Drag marbles to overlap…
Copied!