Color Models

HSL

โมเดลสีแบบทรงกระบอกที่อธิบายสีด้วย Hue, Saturation และ Lightness ออกแบบให้ใช้งานง่ายสำหรับการเลือกสีของมนุษย์

HSL represents color as an angle on the color wheel (hue, 0-360), a percentage of color intensity (saturation, 0-100%), and a percentage of lightness (0-100% where 0% is black and 100% is white). At 50% lightness, the pure hue is displayed. HSL is widely used in CSS (the hsl() function) because it makes it easy to create tints, shades, and tones by adjusting a single parameter. It is more intuitive than RGB for design work but has the limitation of not being perceptually uniform, meaning equal numeric changes do not always produce equal visual changes.

ลองใช้งาน

แปลงสี

แปลงระหว่างรูปแบบสี 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 และงานออกแบบ

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

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

ความแตกต่างระหว่าง Cyan และ Turquoise

Cyan (#00FFFF) และ turquoise (#40E0D0) ดูคล้ายกันแต่แตกต่างกันในตำแหน่ง color model ความอิ่มตัว และกรณีการใช้งาน นี่คือการวิเคราะห์ฉบับสมบูรณ์

การออกแบบ Color API: REST Endpoint สำหรับข้อมูลสี

ออกแบบ RESTful color API พร้อม endpoint สำหรับการแปลงสี การค้นหา การตรวจสอบคอนทราสต์ และการสร้างจานสี เรียนรู้การออกแบบ schema และแนวทางปฏิบัติที่ดีที่สุด