เครื่องเลือกสีและแปลงสี

โมเดลสี

โมเดลสีเป็นระบบสำหรับอธิบายสีเป็นตัวเลข โมเดลที่แตกต่างกันใช้ในบริบทที่แตกต่างกันขึ้นอยู่กับว่าเอาต์พุตเป็นหน้าจอ เครื่องพิมพ์ หรือข้อกำหนดการออกแบบ

RGB / RGBA

รูปแบบ

RGB กำหนดสีโดยการผสมแสงแดง เขียว และน้ำเงิน แต่ละช่องมีช่วงจาก 0 ถึง 255 rgb(255, 0, 0) คือสีแดงบริสุทธิ์ rgb(255, 255, 255) คือสีขาว ช่อง A (อัลฟา) เพิ่มความโปร่งใส มีช่วงจาก 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบทั้งหมด) ตัวอย่างเช่น rgba(255, 0, 0, 0.5) คือสีแดงโปร่งใสครึ่งหนึ่ง RGB เป็นโมเดลสีดั้งเดิมสำหรับหน้าจอและจอแสดงผลดิจิทัล

ประวัติ

โมเดล RGB มีรากฐานจากทฤษฎีการมองเห็นสีแบบสามสีของ Young-Helmholtz จากศตวรรษที่ 19 James Clerk Maxwell ทำการทดลองถ่ายภาพสี RGB เป็นครั้งแรกในปี 1861 RGB กลายเป็นมาตรฐานสำหรับจอแสดงผลอิเล็กทรอนิกส์พร้อมกับการพัฒนาโทรทัศน์สี CRT ในช่วงทศวรรษ 1930 และ 1940 และต่อมาถูกนำมาใช้สำหรับจอคอมพิวเตอร์ พื้นที่สี sRGB ถูกนำมาใช้อย่างเป็นทางการเป็นมาตรฐานเว็บใน HTML 3.2 ในเดือนมกราคม 1997

HEX / HEXA

รูปแบบ

HEX เป็นสัญกรณ์กระชับสำหรับค่า RGB โดยใช้เลขฐานสิบหก #FF0000 เหมือนกับ rgb(255, 0, 0) เลขฐานสิบหกแต่ละคู่แสดงหนึ่งช่อง: #RRGGBB รูปแบบ 8 หลัก #RRGGBBAA เพิ่มช่องอัลฟา โดย 00 คือโปร่งใสทั้งหมดและ FF คือทึบทั้งหมด ตัวอย่างเช่น #FF000080 คือสีแดงที่ความทึบ 50% รูปแบบย่อเช่น #F00 ขยายเป็น #FF0000

ประวัติ

สัญกรณ์สีเฮกซ์มีต้นกำเนิดในเว็บเบราว์เซอร์ยุคแรกในกลางทศวรรษ 1990 เวอร์ชันแรกของ Mosaic และ Netscape Navigator สืบทอดระบบชื่อสี X11 CSS Level 1 ที่เผยแพร่ในเดือนธันวาคม 1996 โดย Hakon Wium Lie และ Bert Bos ทำให้สัญกรณ์เลขฐานสิบหกเป็นวิธีหลักอย่างเป็นทางการในการระบุสีบนเว็บ

HSL / HSLA

รูปแบบ

HSL อธิบายสีเป็นเฉดสี ความอิ่มตัว และความสว่าง เฉดสีเป็นองศาบนวงล้อสี (0-360): 0 คือแดง 120 คือเขียว 240 คือน้ำเงิน ความอิ่มตัว (0-100%) ควบคุมความเข้มของสี ความสว่าง (0-100%) ควบคุมความสว่าง โดย 0% คือสีดำและ 100% คือสีขาว HSL มักจะเข้าใจง่ายกว่า RGB สำหรับการเลือกสีเพราะคุณสามารถปรับความสว่างและความอิ่มตัวได้อย่างอิสระ

ประวัติ

