Color Palette Explorer

แนวคิด

เวลาออกแบบเว็บมักต้องการเครื่องมือสำรวจสี แต่เครื่องมือส่วนใหญ่:

• ต้อง login หรือมี account
• โหลดช้า (หนักมาก)
• มีฟีเจอร์มากเกินที่จำเป็น

เลยสร้างเอง เน้นเรียบง่าย ทำงานได้ทันทีไม่ต้องตั้งค่า

ฟีเจอร์

• Palette สำเร็จรูป — Material Design, Tailwind CSS, IBM Carbon
• Color picker — เลือกสีเองแล้วดู shade ของสีนั้น
• Contrast checker — เช็ค WCAG contrast ratio ระหว่างสองสีที่เลือก
• Copy on click — คลิก swatch เพื่อ copy hex code
• CSS export — ส่งออกเป็น CSS custom properties พร้อมใช้

Tech

CSS custom properties ทำงานหนัก — ทุก shade อยู่ใน variable และเปลี่ยนได้ทันทีเมื่อ base hue เปลี่ยน:

:root {
  --hue: 220;   /* เปลี่ยนค่านี้ค่าเดียว ทุก shade เปลี่ยน */

  --color-50:  hsl(var(--hue) 100% 97%);
  --color-100: hsl(var(--hue) 96%  92%);
  --color-200: hsl(var(--hue) 92%  85%);
  --color-300: hsl(var(--hue) 88%  74%);
  --color-400: hsl(var(--hue) 84%  62%);
  --color-500: hsl(var(--hue) 80%  50%);  /* base */
  --color-600: hsl(var(--hue) 78%  42%);
  --color-700: hsl(var(--hue) 74%  34%);
  --color-800: hsl(var(--hue) 70%  26%);
  --color-900: hsl(var(--hue) 64%  18%);
  --color-950: hsl(var(--hue) 58%  12%);
}

Vanilla JS เพียงไม่กี่บรรทัดสำหรับ:

• อ่านค่าจาก <input type="range"> แล้วเซต --hue บน :root
• คำนวณ contrast ratio ตาม WCAG 2.1 formula
• Copy text ด้วย navigator.clipboard.writeText()

Contrast Checker

function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    const s = c / 255;
    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

function contrastRatio(hex1, hex2) {
  const l1 = getLuminance(...hexToRGB(hex1));
  const l2 = getLuminance(...hexToRGB(hex2));
  const [lighter, darker] = [l1, l2].sort((a, b) => b - a);
  return (lighter + 0.05) / (darker + 0.05);
}

// WCAG AA: ≥4.5:1 สำหรับ normal text, ≥3:1 สำหรับ large text
// WCAG AAA: ≥7:1 สำหรับ normal text

CSS Export

ผู้ใช้ copy CSS custom properties ออกไปใช้ใน project ได้ทันที:

/* output example */
:root {
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-500: #3b82f6;
  --brand-900: #1e3a8a;
  --brand-950: #172554;
}

สิ่งที่เรียนรู้

hsl() เหมาะกับ programmatic color generation — เปลี่ยน hue ตัวเดียวได้ color ใหม่ทั้งชุดโดยไม่ต้องคำนวณ hex values

CSS color-mix() ช่วยได้มาก — modern browsers รองรับแล้ว ใช้ผสมสีได้โดยไม่ต้อง JavaScript:

--color-muted: color-mix(in oklch, var(--brand-500) 20%, white);

OKLCH ดีกว่า HSL — perceptually uniform ทำให้ shade ดู “เท่ากัน” กว่าเมื่อ lightness เปลี่ยน แต่ browser support ยังต้องตรวจสอบก่อนใช้ใน production