Lut Generator 0.15 〈COMPLETE | 2026〉
.title-badge span color: #7aaef0; font-weight: 300;
input[type="range"]::-webkit-slider-thumb -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #5f9eff; cursor: pointer; box-shadow: 0 0 4px #9bc0ff; border: none;
.lut-panel background: #0a0d14; border-radius: 2rem; padding: 1.5rem; box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.3); lut generator 0.15
@media (max-width: 650px) .lut-container padding: 1rem; .lut-panel padding: 0.8rem; button padding: 0.4rem 0.9rem; font-size: 0.7rem; .coord-readout font-size: 0.7rem; </style> </head> <body> <div class="lut-container"> <div class="lut-panel"> <canvas id="lutCanvas" width="512" height="512" style="width:100%; height:auto; max-width:512px; aspect-ratio:1/1"></canvas>
.value-readout background: #03060c; padding: 0.3rem 1rem; border-radius: 2rem; font-family: monospace; font-weight: bold; font-size: 1rem; color: #f0b27a; .title-badge span color: #7aaef0
canvas:active transform: scale(0.99);
Here is the piece, formatted as a ready-to-use HTML document. It generates a programmable 16×16 Look-Up Table (LUT) visualization with color mapping and value display. box-shadow: 0 0 4px #9bc0ff
<div class="info-bar"> <div class="title-badge">⚡ LUT GENERATOR <span>v0.15</span></div> <div class="coord-readout" id="coordDisplay">⏺ hover: [— , —]</div> <div class="value-readout" id="valueDisplay">LUT value: 0.00</div> </div>