HSL ถูกอธิบายครั้งแรกโดย George H. Joblove และ Donald Greenberg ในบทความปี 1978 ใน Computer Graphics สร้างขึ้นเพื่อแก้ปัญหาพื้นฐานของ RGB: การผสมค่าแดง เขียว และน้ำเงินไม่เป็นธรรมชาติสำหรับมนุษย์ HSL จัดเรียงพื้นที่สี RGB ใหม่เพื่อให้ศิลปินและนักออกแบบสามารถคิดในแง่ของสี (เฉดสี) ความสดใส (ความอิ่มตัว) และความสว่าง (ความสว่าง) ซึ่งตรงกับวิธีที่ผู้คนอธิบายสีตามธรรมชาติมากขึ้น

HSV / HSB

รูปแบบ

HSV (เฉดสี ความอิ่มตัว ค่า) คล้ายกับ HSL แต่ใช้ "ค่า" (ความสว่าง) แทนความสว่าง ที่ค่า 100% สีที่อิ่มตัวเต็มที่จะบริสุทธิ์และสว่าง HSV แมปได้เป็นธรรมชาติมากขึ้นกับวิธีที่เครื่องเลือกสีทำงาน: แผงความอิ่มตัว/ความสว่างปรับ S และ V ในขณะที่ตัวเลื่อนเฉดสีปรับ H

ประวัติ

HSV ถูกอธิบายโดย Alvy Ray Smith ในเดือนสิงหาคม 1978 ขณะทำงานที่ Computer Graphics Lab ของ New York Institute of Technology เผยแพร่ในฉบับเดียวกันของ Computer Graphics กับ HSL Smith ออกแบบ HSV สำหรับใช้ในโปรแกรมวาดภาพดิจิทัลยุคแรก ซึ่งศิลปินต้องการวิธีที่เข้าใจง่ายในการเลือกสีบนหน้าจอ โมเดลทรงกระบอกของ HSV ทำให้เป็นธรรมชาติในการใช้งานเป็นเครื่องเลือกสีพร้อมตัวเลื่อนเฉดสีและแผงความอิ่มตัว/ความสว่าง

CMYK

รูปแบบ

CMYK (ฟ้า แดงม่วง เหลือง ดำ/คีย์) ใช้ในการพิมพ์ ในขณะที่ RGB เป็นแบบเพิ่มแสง (แสง) CMYK เป็นแบบลบแสง (หมึก) แต่ละค่าแสดงเปอร์เซ็นต์ของหมึกที่ใช้ cmyk(0, 100, 100, 0) ให้สีแดง การแปลงระหว่าง RGB และ CMYK เป็นค่าประมาณเพราะครอบคลุมช่วงสี (gamut) ที่แตกต่างกัน

ประวัติ

รากฐานของ CMYK ย้อนกลับไปถึง Jacob Christoph Le Blon ผู้คิดค้นการพิมพ์สีแบบฮาล์ฟโทนโดยใช้แผ่นทองแดงแยกกันประมาณปี 1710 เขาเริ่มใช้แผ่นสีแดง เหลือง และน้ำเงิน และต่อมาเพิ่มแผ่นสีดำเพื่อโครงร่างและตัวอักษรที่คมชัดขึ้น กระบวนการพิมพ์สี่สี CMYK สมัยใหม่ถูกนำมาใช้เป็นครั้งแรกในช่วงทศวรรษ 1890 สำหรับภาพประกอบหนังสือพิมพ์สี แผ่นสีดำเรียกว่าแผ่น "คีย์" เพราะมันมีรายละเอียดที่ละเอียดที่แผ่นอื่นจัดตำแหน่ง (keyed) ตาม

รูปแบบสี CSS

CSS สมัยใหม่รองรับสัญกรณ์สีหลายแบบ:

• #FF5733 หรือ #ff5733 (HEX)
• rgb(255, 87, 51) หรือ rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) หรือ hsla(14, 100%, 60%, 0.5)
• สีที่ตั้งชื่อ: red, cornflowerblue, rebeccapurple (สีที่ตั้งชื่อทั้งหมด 148 สี)