input[type="range"] width: 160px; height: 4px; -webkit-appearance: none; background: #2c3e4e; border-radius: 5px; outline: none;
<script> (function() // ----------------------------- CONFIGURATION --------------------------------- const LUT_SIZE = 16; // 16x16 look-up table const CELL_SIZE = 32; // 512/16 = 32px per cell const CANVAS_SIZE = LUT_SIZE * CELL_SIZE; // 512 lut generator 0.15
.info-bar display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; margin-bottom: 0.8rem; color: #bfd9ff; font-weight: 500; input[type="range"] width: 160px
button, .preset-btn background: #1a2533; border: none; font-family: 'Segoe UI', 'Fira Code', monospace; font-weight: 600; font-size: 0.8rem; padding: 0.6rem 1.2rem; border-radius: 3rem; color: #d6e6ff; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.4); letter-spacing: 0.3px; backdrop-filter: blur(2px); border: 1px solid #2f4057; // 512 .info-bar display: flex
@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>
.title-badge span color: #7aaef0; font-weight: 300;
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.