Advanced Color Picker
ဒါလေးက တော့မိမိ website မှာအ ရောင်ကာလာ လေး တွေကိုမိမိစိတ်ကြိုက် ရွေးချယ်အသုံးပြုလို့ရအောင်ပြုလုပ်ထားတဲ့ color picker ဖြစ်ပါတယ်။မိမိ website ကိုအရောင်ကာလာချိန်းချင်သူများအတွက်တကူးတကအရောင်ကာလာတွေရှာနေစရာမလိုပဲဒီ color picker ထည့်သွင်းထားရုံဖြင့်မိမိလိုအပ်သလိုအရောင်ကာလာများကိုရွေးချယ်အသုံးပြုလို့ရပါတယ်။လိုအပ်တယ်ဆိုရင်အောက်ကပြုလုပ်ပုံအနည်းငယ်ဖြင့်ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။
- မိမိ site ကို account အရင်ဝင်ပါ
- dashboard ထဲက Pages ကိုနှိပ်
- ➕ New Page (or) ➕ အိုင်ကွန်ကိုနှိပ်
- 🖍️ အိုင်ကွန်ကိုနှိပ်ပါ </> HTML view ကိုရွေးချယ်၍နှိပ်ပါ
- အောက်က code တွေကို copy ယူ၍ကူးထည့်
- ▶️ Publish ကိုနှိပ်ပါ။ CONFIRM ကိုနှိပ်ပြီးပါပြီ။
<script crossorigin="anonymous" src="https://kit.fontawesome.com/f97427a625.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></link>
<style>
box {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 50px auto;
padding: 2px;
background-color: #2d3748;
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
#colorCanvas {
width: 100%;
height: 300px;
border-radius: 10px;
cursor: crosshair;
}
#colorPreview {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #fff;
display: inline-block;
margin-top: 15px;
}
input[type="text"] {
width:180px;
}
input[type="range"] {
width: 70%;
margin: 5px 0;
}
#color {
margin-left:50px;
}
.value-display {
font-size: 16px;
color: #666;
margin-top:10px;
}
</style>
<div class="container">
<h2 class="text-white text-2xl mb-4">🎨 Advanced Color Picker</h2>
<canvas id="colorCanvas"></canvas>
<canvas id="colorPreview"></canvas>
<!--Color Info and Input-->
<div class="text-white space-y-4">
<div class="flex justify-between items-center">
<label class="text-gray-400">HEX</label>
<input class="bg-gray-700 text-white border border-gray-600 rounded-full px-4 py-2 w-24" id="hex" onchange="setColorPreviewFromHex(this.value)" type="text" />
<button class="bg-gray-700 text-white px-4 py-2 rounded-full border border-gray-600 hover:bg-gray-600" onclick="copyToClipboard('hex')"><i class="fa fa-copy"></i> Copy</button>
</div>
<div class="flex justify-between items-center">
<label class="text-gray-400">RGB</label>
<input class="bg-gray-700 text-white border border-gray-600 rounded-full px-4 py-2 w-24" id="rgb" onchange="setColorPreviewFromRgb(this.value)" type="text" />
<button class="bg-gray-700 text-white px-4 py-2 rounded-full border border-gray-600 hover:bg-gray-600" onclick="copyToClipboard('rgb')"><i class="fa fa-copy"></i> Copy</button>
</div>
<div class="flex justify-between items-center">
<label class="text-gray-400">HSL</label>
<input class="bg-gray-700 text-white border border-gray-600 rounded-full px-4 py-2 w-24" id="hsl" onchange="setColorPreviewFromHsl(this.value)" type="text" />
<button class="bg-gray-700 text-white px-4 py-2 rounded-full border border-gray-600 hover:bg-gray-600" onclick="copyToClipboard('hsl')"><i class="fa fa-copy"></i> Copy</button>
</div>
<div class="flex justify-between items-center">
<label class="text-gray-400">HSV</label>
<input class="bg-gray-700 text-white border border-gray-600 rounded-full px-4 py-2 w-24" id="hsv" onchange="setColorPreviewFromHsv(this.value)" type="text" />
<button class="bg-gray-700 text-white px-4 py-2 rounded-full border border-gray-600 hover:bg-gray-600" onclick="copyToClipboard('hsv')"> <i class="fa fa-copy"></i> Copy</button>
</div>
</div>
</div>
<script>
// Set up the color canvas and context
const canvas = document.getElementById("colorCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth * 0.9;
canvas.height = 300;
// Create the gradient for color selection
function drawGradient() {
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'hsl(0, 100%, 50%)'); // Red
gradient.addColorStop(1 / 6, 'hsl(60, 100%, 50%)'); // Yellow
gradient.addColorStop(2 / 6, 'hsl(120, 100%, 50%)'); // Green
gradient.addColorStop(3 / 6, 'hsl(180, 100%, 50%)'); // Cyan
gradient.addColorStop(4 / 6, 'hsl(240, 100%, 50%)'); // Blue
gradient.addColorStop(5 / 6, 'hsl(300, 100%, 50%)'); // Magenta
gradient.addColorStop(1, 'hsl(360, 100%, 50%)'); // Red
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Get color at specific canvas position
function getColorAtPosition(x, y) {
const imageData = ctx.getImageData(x, y, 1, 1);
const pixel = imageData.data;
return {
r: pixel[0],
g: pixel[1],
b: pixel[2],
a: pixel[3]
};
}
// Convert RGB to HEX
function rgbToHex(r, g, b) {
return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1).toUpperCase()}`;
}
// Convert RGB to HSL
function rgbToHsl(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // achromatic
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
if (max === r) {
h = (g - b) / d + (g < b ? 6 : 0);
} else if (max === g) {
h = (b - r) / d + 2;
} else {
h = (r - g) / d + 4;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
// Convert RGB to HSV
function rgbToHsv(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h, s, v = max;
if (delta === 0) {
h = 0;
} else if (max === r) {
h = (g - b) / delta;
if (g < b) h += 6;
} else if (max === g) {
h = (b - r) / delta + 2;
} else {
h = (r - g) / delta + 4;
}
s = max === 0 ? 0 : delta / max;
h = Math.round(h * 60);
s = Math.round(s * 100);
v = Math.round(v * 100);
return { h, s, v };
}
// Update color preview and inputs
function updateColorPreview(color) {
const hex = rgbToHex(color.r, color.g, color.b);
const rgb = `rgb(${color.r}, ${color.g}, ${color.b})`;
const hsl = rgbToHsl(color.r, color.g, color.b);
const hsv = rgbToHsv(color.r, color.g, color.b);
document.getElementById("hex").value = hex;
document.getElementById("rgb").value = rgb;
document.getElementById("hsl").value = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
document.getElementById("hsv").value = `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
const previewCanvas = document.getElementById("colorPreview");
const previewCtx = previewCanvas.getContext("2d");
previewCtx.fillStyle = hex;
previewCtx.fillRect(0, 0, previewCanvas.width, previewCanvas.height);
}
// Handle mouse click and drag to pick color
let isMouseDown = false;
canvas.addEventListener('mousedown', function (event) {
isMouseDown = true;
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const color = getColorAtPosition(x, y);
updateColorPreview(color);
});
canvas.addEventListener('mousemove', function (event) {
if (!isMouseDown) return;
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const color = getColorAtPosition(x, y);
updateColorPreview(color);
});
canvas.addEventListener('mouseup', function () {
isMouseDown = false;
});
// Copy color code to clipboard
function copyToClipboard(type) {
const input = document.getElementById(type);
input.select();
document.execCommand('copy');
}
// Initialize the gradient on canvas
drawGradient();
</script>
