🎨 TUTORIAL DEL CÓDIGO DEL PAINT
Aprende a implementar este widget clásico de Paint en tu blog
📌 Código tal como está en mi blog — Copia y pega este código en tu entrada de Blogger
💻 Código completo
<div class="sempasuchitl-paint-widget-left">
<!-- Barra de título clásica -->
<div class="paint-window-bar">
<span class="paint-title">🎨 untitled - Paint</span>
<div class="paint-window-controls">
<span class="paint-btn-mini" onclick="minimizeWidget()">_</span>
<span class="paint-btn-mini" onclick="closeWidget()">✕</span>
</div>
</div>
<!-- Barra de Menú -->
<div class="paint-menu-bar">
<span class="menu-item" onclick="openMenu('file')">File</span>
<span class="menu-item" onclick="openMenu('edit')">Edit</span>
<span class="menu-item" onclick="openMenu('view')">View</span>
<span class="menu-item" onclick="openMenu('image')">Image</span>
<span class="menu-item" onclick="openEditColors()">Colors</span>
<span class="menu-item" onclick="openMenu('help')">Help</span>
<span onclick="clearCanvas()" class="clear-menu-btn">🗑</span>
</div>
<div class="paint-body">
<canvas id="sempasuchitlPaintCanvasLeft" width="232" height="170"></canvas>
</div>
<!-- PALETA DE COLORES -->
<div class="paint-footer-palette">
<div class="selected-indicator-box">
<div id="sempasuchitlCurrentColorPreview" style="background: #6a1b9a;"></div>
</div>
<div class="colors-grid-container">
<!-- FILA SUPERIOR -->
<div class="color-pixel" style="background: #000000;" onclick="selectPaintColor('#000000')"></div>
<div class="color-pixel" style="background: #4a148c;" onclick="selectPaintColor('#4a148c')"></div>
<div class="color-pixel" style="background: #6a1b9a;" onclick="selectPaintColor('#6a1b9a')"></div>
<div class="color-pixel" style="background: #7b1fa2;" onclick="selectPaintColor('#7b1fa2')"></div>
<div class="color-pixel" style="background: #9c27b0;" onclick="selectPaintColor('#9c27b0')"></div>
<div class="color-pixel" style="background: #ab47bc;" onclick="selectPaintColor('#ab47bc')"></div>
<div class="color-pixel" style="background: #ce93d8;" onclick="selectPaintColor('#ce93d8')"></div>
<div class="color-pixel" style="background: #e1bee7;" onclick="selectPaintColor('#e1bee7')"></div>
<div class="color-pixel" style="background: #f3e5f5;" onclick="selectPaintColor('#f3e5f5')"></div>
<div class="color-pixel" style="background: #c2185b;" onclick="selectPaintColor('#c2185b')"></div>
<div class="color-pixel" style="background: #d81b60;" onclick="selectPaintColor('#d81b60')"></div>
<div class="color-pixel" style="background: #e91e63;" onclick="selectPaintColor('#e91e63')"></div>
<div class="color-pixel" style="background: #f06292;" onclick="selectPaintColor('#f06292')"></div>
<div class="color-pixel" style="background: #f48fb1;" onclick="selectPaintColor('#f48fb1')"></div>
<!-- FILA INFERIOR -->
<div class="color-pixel" style="background: #ffffff;" onclick="selectPaintColor('#ffffff')"></div>
<div class="color-pixel" style="background: #c0c0c0;" onclick="selectPaintColor('#c0c0c0')"></div>
<div class="color-pixel" style="background: #f8bbd0;" onclick="selectPaintColor('#f8bbd0')"></div>
<div class="color-pixel" style="background: #fce4ec;" onclick="selectPaintColor('#fce4ec')"></div>
<div class="color-pixel" style="background: #b39ddb;" onclick="selectPaintColor('#b39ddb')"></div>
<div class="color-pixel" style="background: #d1c4e9;" onclick="selectPaintColor('#d1c4e9')"></div>
<div class="color-pixel" style="background: #7e57c2;" onclick="selectPaintColor('#7e57c2')"></div>
<div class="color-pixel" style="background: #5c6bc0;" onclick="selectPaintColor('#5c6bc0')"></div>
<div class="color-pixel" style="background: #7986cb;" onclick="selectPaintColor('#7986cb')"></div>
<div class="color-pixel" style="background: #9fa8da;" onclick="selectPaintColor('#9fa8da')"></div>
<div class="color-pixel" style="background: #c5cae9;" onclick="selectPaintColor('#c5cae9')"></div>
<div class="color-pixel" style="background: #b71c1c;" onclick="selectPaintColor('#b71c1c')"></div>
<div class="color-pixel" style="background: #880e4f;" onclick="selectPaintColor('#880e4f')"></div>
<div class="color-pixel" style="background: #4a148c;" onclick="selectPaintColor('#4a148c')"></div>
</div>
</div>
</div>
<!-- VENTANA DE EDITAR COLORES -->
<div id="colorEditor" class="color-editor-overlay" style="display:none;">
<div class="color-editor-box">
<!-- Barra de título -->
<div class="color-editor-title">
<span>🎨 Modificar colores</span>
<span class="color-editor-close" onclick="closeColorEditor()">✕</span>
</div>
<!-- Contenido -->
<div class="color-editor-content">
<!-- Colores básicos -->
<div class="color-section">
<label>Basic colors:</label>
<div class="basic-colors-grid">
<div class="basic-color" style="background:#000000;" onclick="selectBasicColor('#000000')"></div>
<div class="basic-color" style="background:#4a148c;" onclick="selectBasicColor('#4a148c')"></div>
<div class="basic-color" style="background:#6a1b9a;" onclick="selectBasicColor('#6a1b9a')"></div>
<div class="basic-color" style="background:#7b1fa2;" onclick="selectBasicColor('#7b1fa2')"></div>
<div class="basic-color" style="background:#9c27b0;" onclick="selectBasicColor('#9c27b0')"></div>
<div class="basic-color" style="background:#ab47bc;" onclick="selectBasicColor('#ab47bc')"></div>
<div class="basic-color" style="background:#ce93d8;" onclick="selectBasicColor('#ce93d8')"></div>
<div class="basic-color" style="background:#e1bee7;" onclick="selectBasicColor('#e1bee7')"></div>
<div class="basic-color" style="background:#f3e5f5;" onclick="selectBasicColor('#f3e5f5')"></div>
<div class="basic-color" style="background:#c2185b;" onclick="selectBasicColor('#c2185b')"></div>
<div class="basic-color" style="background:#d81b60;" onclick="selectBasicColor('#d81b60')"></div>
<div class="basic-color" style="background:#e91e63;" onclick="selectBasicColor('#e91e63')"></div>
<div class="basic-color" style="background:#f06292;" onclick="selectBasicColor('#f06292')"></div>
<div class="basic-color" style="background:#f48fb1;" onclick="selectBasicColor('#f48fb1')"></div>
<div class="basic-color" style="background:#ffffff;" onclick="selectBasicColor('#ffffff')"></div>
<div class="basic-color" style="background:#c0c0c0;" onclick="selectBasicColor('#c0c0c0')"></div>
<div class="basic-color" style="background:#f8bbd0;" onclick="selectBasicColor('#f8bbd0')"></div>
<div class="basic-color" style="background:#fce4ec;" onclick="selectBasicColor('#fce4ec')"></div>
<div class="basic-color" style="background:#b39ddb;" onclick="selectBasicColor('#b39ddb')"></div>
<div class="basic-color" style="background:#d1c4e9;" onclick="selectBasicColor('#d1c4e9')"></div>
<div class="basic-color" style="background:#7e57c2;" onclick="selectBasicColor('#7e57c2')"></div>
<div class="basic-color" style="background:#5c6bc0;" onclick="selectBasicColor('#5c6bc0')"></div>
<div class="basic-color" style="background:#7986cb;" onclick="selectBasicColor('#7986cb')"></div>
<div class="basic-color" style="background:#9fa8da;" onclick="selectBasicColor('#9fa8da')"></div>
<div class="basic-color" style="background:#c5cae9;" onclick="selectBasicColor('#c5cae9')"></div>
<div class="basic-color" style="background:#b71c1c;" onclick="selectBasicColor('#b71c1c')"></div>
<div class="basic-color" style="background:#880e4f;" onclick="selectBasicColor('#880e4f')"></div>
<div class="basic-color" style="background:#4a148c;" onclick="selectBasicColor('#4a148c')"></div>
</div>
</div>
<!-- Colores personalizados -->
<div class="color-section">
<label>Custom colors:</label>
<div class="custom-colors-grid">
<div class="custom-color" id="customColor1" style="background:#6a1b9a;" onclick="selectCustomColor(1)"></div>
<div class="custom-color" id="customColor2" style="background:#c2185b;" onclick="selectCustomColor(2)"></div>
<div class="custom-color" id="customColor3" style="background:#4a148c;" onclick="selectCustomColor(3)"></div>
<div class="custom-color" id="customColor4" style="background:#e91e63;" onclick="selectCustomColor(4)"></div>
<div class="custom-color" id="customColor5" style="background:#7b1fa2;" onclick="selectCustomColor(5)"></div>
<div class="custom-color" id="customColor6" style="background:#f06292;" onclick="selectCustomColor(6)"></div>
<div class="custom-color" id="customColor7" style="background:#9c27b0;" onclick="selectCustomColor(7)"></div>
<div class="custom-color" id="customColor8" style="background:#f48fb1;" onclick="selectCustomColor(8)"></div>
</div>
</div>
<!-- Selector de color y controles -->
<div class="color-controls">
<div class="color-preview-container">
<div class="color-preview-box">
<div id="colorPreviewBox" style="background:#6a1b9a;"></div>
</div>
<div class="color-values">
<div class="color-value-row">
<label>Hue:</label>
<input type="range" id="hueSlider" min="0" max="360" value="280" oninput="updateColorFromSliders()" />
<span id="hueValue">280</span>
</div>
<div class="color-value-row">
<label>Sat:</label>
<input type="range" id="satSlider" min="0" max="100" value="80" oninput="updateColorFromSliders()" />
<span id="satValue">80</span>
</div>
<div class="color-value-row">
<label>Lum:</label>
<input type="range" id="lumSlider" min="0" max="100" value="50" oninput="updateColorFromSliders()" />
<span id="lumValue">50</span>
</div>
<div class="color-value-row">
<label>Hex:</label>
<input type="text" id="hexInput" value="#6a1b9a" onchange="updateColorFromHex()" />
</div>
</div>
</div>
<div class="color-actions">
<button class="color-btn" onclick="addCustomColor()">Agregar</button>
<button class="color-btn" onclick="closeColorEditor()">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* Estilos del widget principal */
.sempasuchitl-paint-widget-left {
all: initial;
display: block;
width: 250px;
background: #f3e5f5;
border-top: 2px solid #ce93d8;
border-left: 2px solid #ce93d8;
border-right: 2px solid #6a1b9a;
border-bottom: 2px solid #6a1b9a;
box-shadow: 1px 1px 0px #4a148c;
padding: 2px;
box-sizing: border-box;
font-family: 'Segoe UI', 'Consolas', monospace;
margin: 20px auto 20px 0;
user-select: none;
position: relative;
}
.sempasuchitl-paint-widget-left .paint-window-bar {
background: #4a148c;
padding: 3px 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.sempasuchitl-paint-widget-left .paint-title {
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.sempasuchitl-paint-widget-left .paint-window-controls {
display: flex;
gap: 2px;
}
.sempasuchitl-paint-widget-left .paint-btn-mini {
background: #f3e5f5;
border-top: 1px solid #ce93d8;
border-left: 1px solid #ce93d8;
border-right: 1px solid #6a1b9a;
border-bottom: 1px solid #6a1b9a;
font-size: 9px;
padding: 0px 4px;
color: #4a148c;
font-weight: bold;
cursor: pointer;
}
.sempasuchitl-paint-widget-left .paint-btn-mini:hover {
background: #e1bee7;
}
.sempasuchitl-paint-widget-left .paint-menu-bar {
display: flex;
gap: 2px;
padding: 2px 4px;
font-size: 11px;
color: #4a148c;
border-bottom: 1px solid #ce93d8;
background: #faf0fc;
flex-wrap: wrap;
}
.sempasuchitl-paint-widget-left .menu-item {
padding: 0 4px;
cursor: pointer;
border-radius: 2px;
transition: background 0.2s;
}
.sempasuchitl-paint-widget-left .menu-item:hover {
background: #e1bee7;
}
.sempasuchitl-paint-widget-left .clear-menu-btn {
color: #c2185b;
font-weight: bold;
cursor: pointer;
padding: 0 4px;
transition: background 0.2s;
}
.sempasuchitl-paint-widget-left .clear-menu-btn:hover {
background: #f8bbd0;
border-radius: 2px;
}
.sempasuchitl-paint-widget-left .paint-body {
background: #ce93d8;
padding: 3px;
display: flex;
justify-content: center;
}
.sempasuchitl-paint-widget-left canvas {
background: #ffffff;
border-top: 2px solid #6a1b9a;
border-left: 2px solid #6a1b9a;
border-bottom: 2px solid #ce93d8;
border-right: 2px solid #ce93d8;
display: block;
cursor: crosshair;
}
.sempasuchitl-paint-widget-left .paint-footer-palette {
display: flex;
align-items: center;
padding: 5px;
background: #f3e5f5;
gap: 6px;
border-top: 1px solid #ce93d8;
}
.sempasuchitl-paint-widget-left .selected-indicator-box {
width: 28px;
height: 28px;
background: #f3e5f5;
border-top: 2px solid #6a1b9a;
border-left: 2px solid #6a1b9a;
border-bottom: 2px solid #ce93d8;
border-right: 2px solid #ce93d8;
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.sempasuchitl-paint-widget-left #sempasuchitlCurrentColorPreview {
width: 14px;
height: 14px;
border: 1px solid #4a148c;
}
.sempasuchitl-paint-widget-left .colors-grid-container {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 1px;
flex-grow: 1;
}
.sempasuchitl-paint-widget-left .color-pixel {
width: 12px;
height: 12px;
box-sizing: border-box;
border-top: 1px solid #6a1b9a;
border-left: 1px solid #6a1b9a;
border-bottom: 1px solid #ce93d8;
border-right: 1px solid #ce93d8;
cursor: pointer;
transition: transform 0.15s ease;
}
.sempasuchitl-paint-widget-left .color-pixel:hover {
transform: scale(1.2);
z-index: 2;
box-shadow: 0 0 8px rgba(106, 27, 154, 0.5);
}
/* ===== ESTILOS DEL EDITOR DE COLORES ===== */
.color-editor-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.color-editor-box {
background: #f3e5f5;
border: 3px solid #6a1b9a;
box-shadow: 0 8px 32px rgba(74, 20, 140, 0.4);
width: 480px;
max-width: 90%;
max-height: 90vh;
overflow-y: auto;
font-family: 'Segoe UI', 'Consolas', monospace;
}
.color-editor-title {
background: #4a148c;
padding: 8px 12px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
font-weight: bold;
font-size: 13px;
}
.color-editor-close {
cursor: pointer;
font-size: 16px;
padding: 0 4px;
}
.color-editor-close:hover {
color: #f8bbd0;
}
.color-editor-content {
padding: 16px;
}
.color-section {
margin-bottom: 16px;
}
.color-section label {
display: block;
font-size: 11px;
font-weight: bold;
color: #4a148c;
margin-bottom: 6px;
}
.basic-colors-grid {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 2px;
}
.basic-color {
width: 100%;
aspect-ratio: 1;
border: 2px solid #ce93d8;
cursor: pointer;
transition: all 0.15s ease;
min-width: 20px;
}
.basic-color:hover {
transform: scale(1.15);
border-color: #4a148c;
z-index: 2;
}
.custom-colors-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
}
.custom-color {
width: 100%;
aspect-ratio: 1;
border: 2px solid #ce93d8;
cursor: pointer;
transition: all 0.15s ease;
min-width: 30px;
}
.custom-color:hover {
transform: scale(1.1);
border-color: #4a148c;
}
.color-controls {
display: flex;
gap: 16px;
align-items: flex-start;
margin-top: 12px;
padding-top: 12px;
border-top: 2px solid #ce93d8;
}
.color-preview-container {
display: flex;
gap: 12px;
flex: 1;
align-items: center;
}
.color-preview-box {
width: 60px;
height: 60px;
border: 2px solid #6a1b9a;
flex-shrink: 0;
}
.color-values {
flex: 1;
}
.color-value-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.color-value-row label {
font-size: 10px;
font-weight: bold;
color: #4a148c;
min-width: 32px;
}
.color-value-row input[type="range"] {
flex: 1;
height: 4px;
-webkit-appearance: none;
background: #ce93d8;
border: 1px solid #6a1b9a;
}
.color-value-row input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: #f3e5f5;
border: 2px solid #6a1b9a;
cursor: pointer;
}
.color-value-row input[type="text"] {
width: 70px;
padding: 2px 4px;
border: 2px solid #ce93d8;
font-size: 10px;
font-family: monospace;
background: white;
}
.color-value-row span {
font-size: 10px;
font-weight: bold;
color: #4a148c;
min-width: 25px;
}
.color-actions {
display: flex;
flex-direction: column;
gap: 6px;
flex-shrink: 0;
}
.color-btn {
background: #f3e5f5;
border: 2px solid #6a1b9a;
padding: 6px 16px;
cursor: pointer;
font-weight: bold;
color: #4a148c;
font-size: 11px;
transition: all 0.2s;
}
.color-btn:hover {
background: #e1bee7;
}
/* Estado minimizado */
.sempasuchitl-paint-widget-left.minimized .paint-body,
.sempasuchitl-paint-widget-left.minimized .paint-footer-palette,
.sempasuchitl-paint-widget-left.minimized .paint-menu-bar {
display: none;
}
.sempasuchitl-paint-widget-left.minimized {
width: 180px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('sempasuchitlPaintCanvasLeft');
var ctx = canvas.getContext('2d');
var colorPreview = document.getElementById('sempasuchitlCurrentColorPreview');
var painting = false;
var currentColor = '#6a1b9a';
var brushSize = 3;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeStyle = currentColor;
ctx.lineWidth = brushSize;
function startPosition(e) {
painting = true;
draw(e);
}
function endPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
var rect = canvas.getBoundingClientRect();
var clientX = e.touches ? e.touches[0].clientX : e.clientX;
var clientY = e.touches ? e.touches[0].clientY : e.clientY;
var scaleX = canvas.width / rect.width;
var scaleY = canvas.height / rect.height;
var x = (clientX - rect.left) * scaleX;
var y = (clientY - rect.top) * scaleY;
ctx.lineWidth = brushSize;
ctx.strokeStyle = currentColor;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseleave', endPosition);
canvas.addEventListener('touchstart', function(e) { e.preventDefault(); startPosition(e); });
canvas.addEventListener('touchend', endPosition);
canvas.addEventListener('touchmove', function(e) { e.preventDefault(); draw(e); });
window.selectPaintColor = function(color) {
currentColor = color;
colorPreview.style.background = color;
};
window.clearCanvas = function() {
if (confirm('¿Limpiar el pizarrón?')) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
}
};
window.minimizeWidget = function() {
var widget = document.querySelector('.sempasuchitl-paint-widget-left');
widget.classList.toggle('minimized');
};
window.closeWidget = function() {
if (confirm('¿Cerrar el pizarrón?')) {
document.querySelector('.sempasuchitl-paint-widget-left').style.display = 'none';
}
};
// ===== FUNCIONES DEL EDITOR DE COLORES =====
window.openEditColors = function() {
document.getElementById('colorEditor').style.display = 'flex';
};
window.closeColorEditor = function() {
document.getElementById('colorEditor').style.display = 'none';
};
window.selectBasicColor = function(color) {
selectPaintColor(color);
document.getElementById('colorPreviewBox').style.background = color;
document.getElementById('hexInput').value = color;
var rgb = hexToRgb(color);
if (rgb) {
var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
document.getElementById('hueSlider').value = Math.round(hsl.h);
document.getElementById('satSlider').value = Math.round(hsl.s);
document.getElementById('lumSlider').value = Math.round(hsl.l);
document.getElementById('hueValue').textContent = Math.round(hsl.h);
document.getElementById('satValue').textContent = Math.round(hsl.s);
document.getElementById('lumValue').textContent = Math.round(hsl.l);
}
};
window.selectCustomColor = function(index) {
var colorEl = document.getElementById('customColor' + index);
var color = colorEl.style.background;
selectPaintColor(color);
document.getElementById('colorPreviewBox').style.background = color;
document.getElementById('hexInput').value = rgbToHex(color);
var rgb = hexToRgb(rgbToHex(color));
if (rgb) {
var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
document.getElementById('hueSlider').value = Math.round(hsl.h);
document.getElementById('satSlider').value = Math.round(hsl.s);
document.getElementById('lumSlider').value = Math.round(hsl.l);
document.getElementById('hueValue').textContent = Math.round(hsl.h);
document.getElementById('satValue').textContent = Math.round(hsl.s);
document.getElementById('lumValue').textContent = Math.round(hsl.l);
}
};
window.updateColorFromSliders = function() {
var h = parseInt(document.getElementById('hueSlider').value);
var s = parseInt(document.getElementById('satSlider').value);
var l = parseInt(document.getElementById('lumSlider').value);
document.getElementById('hueValue').textContent = h;
document.getElementById('satValue').textContent = s;
document.getElementById('lumValue').textContent = l;
var rgb = hslToRgb(h/360, s/100, l/100);
var hex = rgbToHexFromRgb(rgb.r, rgb.g, rgb.b);
document.getElementById('colorPreviewBox').style.background = hex;
document.getElementById('hexInput').value = hex;
selectPaintColor(hex);
};
window.updateColorFromHex = function() {
var hex = document.getElementById('hexInput').value;
if (/^#[0-9a-f]{6}$/i.test(hex)) {
document.getElementById('colorPreviewBox').style.background = hex;
selectPaintColor(hex);
var rgb = hexToRgb(hex);
if (rgb) {
var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
document.getElementById('hueSlider').value = Math.round(hsl.h);
document.getElementById('satSlider').value = Math.round(hsl.s);
document.getElementById('lumSlider').value = Math.round(hsl.l);
document.getElementById('hueValue').textContent = Math.round(hsl.h);
document.getElementById('satValue').textContent = Math.round(hsl.s);
document.getElementById('lumValue').textContent = Math.round(hsl.l);
}
}
};
window.addCustomColor = function() {
var color = document.getElementById('hexInput').value;
if (/^#[0-9a-f]{6}$/i.test(color)) {
for (var i = 8; i > 1; i--) {
var prev = document.getElementById('customColor' + (i-1));
var current = document.getElementById('customColor' + i);
current.style.background = prev.style.background;
}
document.getElementById('customColor1').style.background = color;
selectPaintColor(color);
}
};
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b].map(function(x) {
var hex = x.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}).join('');
}
function rgbToHexFromRgb(r, g, b) {
return rgbToHex(Math.round(r), Math.round(g), Math.round(b));
}
function rgbToHsl(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: h * 360, s: s * 100, l: l * 100 };
}
function hslToRgb(h, s, l) {
var r, g, b;
if (s === 0) {
r = g = b = l;
} else {
var hue2rgb = function(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return { r: r * 255, g: g * 255, b: b * 255 };
}
function rgbToHex(color) {
if (color.startsWith('rgb')) {
var matches = color.match(/\d+/g);
if (matches) {
return '#' + matches.slice(0,3).map(function(x) {
var hex = parseInt(x).toString(16);
return hex.length === 1 ? '0' + hex : hex;
}).join('');
}
}
return color;
}
});
function selectPaintColor(color) {
window.selectPaintColor(color);
}
function clearCanvas() {
window.clearCanvas();
}
function minimizeWidget() {
window.minimizeWidget();
</script>
💡 Consejo: Copia todo el código dentro de un widget de HTML en Blogger o directamente en la vista de edición HTML de tu entrada.
No hay comentarios.:
Publicar un comentario