Color Models

OKLCH

ปริภูมิสีสม่ำเสมอเชิงการรับรู้รุ่นใหม่ที่ใช้ Lightness, Chroma และ Hue ออกแบบมาเพื่อปรับปรุง CIELAB สำหรับงานออกแบบดิจิทัล

OKLCH is based on the Oklab color space created by Bjorn Ottosson in 2020. It uses L for lightness (0-1), C for chroma (colorfulness), and H for hue angle (0-360). OKLCH improves on CIELAB by providing better perceptual uniformity, especially in the blue region where CIELAB has known issues. CSS Color Level 4 includes oklch() as a native function, making it increasingly relevant for web development. OKLCH is particularly powerful for generating consistent color palettes because equal chroma values produce colors that look equally vivid regardless of hue.

ลองใช้งาน

แปลงสี

แปลงระหว่างรูปแบบสี HEX, RGB, HSL, HSV, CMYK และ OKLCH ได้ทันที

บทความที่เกี่ยวข้อง

CSS color-mix(): ผสมสีโดยตรงในเบราว์เซอร์

เรียนรู้ CSS color-mix() เพื่อผสมสีโดยตรงในเบราว์เซอร์ เชี่ยวชาญ syntax, color spaces, กรณีการใช้งานจริง และสร้างพาเลตแบบไดนามิกโดยไม่ต้องใช้ JavaScript

สร้าง Color Picker Web Component ตั้งแต่ต้น

สร้าง color picker ที่เข้าถึงได้เป็น Web Component นำ canvas rendering, hue sliders, alpha channels และ custom events ด้วย Shadow DOM ไปใช้งาน

พื้นที่สีเชิงรับรู้: Lab, LCH, Oklab, OKLCH

สำรวจพื้นที่สีที่สม่ำเสมอเชิงรับรู้ — CIE Lab, LCH, Oklab และ OKLCH เรียนรู้วิธีการออกแบบของแต่ละพื้นที่สี จุดเด่น และวิธีเลือกใช้สำหรับ CSS และงานออกแบบ

สีสำหรับการเล่าเรื่องด้วยข้อมูล: เกินกว่าสีกราฟเริ่มต้น

ก้าวพ้นสีกราฟเริ่มต้นสำหรับการเล่าเรื่องด้วยข้อมูล เรียนรู้พาเลต sequential, diverging และ categorical การเข้าถึงใน dataviz และ color scales ใน D3/Chart.js

Emerald vs Jade vs Forest Green: คู่มือเปรียบเทียบสีเขียว

เปรียบเทียบ emerald (#50C878), jade (#00A86B) และ forest green (#228B22) เรียนรู้ความแตกต่างทางสายตาและรหัส hex ระหว่างสีเขียวยอดนิยมเหล่านี้

CSS light-dark() Function: การสลับธีมโดยธรรมชาติ

ใช้ CSS light-dark() สำหรับการสลับธีมโดยธรรมชาติ แทนที่ JavaScript toggles และ media queries ด้วย CSS function เดียวสำหรับสีโหมด light และ dark