แปลงโค้ดสี HEX RGB CMYK HSL และตัวเลือกสี (Color Picker)

HEX, RGB, CMYK และ HSL ต่างกันอย่างไร

ทั้งสี่แบบคือการเขียนสีเดียวกันคนละภาษา: HEX กับ RGB บอกปริมาณแสงแดง เขียว น้ำเงินบนจอ HSL บอกสีเป็นเฉด ความสด และความสว่าง ส่วน CMYK บอกปริมาณหมึกสี่สีสำหรับงานพิมพ์ เพราะฉะนั้นโค้ดในเครื่องมือด้านบนจึงแปลงไปมาได้เสมอ ตารางนี้ใช้สี #1E90FF ที่เครื่องมือเปิดมาเป็นตัวอย่าง

HEX: โค้ดหกหลักที่เว็บใช้

โค้ด HEX คือค่า RGB ที่เขียนด้วยเลขฐานสิบหก แบ่งเป็นสามคู่ตามลำดับแดง เขียว น้ำเงิน แต่ละคู่มีค่าตั้งแต่ 00 (ไม่มีแสง) ถึง FF (เต็มที่ เท่ากับ 255) มาตรฐาน CSS Color ของ W3C ยอมให้เขียนแบบย่อสามหลักได้ด้วย โดย #123 คือสีเดียวกับ #112233 ส่วนแบบแปดหลัก คู่สุดท้ายคือค่าความโปร่งใส (alpha) ช่อง HEX ด้านบนรับได้ทั้งแบบหกหลักและแบบย่อสามหลัก จะพิมพ์ # หรือไม่ก็ได้

RGB: แสงสามสีบนหน้าจอ

RGB บอกว่าจอต้องเปิดแสงแดง เขียว และน้ำเงินอย่างละเท่าไร ช่องละ 0–255 ทั้งสามช่องรวมกันจึงได้ 256 × 256 × 256 = 16,777,216 สี ค่า rgb(0, 0, 0) คือดำ และ rgb(255, 255, 255) คือขาว ใน CSS เขียนได้ทั้ง rgb(30, 144, 255) และแบบเว้นวรรค rgb(30 144 255)

HSL: เฉด ความสด ความสว่าง

HSL บอกสีใกล้กับวิธีที่คนนึกถึงสี: H คือเฉดสีเป็นองศาบนวงล้อ (0° แดง ไล่ไปเขียวที่ 120° และน้ำเงินที่ 240°) S คือความสด 0% เป็นเทา 100% สดที่สุด และ L คือความสว่าง โดย W3C กำหนดให้ 50% เป็นสีปกติ 100% เป็นขาว และ 0% เป็นดำ HSL จึงสะดวกเวลาอยากได้สีเดิมที่อ่อนลงหรือเข้มขึ้น แต่ W3C ก็เตือนว่ามุมเฉดของ HSL ไม่สม่ำเสมอตามการรับรู้ของตา สีบางช่วงจะดูเบียดกัน บางช่วงห่างกัน ดูเพิ่มที่ เฉดสี ทินต์ และโทน

CMYK: หมึกสี่สีของโรงพิมพ์

CMYK คือเปอร์เซ็นต์ของหมึกฟ้า (Cyan) ม่วงแดง (Magenta) เหลือง (Yellow) และดำ (Key) ที่ใช้พิมพ์ลงกระดาษ ค่าที่เครื่องมือนี้ให้มาจากสูตรพื้นฐานที่แปลงจาก RGB ตรง ๆ ไม่ได้ผ่านโปรไฟล์สี (ICC profile) ของเครื่องพิมพ์ จึงเหมาะเป็นจุดตั้งต้น ถ้าเป็นงานพิมพ์จริง ควรถามโรงพิมพ์ว่าใช้โปรไฟล์อะไร แล้วแปลงในโปรแกรมอย่าง Photoshop หรือ Illustrator อีกครั้ง อ่านความต่างแบบละเอียดได้ที่ CMYK กับ RGB

ควรใช้โค้ดสีแบบไหนกับงานอะไร

งานที่จบบนจอให้ใช้ HEX หรือ RGB งานที่ต้องพิมพ์ให้ใช้ CMYK ตามที่โรงพิมพ์กำหนด และใช้ HSL เมื่ออยากไล่สีเดิมให้อ่อนหรือเข้มอย่างเป็นระบบ หลักง่าย ๆ คือถามตัวเองว่างานชิ้นนี้คนจะเห็นผ่านแสงจากจอ หรือผ่านหมึกบนกระดาษ

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

วิธีแปลงโค้ดสีด้วยมือ (สูตรเดียวกับที่เครื่องมือนี้ใช้)

แปลง HEX เป็น RGB ด้วยการอ่านแต่ละคู่เป็นเลขฐานสิบ แล้วแปลง RGB เป็น CMYK ด้วยการหาหมึกดำจากช่องที่สว่างที่สุดก่อน ตัวอย่างนี้ใช้สี seagreen ของ CSS ซึ่ง W3C กำหนดไว้เป็น #2E8B57 ทุกตัวเลขด้านล่างคำนวณจากสูตรจริง ไม่ได้พิมพ์เอง

