CSS color-mix() และ Modern Color Functions

color-mix() — ผสมสีใน CSS

/* color-mix(in <color-space>, color1 <percentage>, color2) */
background: color-mix(in oklch, #2563eb 50%, white);
/* ผสม blue + white 50/50 ใน oklch color space */

/* เปลี่ยน percentage เพื่อ tint/shade */
.color-10  { background: color-mix(in oklch, #2563eb 10%, white); }  /* lightest */
.color-30  { background: color-mix(in oklch, #2563eb 30%, white); }
.color-50  { background: color-mix(in oklch, #2563eb 50%, white); }
.color-70  { background: color-mix(in oklch, #2563eb 70%, white); }
.color-90  { background: color-mix(in oklch, #2563eb 90%, white); }  /* darkest */

/* Percentage รวมกันต้องได้ 100% (หรือ omit ตัวที่สอง) */
background: color-mix(in oklch, blue 30%, red);   /* blue 30%, red 70% */
background: color-mix(in oklch, blue 30%, red 70%);  /* เหมือนกัน */

Color Spaces ใน color-mix()

/* oklch — Perceptually uniform (แนะนำ) */
color-mix(in oklch, red, blue)

/* srgb — Standard (default ของ browser เดิม) */
color-mix(in srgb, red, blue)

/* hsl — สีอาจเพี้ยนตรงกลาง */
color-mix(in hsl, red, blue)

/* display-p3 — Wide gamut (Retina display) */
color-mix(in display-p3, red, blue)

/* ทำไม oklch ดีกว่า srgb: */
/* oklch ผสมได้เป็นธรรมชาติกว่า — ไม่มีสีเทาตรงกลาง */
color-mix(in srgb, yellow, blue)    /* → สีเทา */
color-mix(in oklch, yellow, blue)   /* → สีเขียว (ถูกต้องกว่า) */

Relative Color Syntax — แก้ไข Channel เดียว

/* from <color> ใช้ channel ของสีต้นฉบับเป็นตัวแปร */
.element {
  --brand: #2563eb;

  /* เพิ่ม alpha (opacity) โดยไม่เปลี่ยนสี */
  background: oklch(from var(--brand) l c h / 0.1);

  /* เพิ่ม lightness 20% */
  color: oklch(from var(--brand) calc(l + 0.2) c h);

  /* ลด chroma (ทำให้ desaturate) */
  border: 1px solid oklch(from var(--brand) l calc(c * 0.5) h);
}

/* หมุน hue 180 องศา (complement color) */
.complement {
  background: oklch(from var(--brand) l c calc(h + 180));
}

/* อ่านค่า alpha จากสีต้นฉบับ */
.same-opacity {
  background: oklch(from var(--source) l c h / alpha);
}

light-dark() — Adaptive Color

/* ✓ สั้นกว่า media query */
:root {
  color-scheme: light dark;
}

.element {
  background: light-dark(#ffffff, #0f172a);
  color: light-dark(#0f172a, #f1f5f9);
  border-color: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
}

/* เทียบกับ วิธีเดิม: */
.element {
  background: #ffffff;
  color: #0f172a;
}
@media (prefers-color-scheme: dark) {
  .element {
    background: #0f172a;
    color: #f1f5f9;
  }
}

สร้าง Color Palette จากสีเดียว

:root {
  --base: #2563eb;

  /* Generate scale ด้วย color-mix */
  --color-50:  color-mix(in oklch, var(--base) 5%,  white);
  --color-100: color-mix(in oklch, var(--base) 10%, white);
  --color-200: color-mix(in oklch, var(--base) 20%, white);
  --color-300: color-mix(in oklch, var(--base) 40%, white);
  --color-400: color-mix(in oklch, var(--base) 60%, white);
  --color-500: var(--base);
  --color-600: color-mix(in oklch, var(--base) 80%, black);
  --color-700: color-mix(in oklch, var(--base) 60%, black);
  --color-800: color-mix(in oklch, var(--base) 40%, black);
  --color-900: color-mix(in oklch, var(--base) 20%, black);
}

Semantic Colors ด้วย light-dark() + CSS Custom Properties

:root {
  color-scheme: light dark;

  --bg:       light-dark(#ffffff, #0f172a);
  --bg-card:  light-dark(rgba(255,255,255,0.8), rgba(30,41,59,0.8));
  --text:     light-dark(#0f172a, #f1f5f9);
  --text-muted: light-dark(#64748b, #64748b);
  --accent:   light-dark(#2563eb, #60a5fa);
  --line:     light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.08));
  --success:  light-dark(#10b981, #34d399);
  --warning:  light-dark(#f59e0b, #fbbf24);
  --error:    light-dark(#ef4444, #f87171);
}

/* ใช้งาน — ไม่ต้อง [data-theme='dark'] หรือ media query เลย */
body {
  background: var(--bg);
  color: var(--text);
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
}

color-contrast() — ยังเป็น Experimental

/* เลือกสีที่มี contrast สูงสุดกับ background อัตโนมัติ */
/* ยังไม่ stable — อย่าใช้ใน production */
color: color-contrast(white vs black, navy, gray);

Browser Support

ใช้ได้ใน modern browser ทั่วไปแล้ว ต้อง fallback สำหรับ Safari เก่า

/* Fallback */
background: #2563eb;
background: color-mix(in oklch, #2563eb 50%, white);