<div class="controls"> <button id="randomizeBtn">๐ŸŽฒ RANDOMIZE LUT</button> <button id="smoothBtn">๐ŸŒ€ SMOOTH (3x3 blur)</button> <button id="gradientBtn">๐ŸŒˆ GRADIENT DIAGONAL</button> <button id="clearBtn">โ„๏ธ CLEAR (ZERO)</button> <div class="slider-container"> <label>๐Ÿ”ฎ EDIT STRENGTH</label> <input type="range" id="editStrength" min="0" max="1" step="0.01" value="0.35"> </div> </div> <div class="controls"> <button id="sinusoidalBtn">๐ŸŒŠ SINUSOIDAL RIPPLE</button> <button id="checkerBtn">โ—ฉ CHECKERBOARD 8x8</button> <button id="invertBtn">โ— INVERT LUT</button> </div> <div class="footer-note"> โœฆ 16x16 programmable LUT | Click / Drag on cells to paint values | Each cell = 32x32px โœฆ </div> </div> </div>

.value-readout background: #03060c; padding: 0.3rem 1rem; border-radius: 2rem; font-family: monospace; font-weight: bold; font-size: 1rem; color: #f0b27a;

.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;

.coord-readout background: #03060c; padding: 0.3rem 1rem; border-radius: 2rem; font-family: 'Fira Code', monospace; font-size: 0.9rem; letter-spacing: 0.5px; border: 1px solid #2d3e5a; box-shadow: inset 0 0 4px #00000055;

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;

@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>

.footer-note font-size: 0.7rem; text-align: center; margin-top: 1rem; color: #5e779b; font-family: monospace;

input[type="range"] width: 160px; height: 4px; -webkit-appearance: none; background: #2c3e4e; border-radius: 5px; outline: none;

Lut Generator 0.15 Link

Lut Generator 0.15 Link

<div class="controls"> <button id="randomizeBtn">๐ŸŽฒ RANDOMIZE LUT</button> <button id="smoothBtn">๐ŸŒ€ SMOOTH (3x3 blur)</button> <button id="gradientBtn">๐ŸŒˆ GRADIENT DIAGONAL</button> <button id="clearBtn">โ„๏ธ CLEAR (ZERO)</button> <div class="slider-container"> <label>๐Ÿ”ฎ EDIT STRENGTH</label> <input type="range" id="editStrength" min="0" max="1" step="0.01" value="0.35"> </div> </div> <div class="controls"> <button id="sinusoidalBtn">๐ŸŒŠ SINUSOIDAL RIPPLE</button> <button id="checkerBtn">โ—ฉ CHECKERBOARD 8x8</button> <button id="invertBtn">โ— INVERT LUT</button> </div> <div class="footer-note"> โœฆ 16x16 programmable LUT | Click / Drag on cells to paint values | Each cell = 32x32px โœฆ </div> </div> </div>

.value-readout background: #03060c; padding: 0.3rem 1rem; border-radius: 2rem; font-family: monospace; font-weight: bold; font-size: 1rem; color: #f0b27a;

.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;

.coord-readout background: #03060c; padding: 0.3rem 1rem; border-radius: 2rem; font-family: 'Fira Code', monospace; font-size: 0.9rem; letter-spacing: 0.5px; border: 1px solid #2d3e5a; box-shadow: inset 0 0 4px #00000055;

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;

@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>

.footer-note font-size: 0.7rem; text-align: center; margin-top: 1rem; color: #5e779b; font-family: monospace;

input[type="range"] width: 160px; height: 4px; -webkit-appearance: none; background: #2c3e4e; border-radius: 5px; outline: none;

1 2 3 4 5 Next >