HEX → RGB

1. แยกเป็นสามคู่: 2E 8B 57
2. แปลงแต่ละคู่เป็นฐานสิบ (หลักซ้ายคูณ 16 แล้วบวกหลักขวา): 2E = 46, 8B = 139, 57 = 87
3. ได้ rgb(46, 139, 87)

RGB → CMYK

1. หารแต่ละช่องด้วย 255: R′ = 0.180, G′ = 0.545, B′ = 0.341
2. หมึกดำ K = 1 − ค่าที่มากที่สุด = 1 − 0.545 = 0.455
3. C = (1 − R′ − K) ÷ (1 − K) และทำแบบเดียวกันกับ M (ใช้ G′) และ Y (ใช้ B′)
4. คูณ 100 แล้วปัดเป็นจำนวนเต็ม ได้ C67 M0 Y37 K45

CMYK → RGB

ย้อนกลับด้วยสูตร R = 255 × (1 − C) × (1 − K) โดยใช้ C และ K เป็นสัดส่วน 0–1 (เช่น 67% คือ 0.67) และทำแบบเดียวกันกับ G (ใช้ M) และ B (ใช้ Y) ค่า C67 M0 Y37 K45 จะได้ rgb(46, 140, 88) ซึ่งต่างจากค่าเดิม rgb(46, 139, 87) เล็กน้อย เพราะ CMYK ถูกปัดเป็นจำนวนเต็มเปอร์เซ็นต์ ข้อมูลส่วนที่ละเอียดกว่า 1% จึงหายไประหว่างทาง

RGB → HSL

หาค่ามากสุดและน้อยสุดของ R′ G′ B′ ความสว่าง L คือค่าเฉลี่ยของสองค่านั้น ความสด S คือระยะห่างของสองค่าเทียบกับความสว่าง และเฉด H คือมุมที่บอกว่าช่องไหนเด่นที่สุด สี #2E8B57 จึงได้ hsl(146, 50%, 36%) ในเครื่องมือด้านบนพิมพ์ค่าในช่องใดก็ได้ แล้วตัวเลขทั้งหมดจะคำนวณตามสูตรชุดนี้ทันที

วิธีใช้โค้ดสีใน Photoshop, Figma และ CSS

คัดลอกโค้ดจากเครื่องมือนี้ แล้ววางลงในช่องโค้ดสีของโปรแกรมได้เลย: Photoshop รับ HEX, RGB และ CMYK ส่วน Figma รับ Hex, RGB, HSL, HSB และ CSS ปุ่มคัดลอกข้างแต่ละช่องให้ค่าในรูปแบบที่วางต่อได้ทันที

Photoshop

1. คลิกช่องสี Foreground ที่ด้านล่างของแถบเครื่องมือเพื่อเปิด Color Picker
2. วางโค้ด HEX ลงช่องที่มีเครื่องหมาย # หรือพิมพ์ค่าในช่อง R G B หรือ C M Y K ตามงาน
3. กด OK สีนั้นจะกลายเป็นสี Foreground ที่ใช้กับเครื่องมือวาดต่อไป

Figma

1. เลือกเลเยอร์ แล้วคลิกช่องสีในหัวข้อ Fill
2. ตัวเลือกสีจะแสดงค่าแบบ Hex เป็นค่าเริ่มต้น วางโค้ด HEX ได้ทันที หรือเปลี่ยนโมเดลจากดรอปดาวน์เป็น RGB, HSL, HSB หรือ CSS
3. Figma ไม่มี CMYK ในรายการโมเดลสี ถ้างานต้องไปโรงพิมพ์ ให้แปลงสีในโปรแกรมสิ่งพิมพ์อีกครั้ง

CSS

.button {
  background: #1E90FF;
  color: #0A0A0A;
  border-color: hsl(210, 100%, 56%);
}
.button:hover {
  background: #FF8D1E;
}

background กับ border-color คือสีเดียวกันที่เขียนเป็น HEX และ HSL (แต่ค่า HSL ถูกปัดเป็นจำนวนเต็ม จึงได้ rgb(31, 143, 255) ต่างจาก rgb(30, 144, 255) ช่องละไม่เกิน 1 ระดับ ถ้าต้องการสีตรงเป๊ะให้ใช้ HEX) color คือสีตัวอักษรที่เครื่องมือเลือกให้อ่านออกบนพื้นนี้ ส่วนสีตอน hover คือสีคู่ตรงข้ามจากพาเล็ตต์ด้านบน ถ้าแอปที่คุณใช้มีช่องให้พิมพ์โค้ดสี ให้คัดลอก HEX ไปวาง เพราะเป็นรูปแบบที่สั้นที่สุด

เช็กคอนทราสต์ให้ตัวอักษรอ่านง่ายตาม WCAG

ตัวอักษรขนาดปกติต้องมีคอนทราสต์กับพื้นอย่างน้อย 4.5:1 จึงผ่านระดับ AA และ 7:1 จึงผ่านระดับ AAA ส่วนตัวอักษรขนาดใหญ่ใช้เกณฑ์ 3:1 และ 4.5:1 ตัวเลขเหล่านี้มาจาก WCAG 2.2 ของ W3C ซึ่งนับว่าตัวใหญ่คือ 18 พอยต์ขึ้นไป หรือ 14 พอยต์ตัวหนา

อัตราส่วนคำนวณจาก (L1 + 0.05) ÷ (L2 + 0.05) โดย L1 คือความสว่างสัมพัทธ์ของสีที่สว่างกว่า และ L2 ของสีที่เข้มกว่า ความสว่างสัมพัทธ์ได้จาก 0.2126 × R + 0.7152 × G + 0.0722 × B หลังแปลงแต่ละช่องจากค่าแกมมาเป็นค่าเชิงเส้น เครื่องมือนี้ใช้จุดตัด 0.03928 ในขั้นแปลงแกมมาแทน 0.04045 ที่ WCAG 2.2 เขียนไว้ (WCAG 2.2 เองระบุว่าก่อนเดือนพฤษภาคม 2021 ค่านี้คือ 0.03928 และการเปลี่ยนไม่มีผลในทางปฏิบัติ) สำหรับโค้ดสี 8 บิตทั้งสองค่าให้ผลเท่ากันทุกสี เพราะไม่มีค่า 0–255 ใดที่หารด้วย 255 แล้วตกอยู่ระหว่างสองค่านี้ (10 ÷ 255 = 0.0392 และ 11 ÷ 255 = 0.0431)

ตัวอย่างสี #1E90FF: ตัวอักษรสีขาวได้ 3.23:1 และสีดำได้ 6.48:1 ตัวอักษรสีดำจึงอ่านง่ายกว่าบนสีนี้ เครื่องมือปัดอัตราส่วนลงที่ทศนิยมสองตำแหน่ง จึงไม่มีทางแสดงว่าผ่านทั้งที่จริงขาดไปนิดเดียว

สร้างพาเล็ตต์สีจากสีเดียว

พาเล็ตต์ในเครื่องมือนี้ได้จากการหมุนเฉด H บนวงล้อสี HSL โดยคงความสดและความสว่างไว้: คู่ตรงข้ามหมุน 180° สีข้างเคียงหมุนข้างละ 30° สามเส้าหมุนทีละ 120° และคู่ตรงข้ามแยกหมุน 150° กับ 210° ส่วนชุดเฉดอ่อน–เข้มได้จากการผสมขาวหรือดำเข้าไปทีละ 25%

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

ทำความเข้าใจที่มาของการหมุนเฉดได้ที่ วงจรสี 12 สี และ สีโทนร้อนและโทนเย็น ถ้าอยากได้พาเล็ตต์ที่มีกลิ่นอายไทย ลอง เครื่องมือสร้างพาเล็ตต์สีไทย ที่เลือกจากสี Thaitone

ดูดสีจากรูปและจากหน้าจอทำงานอย่างไร

การดูดสีจากรูปเกิดขึ้นในเบราว์เซอร์ของคุณทั้งหมด: ไฟล์ถูกวาดลงแคนวาส แล้วอ่านค่าสีของพิกเซลที่แตะ ไม่มีการส่งรูปออกจากเครื่อง หน้านี้ไม่มีโค้ดอัปโหลดรูปใด ๆ เมื่อโหลดหน้าเสร็จแล้ว ต่อให้ปิดอินเทอร์เน็ต เครื่องมือก็ยังดูดสีจากรูปได้

5 สีเด่นได้จากการย่อรูปให้เหลือไม่เกิน 96 พิกเซลต่อด้าน แล้วจัดกลุ่มพิกเซลที่สีใกล้กันด้วยวิธี k-means ทั้งหมด 12 รอบ ผลลัพธ์เรียงตามจำนวนพิกเซลจากมากไปน้อย และเพราะจุดเริ่มต้นของการจัดกลุ่มกำหนดไว้ตายตัว ไม่ได้สุ่ม รูปเดิมจึงได้ผลเดิมทุกครั้ง พิกเซลที่โปร่งใสเกินครึ่งจะไม่ถูกนับ

ปุ่ม “ดูดสีจากหน้าจอ” ใช้ EyeDropper API ของเบราว์เซอร์ ซึ่งดูดสีได้ทุกจุดบนจอ รวมถึงนอกหน้าต่างเบราว์เซอร์ MDN ระบุว่ายังเป็นฟีเจอร์ทดลองที่ใช้ได้ไม่ครบทุกเบราว์เซอร์ และต้องเริ่มจากการกดของผู้ใช้เท่านั้น ปุ่มนี้จึงปรากฏเฉพาะในเบราว์เซอร์ที่รองรับ ถ้าไม่เห็นปุ่ม ให้แคปหน้าจอแล้วใช้ช่องดูดสีจากรูปแทน