ตัวแปลงสี

เกี่ยวกับ GeekFormat

智能输入（支持 HEX、RGB、HSL、CSS 颜色名）

最接近的 CSS 颜色名: mediumseagreen

RGB

HSL

HSV

HEX#22c55e

RGBrgb(34, 197, 94)

RGBArgba(34, 197, 94, 1)

HSLhsl(142, 71%, 45%)

HSLAhsla(142, 71%, 45%, 1)

HSVhsv(142, 83%, 77%)

HWBhwb(142, 13%, 23%)

CMYKcmyk(83%, 0%, 52%, 23%)

XYZxyz(22.64, 41.08, 17.32)

LABlab(70, -62, 40)

LCHlch(70, 74, 147)

OKLABoklab(1, 0, 0)

OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字

2.28:1

AA ✗AAA ✗

黑字

9.22:1

AA ✓AAA ✓

ตัวแปลงสีออนไลน์รองรับการแปลงคลิกเดียวระหว่าง 14 รูปแบบสี ได้แก่ HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB และ OKLCH มีตัวเลือกสีในตัวสำหรับการปรับแบบเรียลไทม์ การตรวจสอบคอนทราสต์ WCAG, ฮาร์โมนีสี, การสร้างเฉดสี, การแปลงแบบกลุ่ม และการแยกสีจากรูปภาพ การคำนวณทั้งหมดทำงานในเบราว์เซอร์โดยไม่ต้องอัปโหลดไฟล์ เหมาะสำหรับนักออกแบบและนักพัฒนาฟรอนต์เอนด์

คำแนะนำที่เกี่ยวข้อง

จำลองตาบอดสี

ฟิลเตอร์รูปภาพ

CSS Formatter

แปลงหน่วย

แปลงค่าเงิน

แปลงรูปแบบรูปภาพ

กรณีการใช้งาน

แปลงค่า HEX จากรูปจำลองดีไซน์เป็น RGB/HSL สำหรับสไตล์ CSS ในการพัฒนาฟรอนต์เอนด์ หรือเป็น RGBA เมื่อต้องการความโปร่งใส
รวมรูปแบบค่าสีให้เป็นหนึ่งเดียวเมื่อสลับใช้ระหว่างโปรแกรมออกแบบเช่น Figma, Sketch และ Photoshop สำหรับนักออกแบบ UI/UX
แปลงค่า RGB บนหน้าจอเป็น CMYK เพื่ออ้างอิงระหว่างการสื่อสารงานพิมพ์เบื้องต้น
ตรวจสอบอัตราส่วนคอนทราสต์ระหว่างข้อความและสีพื้นหลังเพื่อการปฏิบัติตาม WCAG AA/AAA ในการออกแบบที่เข้าถึงได้
สร้างกลุ่มสีตั้งแต่อ่อนไปเข้มที่สมบูรณ์อย่างรวดเร็วสำหรับสร้างระบบดีไซน์โดยใช้ตัวสร้างเฉดสี
สร้างรูปแบบสีมืออาชีพ (คอมพลีเมนทารี แอนะลอกัส ฯลฯ) สำหรับแบรนด์หรือการออกแบบโปสเตอร์โดยใช้ฮาร์โมนีสี
แยกสีเด่นจากรูปอ้างอิงหรือรูปภาพเพื่อแรงบันดาลใจ (ตัวเลือกสีจากรูปภาพ)
ประมวลผลค่าสีหลายค่าจากรูปจำลองดีไซน์แบบกลุ่มและแปลงเป็นรูปแบบที่ต้องการพร้อมกัน
ปรับความสว่างและความอิ่มตัวได้อย่างสะดวกด้วย HSL หรือ OKLCH เมื่อเขียนสถานะ CSS เช่น โฮเวอร์
สร้างสีระบบดีไซน์ที่สม่ำเสมอตามการรับรู้โดยใช้ปริภูมิสี OKLCH ของ CSS สมัยใหม่
สอนหลักการปริภูมิสีด้วยการเปรียบเทียบภาพแบบโต้ตอบว่ารูปแบบต่างๆ แสดงสีเดียวกันอย่างไร
ค้นหาชื่อสี CSS ภาษาอังกฤษสำหรับค่าใดๆ อย่างรวดเร็วเพื่อการอ้างอิงและสื่อสารที่ง่ายดาย

คุณสมบัติ

การแปลง 14 รูปแบบสี: รองรับ HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH และชื่อสี CSS มาตรฐาน
การจดจำอินพุตอัจฉริยะ: วางรูปแบบสีใดๆ ระบบจะตรวจจับอัตโนมัติ รองรับชวเลข #rgb, #rrggbbaa พร้อมอัลฟา, rgb(), hsl() และชื่อสี CSS
การปรับแถบเลื่อนเรียลไทม์: แดง/เขียว/น้ำเงิน RGB, ฮิว/ความอิ่มตัว/ความสว่าง HSL, แถบเลื่อน HSV สำหรับการปรับสีแบบ WYSIWYG ทันที
รองรับความโปร่งใสอัลฟา: การแปลง RGBA และ HSLA พร้อมช่องอัลฟา รองรับทั้งรูปแบบความทึบแบบเปอร์เซ็นต์และทศนิยม
จับคู่ชื่อสี CSS: ค้นหาชื่อสี CSS มาตรฐานที่ใกล้เคียงที่สุดโดยอัตโนมัติ (มากกว่า 140 ตัวเลือก) สำหรับการอ้างอิงอย่างรวดเร็ว
ตัวตรวจสอบคอนทราสต์ WCAG: คำนวณอัตราส่วนคอนทราสต์กับข้อความสีขาวและสีดำแบบเรียลไทม์ พร้อมตัวบ่งชี้ผ่าน/ไม่ผ่าน AA (≥4.5:1) และ AAA (≥7:1) อัตโนมัติ
ตัวสร้างฮาร์โมนีสี: สร้าง 5 รูปแบบคลาสสิกคลิกเดียว—คอมพลีเมนทารี, แอนะลอกัส, ไตรแอดิก, สปลิต-คอมพลีเมนทารี และเตตราดิก
การสร้างเฉดสี: มีทั้งเฉดสีผสม RGB แบบดั้งเดิมและเฉดสี OKLCH ที่สม่ำเสมอตามการรับรู้ สร้าง 11 ขั้นความสว่างทันที
การแปลงแบบกลุ่ม: ประมวลผลค่าสีหลายค่าพร้อมกันด้วยอินพุตหลายบรรทัด—เหมาะสำหรับประมวลผลจานสีระบบดีไซน์
ตัวเลือกสีจากรูปภาพ: อัปโหลดรูปภาพเพื่อสุ่มตัวอย่างและแยก 16 สีเด่นโดยอัตโนมัติ เหมาะสำหรับดึงจานสีจากรูปอ้างอิงหรือรูปภาพ
คัดลอกคลิกเดียว: ปุ่มคัดลอกถัดจากทุกรูปแบบสีสำหรับการคัดลอกทันทีในสัญลักษณ์มาตรฐาน—พร้อมวางลงใน CSS หรือซอฟต์แวร์ออกแบบโดยตรง
ตัวสร้างสีสุ่ม: สร้างสีสุ่มคลิกเดียวเพื่อแรงบันดาลใจอย่างรวดเร็ว
ประมวลผลบนเบราว์เซอร์ล้วน: การคำนวณสีทั้งหมดทำงานในเบราว์เซอร์โดยไม่ต้องอัปโหลดไปยังเซิร์ฟเวอร์—ใช้งานได้ทันทีโดยไม่ต้องลงทะเบียน
ดีไซน์ตอบสนอง: ใช้งานได้อย่างราบรื่นบนเดสก์ท็อป มือถือ และแท็บเล็ต—ปรับสีและคัดลอกค่าได้อย่างสะดวกบนโทรศัพท์

วิธีการใช้งาน

ป้อนค่ารูปแบบสีใดๆ ในช่องอินพุตด้านบน คลิกสวอทช์สีเพื่อใช้ตัวเลือกสี หรือลากแถบเลื่อน RGB/HSL/HSV เพื่อปรับ
ตัวแปลงจะแปลงเป็นทั้ง 14 รูปแบบโดยอัตโนมัติแบบเรียลไทม์ ได้แก่ HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH
สลับไปที่ 'ฮาร์โมนีสี' สำหรับรูปแบบสี, 'เฉดสี' สำหรับช่วงเฉดสีอ่อน-เข้ม หรือ 'กลุ่ม/ตัวเลือกสี' สำหรับการแปลงกลุ่มหรือแยกสีจากรูปภาพ
คลิกปุ่มคัดลอกถัดจากรูปแบบสีใดๆ เพื่อคัดลอกสัญลักษณ์มาตรฐานโดยตรงเพื่อใช้งาน

คำถามที่พบบ่อย

ตัวแปลงสีรองรับรูปแบบสีอะไรบ้าง?

รองรับการแปลงระหว่าง 14 รูปแบบสีทั่วไป: HEX (ชวเลข 3 หลักและ 8 หลักพร้อมอัลฟา), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ (CIE 1931 พร้อมแสง D65), CIE LAB, LCH, OKLAB, OKLCH รวมถึงชื่อสี CSS มาตรฐานมากกว่า 140 ชื่อ ป้อนรูปแบบใดๆ เพื่อแปลงเป็นรูปแบบอื่นทั้งหมดโดยอัตโนมัติ

ใช้งานตัวแปลงสีนี้อย่างไร?

ง่ายมาก: 1) ป้อนค่าสีใดๆ ในช่องอินพุตด้านบน—ตัวอย่างเช่น #22c55e, rgb(34,197,94), hsl(142,71%,45%) หรือแม้แต่ชื่อสีเช่น green; 2) หรือคลิกสวอทช์สีเพื่อใช้ตัวเลือกสี หรือลากแถบเลื่อน RGB/HSL/HSV เพื่อปรับแบบเรียลไทม์; 3) การแปลง 14 รูปแบบทั้งหมดจะปรากฏทันทีด้านล่าง—คลิกปุ่มคัดลอกถัดจากรูปแบบใดๆ เพื่อคัดลอกไปยังคลิปบอร์ด

ความแตกต่างระหว่าง HEX, RGB และ HSL คืออะไร? แต่ละแบบใช้ที่ไหน?

HEX เป็นสัญลักษณ์ฐานสิบหกที่พบบ่อยที่สุดสำหรับเว็บ—#ff0000 สำหรับสีแดง—ใช้กันอย่างแพร่หลายใน CSS และไฟล์ส่งมอบงานดีไซน์ RGB แสดงสีด้วยค่า 0-255 สำหรับแดง เขียว และน้ำเงิน ซึ่งเป็นพื้นฐานของการแสดงผลบนหน้าจอ HSL ใช้ฮิว (0-360°), ความอิ่มตัว และความสว่าง ซึ่งสอดคล้องกับการรับรู้สีของมนุษย์มากขึ้น และใช้งานง่ายกว่าสำหรับนักออกแบบในการปรับสี CMYK ใช้เปอร์เซ็นต์ของหมึกสีฟ้า สีบานเย็น สีเหลือง และสีดำสำหรับงานพิมพ์ OKLCH เป็นปริภูมิสีสมัยใหม่ที่สม่ำเสมอตามการรับรู้ ซึ่งสร้างการไล่ระดับสีและเฉดสีที่ราบรื่นตามสายตา

อัตราส่วนคอนทราสต์ WCAG คืออะไร? อัตราส่วนเท่าไหร่ที่ตรงตามมาตรฐานการเข้าถึง?

อัตราส่วนคอนทราสต์ WCAG วัดความแตกต่างของความสว่างระหว่างสีข้อความและสีพื้นหลัง เพื่อให้แน่ใจว่าเนื้อหาอ่านได้สำหรับผู้ใช้ที่มีความบกพร่องทางสายตา ตามแนวทางการเข้าถึงเนื้อหาเว็บ: ข้อความเนื้อหาปกติต้องการ ≥4.5:1 สำหรับระดับ AA (ผ่าน) และ ≥7:1 สำหรับระดับ AAA (ดีเยี่ยม); ข้อความขนาดใหญ่ (≥18pt ตัวหนาหรือ ≥24pt ปกติ) ต้องการ ≥3:1 สำหรับ AA ตัวแปลงจะแสดงอัตราส่วนคอนทราสต์แบบเรียลไทม์กับทั้งข้อความสีขาวและสีดำ พร้อมตัวบ่งชี้ผ่าน/ไม่ผ่านอัตโนมัติสำหรับมาตรฐาน AA และ AAA

ตัว A ใน RGBA หมายถึงอะไร? ตั้งค่าความโปร่งใสอย่างไร?

ตัว A ใน RGBA ย่อมาจากช่องอัลฟา (Alpha channel) ซึ่งควบคุมความโปร่งใส—ค่าอยู่ในช่วง 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบทั้งหมด) ตัวอย่างเช่น rgba(34,197,94,0.5) คือสีเขียวโปร่งใสกึ่งหนึ่ง ปรับความโปร่งใสด้วยแถบเลื่อนอัลฟา; ผลลัพธ์การแปลงจะแสดงทั้งรูปแบบ RGBA และ HSLA พร้อมอัลฟา HEX ยังรองรับความโปร่งใสโดยการเพิ่มตัวเลขฐานสิบหกสองหลักหลังสี 6 หลัก—ตัวอย่างเช่น #22c55e80 แสดงความทึบ 50%

OKLCH และ LCH คืออะไร? แตกต่างจาก HSL อย่างไร?

LCH และ OKLCH เป็นปริภูมิสีที่สม่ำเสมอตามการรับรู้ โดย L คือความสว่าง, C คือโครมา (ความอิ่มตัว), H คือฮิว ข้อได้เปรียบที่ใหญ่ที่สุดเหนือ HSL คือ: สีที่มีค่า L เท่ากันจะปรากฏสว่างเท่ากันตามสายตา ซึ่งสำคัญอย่างยิ่งสำหรับระบบดีไซน์—หากคุณสร้างจานสีที่มีฮิวต่างกันแต่ความสว่างเท่ากันโดยใช้ HSL บางสีจะปรากฏเข้มกว่าสีอื่น แต่ OKLCH รับประกันความสว่างที่รับรู้ได้สม่ำเสมอ OKLCH เป็นรุ่นใหม่กว่า LAB/LCH มีการคำนวณที่เรียบง่ายกว่าและการคาดการณ์สีที่แม่นยำกว่า แนะนำใน CSS สมัยใหม่ (CSS Color Level 4)

ใช้ฟีเจอร์ตัวเลือกสีจากรูปภาพอย่างไร?

สลับไปที่แท็บ 'กลุ่ม/ตัวเลือกสี' คลิกอัปโหลดเพื่อเลือกรูปภาพ—ตัวแปลงจะปรับขนาดรูปภาพเป็นตาราง 100×100 โดยอัตโนมัติและแยก 16 สีจากตำแหน่งที่กระจายอย่างสม่ำเสมอ แสดงสวอทช์และค่าสี คลิกสวอทช์ใดๆ เพื่อตั้งค่าสีนั้นเป็นสีหลักสำหรับการปรับและแปลงต่อไป เหมาะอย่างยิ่งสำหรับการแยกจานสีจากรูปอ้างอิง รูปจำลองดีไซน์ หรือรูปภาพอย่างรวดเร็ว

มีรูปแบบฮาร์โมนีสีอะไรบ้างและใช้งานอย่างไร?

ตัวแปลงมี 5 รูปแบบฮาร์โมนีคลาสสิก: 1) คอมพลีเมนทารี: สีที่ห่างกัน 180° เพื่อคอนทราสต์สูง; 2) แอนะลอกัส: สีที่ห่างกัน 30° เพื่อความกลมกลืนตามธรรมชาติ; 3) ไตรแอดิก: สีที่ห่างกัน 120° เพื่อความสมดุลที่มีชีวิตชีวา; 4) สปลิต-คอมพลีเมนทารี: สีหลัก + 30° ทั้งสองข้างของสีคอมพลีเมนทารีเพื่อคอนทราสต์ที่อ่อนโยน; 5) เตตราดิก (สี่เหลี่ยมผืนผ้า): สี่สีที่ห่างกัน 90° เพื่อความหลากหลายที่อุดมสมบูรณ์ สลับไปที่แท็บ 'ฮาร์โมนีสี' เพื่อดูรูปแบบที่สร้างขึ้น—คลิกสวอทช์ใดๆ เพื่อตั้งเป็นสีหลัก

ผลลัพธ์การแปลง CMYK สามารถใช้โดยตรงสำหรับงานพิมพ์ได้หรือไม่?

ใช้งานได้ดีเป็นข้อมูลอ้างอิง แต่ทราบไว้ว่า: หน้าจอใช้สี RGB แบบบวก (การปล่อยแสง) ในขณะที่งานพิมพ์ใช้ CMYK แบบลบ (การสะท้อนหมึก) สิ่งเหล่านี้มีช่วงสีที่ต่างกัน—สี RGB ที่สดใสบางสี (เช่น สีเขียวและสีน้ำเงินที่สดใส) ไม่สามารถทำซ้ำได้อย่างถูกต้องด้วยหมึก CMYK ดังนั้นจะมีการเปลี่ยนแปลงสีบางอย่าง ตัวแปลงใช้สูตรการแปลง RGB เป็น CMYK มาตรฐาน เหมาะสำหรับการสื่อสารเบื้องต้นและการอ้างอิงอย่างรวดเร็ว สำหรับการพิมพ์ขั้นสุดท้าย แนะนำให้ใช้ซอฟต์แวร์ออกแบบมืออาชีพที่มีโปรไฟล์สี ICC ที่เหมาะสมสำหรับการพิสูจน์แบบดิจิทัล

การแปลงแบบกลุ่มทำงานอย่างไร? แปลงสีได้ครั้งละกี่สี?

สลับไปที่แท็บ 'กลุ่ม/ตัวเลือกสี' ป้อนสีหนึ่งสีต่อบรรทัดในกล่องข้อความ (ผสม HEX/RGB/HSL/ชื่อสี CSS ได้อย่างอิสระ) จากนั้นคลิกแปลงกลุ่มเพื่อประมวลผลสีทั้งหมดพร้อมกัน ผลลัพธ์จะแสดงสวอทช์สีและค่า HEX สำหรับแต่ละสี ไม่มีขีดจำกัดทางทฤษฎี แต่สำหรับสีหลายร้อยสี แนะนำให้ประมวลผลเป็นกลุ่มเพื่อหลีกเลี่ยงการค้างของเบราว์เซอร์

สามารถใช้ตัวแปลงสีบนมือถือได้หรือไม่?

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

จะทำอย่างไรหากอินพุตแสดง 'ไม่รู้จักรูปแบบสี'?

ตรวจสอบรูปแบบอินพุต: 1) HEX ต้องขึ้นต้นด้วย # (ไม่จำเป็น) ตามด้วยตัวอักษรฐานสิบหก 3, 6 หรือ 8 ตัว (0-9/a-f)—#f00, #ff0000, #ff0000ff ถูกต้องทั้งหมด; 2) รูปแบบ RGB ต้องเป็น rgb(r,g,b) มีสามค่า 0-255 คั่นด้วยจุลภาค; 3) รูปแบบ HSL คือ hsl(h,s%,l%) มีฮิว 0-360°, ความอิ่มตัวและความสว่าง 0-100%; 4) ชื่อสี CSS ต้องเป็นชื่อมาตรฐานเช่น red/blue/green—ไม่รองรับชื่อสีภาษาไทย

เหตุใดสีที่แปลงแล้วจึงดูแตกต่างกันในซอฟต์แวร์ต่างๆ?

นี่เป็นพฤติกรรมการจัดการสีปกติ: ซอฟต์แวร์ จอภาพ และระบบปฏิบัติการต่างๆ อาจใช้โปรไฟล์สีที่ต่างกัน (sRGB, Display P3, Adobe RGB) ทำให้เกิดความแตกต่างทางสายตาเล็กน้อยสำหรับค่าสีเดียวกัน หน้าเว็บค่าเริ่มต้นเป็นปริภูมิสี sRGB—หากคุณกำลังใช้โปรไฟล์ Adobe RGB หรือ Display P3 ในซอฟต์แวร์เช่น Photoshop คุณจะต้องแปลงเป็น sRGB เมื่อส่งออกเพื่อการแสดงผลบนเว็บที่สอดคล้องกัน

ควรใช้รูปแบบสีใดในการพัฒนาฟรอนต์เอนด์?

CSS สมัยใหม่รองรับทุกรูปแบบสี: HEX เป็นที่นิยมที่สุด มีความเข้ากันได้ดีที่สุดและเป็นมาตรฐานสำหรับการส่งมอบงานดีไซน์; RGB/RGBA ทำงานได้ดีเมื่อคุณต้องการปรับความทึบแบบไดนามิกหรือจัดการระดับช่องสี; HSL ใช้งานง่ายที่สุดสำหรับการเขียนตัวแปรสีโดยตรงในโค้ด (เช่น ทำให้สถานะโฮเวอร์สว่างขึ้นโดยเพียงแค่เพิ่มค่า L); OKLCH คืออนาคต รองรับใน CSS Color Level 4 โดยกำเนิด มีความสม่ำเสมอตามการรับรู้ที่สมบูรณ์สำหรับการสร้างเฉดสีและการไล่ระดับสี—เลือกตามความต้องการความเข้ากันได้ของโปรเจกต์ของคุณ

ฟีเจอร์การสร้างเฉดสีใช้ทำอะไร? ความแตกต่างระหว่างเฉดสีแบบดั้งเดิมและ OKLCH คืออะไร?

การสร้างเฉดสีจะสร้าง 11 ขั้น (50-900) ของเฉดสีอ่อนและเข้มสำหรับกลุ่มสีทันที เหมาะสำหรับสร้างจานสีระบบดีไซน์ (เช่น ระบบสีของ Tailwind) เฉดสีแบบดั้งเดิมจะผสมไปทางสีขาวในปริภูมิ RGB อย่างง่าย—แม้จะสม่ำเสมอทางตัวเลข แต่โทนสีกลางอาจดูไม่สม่ำเสมอ เฉดสี OKLCH จะรักษาฮิวและโครมาในขณะที่ปรับเฉพาะความสว่าง L เท่านั้น สร้างการเปลี่ยนผ่านระหว่างสว่างและมืดที่ราบรื่นตามสายตา—มืออาชีพและสวยงามมากขึ้น

เกี่ยวกับปริภูมิสีและการแปลงรูปแบบสี

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

รูปแบบสีทั่วไป ได้แก่: HEX (RGB ฐานสิบหก สัญลักษณ์มาตรฐานสำหรับเว็บ), RGB (ค่าแดง/เขียว/น้ำเงิน 0-255 พื้นฐานของการแสดงผลบนหน้าจอ), HSL (ฮิว/ความอิ่มตัว/ความสว่าง ใช้งานง่ายที่สุดสำหรับการปรับสีของมนุษย์), CMYK (เปอร์เซ็นต์สีฟ้า/สีบานเย็น/สีเหลือง/สีดำสำหรับงานพิมพ์) ในช่วงไม่กี่ปีที่ผ่านมา ปริภูมิสีที่สม่ำเสมอตามการรับรู้เช่น OKLCH ได้รับความนิยมมากขึ้น เนื่องจากรับประกันทางคณิตศาสตร์ว่าสีที่มีค่าความสว่างเท่ากันจะปรากฏสว่างเท่ากันตามสายตา—สำคัญอย่างยิ่งสำหรับการสร้างระบบดีไซน์และการไล่ระดับสี

เหตุใดจึงต้องแปลงระหว่างรูปแบบสี? โปรแกรม แพลตฟอร์ม และสื่อเอาต์พุตต่างๆ ใช้รูปแบบสีที่ต่างกัน: CSS เว็บรองรับ HEX/RGB/HSL/OKLCH และอื่นๆ; ซอฟต์แวร์ออกแบบเช่น Figma/Sketch ตั้งค่าเริ่มต้นเป็น HEX; งานพิมพ์ต้องการ CMYK; และเมื่อปรับสีแบบไดนามิกในโค้ด (เช่น สถานะโฮเวอร์หรือการเปลี่ยนความทึบ) HSL และ OKLCH จะสะดวกกว่า HEX มาก การแปลงสีที่ถูกต้องช่วยให้แน่ใจว่าสีมีความสอดคล้องกันระหว่างรูปจำลองดีไซน์และการนำไปใช้จริง

คอนทราสต์ WCAG เป็นมาตรฐานสำคัญสำหรับการเข้าถึงเว็บ วัดความแตกต่างของความสว่างระหว่างข้อความด้านหน้าและสีพื้นหลังเพื่อให้แน่ใจว่าอ่านได้สำหรับผู้ใช้ที่มีความบกพร่องทางสายตา ข้อความเนื้อหาปกติต้องการอัตราส่วนคอนทราสต์ 4.5:1 (ระดับ AA) โดยเนื้อหาสำคัญแนะนำที่ 7:1 (ระดับ AAA) ตัวแปลงของเราคำนวณสิ่งนี้แบบเรียลไทม์ ช่วยให้นักออกแบบพิจารณาการเข้าถึงในระหว่างการเลือกสี แทนที่จะแก้ไขภายหลัง

ฮาร์โมนีสีเป็นทฤษฎีสีคลาสสิกที่อาศัยวงล้อสี สร้างชุดสีที่กลมกลืนตามสายตาโดยใช้ตำแหน่งเรขาคณิตของฮิวรอบวงล้อ สีคอมพลีเมนทารีสร้างคอนทราสต์ที่แข็งแรง เหมาะสำหรับปุ่มและองค์ประกอบเน้น; สีแอนะลอกัสมีความกลมกลืนและเป็นธรรมชาติสำหรับพื้นที่พื้นหลังขนาดใหญ่; รูปแบบไตรแอดิกและเตตราดิกให้ความสมดุลและความอุดมสมบูรณ์สำหรับเอกลักษณ์แบรนด์ ตัวแปลงมี 5 รูปแบบฮาร์โมนีที่ใช้บ่อยที่สุด สร้างจานสีได้คลิกเดียว

เฉดสี/ทินต์สีคือการแปรผันจากสว่างไปเข้มของฮิวเดียวกัน ซึ่งเป็นพื้นฐานสำหรับการสร้างระบบดีไซน์ (เช่น จานสี 50-900 ของ Tailwind CSS) เฉดสี RGB แบบดั้งเดิมจะผสมไปทางสีขาวอย่างง่าย แต่ดูไม่สม่ำเสมอตามสายตา; เฉดสีที่อาศัย OKLCH จะรักษาฮิวและโครมาในขณะที่ปรับเฉพาะความสว่างเท่านั้น สร้างการเปลี่ยนผ่านจากสว่างไปเข้มที่ราบรื่นตามสายตา—เป็นวิธีที่แนะนำสำหรับระบบดีไซน์สมัยใหม่ ตัวแปลงของเรามีเฉดสีทั้งสองรูปแบบเพื่อเปรียบเทียบ

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

ข้อสำคัญ: การแปลงรูปแบบสีมีความถูกต้องทางคณิตศาสตร์ แต่เนื่องจากช่วงสีของหน้าจอ การปรับเทียบจอภาพ และกระบวนการพิมพ์ ค่าสีเดียวกันอาจปรากฏแตกต่างกันเล็กน้อยในอุปกรณ์และสื่อต่างๆ หน้าจอใช้ RGB แบบบวก (แสงมากขึ้น = สว่างขึ้น) ในขณะที่งานพิมพ์ใช้ CMYK แบบลบ (หมึกมากขึ้น = เข้มขึ้น) ทั้งสองมีช่วงสีที่ต่างกัน—สี RGB ที่อิ่มตัวสูงบางสีไม่สามารถทำซ้ำได้อย่างถูกต้องด้วยหมึก CMYK ผลลัพธ์การแปลงเหมาะอย่างยิ่งสำหรับดีไซน์ดิจิทัลและการพัฒนาเว็บ; สำหรับการพิมพ์ขั้นสุดท้าย แนะนำให้ใช้ซอฟต์แวร์จัดการสีมืออาชีพสำหรับการพิสูจน์

术语表

HEX: สัญลักษณ์สีฐานสิบหกใช้ # ตามด้วยตัวเลขฐานสิบหก 6 หลักแสดง RGB (สองหลักต่อช่อง 00-FF)—#FF0000 สำหรับสีแดง รูปแบบที่พบบ่อยที่สุดสำหรับเว็บและซอฟต์แวร์ออกแบบ รองรับชวเลข 3 หลัก (เช่น #f00) และสัญลักษณ์ 8 หลักพร้อมอัลฟา
RGB/RGBA: แสดงสีด้วยสามค่า 0-255 สำหรับแดง เขียว และน้ำเงิน; rgba() เพิ่มช่องอัลฟาสำหรับความโปร่งใส (0-1) แบบจำลองสีพื้นฐานสำหรับการแสดงผลบนหน้าจอ
HSL/HSLA: แสดงสีด้วยฮิว (0-360°), ความอิ่มตัว (0-100%), และความสว่าง (0-100%) สอดคล้องกับการรับรู้สีของมนุษย์มากขึ้น—ใช้งานง่ายกว่าสำหรับนักออกแบบในการปรับสี
HSV/HSB: ฮิว, ความอิ่มตัว, ค่า/ความสว่าง—คล้ายกับ HSL แต่มีการคำนวณความสว่างที่แตกต่างกัน พบบ่อยในตัวเลือกสีในซอฟต์แวร์ออกแบบเช่น Photoshop
HWB: ฮิว, ความขาว, ความดำ—ส่วนเพิ่มของ CSS Color Level 4 ที่ใช้งานง่ายกว่า HSL: เพียงเพิ่มสีขาวหรือสีดำเพื่อปรับโทนสี
CMYK: เปอร์เซ็นต์ของหมึกสีฟ้า สีบานเย็น สีเหลือง และสีดำ (Key) ใช้ในอุตสาหกรรมการพิมพ์เพื่อแสดงอัตราส่วนผสมของหมึก
CIE LAB/LAB: ปริภูมิสีที่สม่ำเสมอตามการรับรู้ที่กำหนดโดยคณะกรรมาธิการสากลว่าด้วยการส่องสว่าง (CIE): L สำหรับความสว่าง (0-100), a สำหรับแกนสีเขียว-แดง, b สำหรับแกนสีน้ำเงิน-เหลือง—ออกแบบมาเพื่อให้ระยะทางตัวเลขสอดคล้องกับความแตกต่างสีที่รับรู้ได้
LCH: การแสดงพิกัดเชิงขั้วที่แปลงมาจาก LAB: L ความสว่าง, C โครมา (ความอิ่มตัว), H ฮิว—สม่ำเสมอตามการรับรู้มากกว่า HSL เหมาะสำหรับดีไซน์มืออาชีพที่ต้องการการควบคุมการรับรู้ที่แม่นยำ
OKLAB/OKLCH: ปริภูมิสีสม่ำเสมอตามการรับรู้รุ่นใหม่ที่เปิดตัวในปี 2020—การคำนวณที่เรียบง่ายกว่าและการคาดการณ์ฮิวที่แม่นยำกว่า LAB/LCH OKLCH เป็นรูปแบบเชิงขั้ว รองรับใน CSS สมัยใหม่และแนะนำสำหรับการสร้างระบบดีไซน์
คอนทราสต์ WCAG: อัตราส่วนความสว่างระหว่างข้อความด้านหน้าและพื้นหลังที่กำหนดโดยแนวทางการเข้าถึงเนื้อหาเว็บ: AA ต้องการ ≥4.5:1 สำหรับข้อความเนื้อหา AAA ต้องการ ≥7:1—เพื่อให้แน่ใจว่าอ่านได้สำหรับผู้ใช้ที่มีความบกพร่องทางสายตา
ฮาร์โมนีสี: ทฤษฎีสีที่อาศัยตำแหน่งรอบวงล้อสี ใช้ความสัมพันธ์เชิงเรขาคณิต (คอมพลีเมนทารี 180°, แอนะลอกัสห่างกัน 30°, ไตรแอดิกห่างกัน 120° ฯลฯ) เพื่อสร้างชุดสีที่กลมกลืนและสวยงามตามสายตา
เฉดสี/ทินต์: ช่วงของการแปรผันจากสว่างไปเข้มของฮิวเดียวกัน โดยทั่วไปจะสร้างเป็น 11 ขั้นตั้งแต่ 50 ถึง 900 ใช้ในระบบดีไซน์สำหรับการใช้งานสีเดียวในรูปแบบต่างๆ (พื้นหลัง เส้นขอบ ข้อความ องค์ประกอบเน้น)

ตารางเปรียบเทียบ 14 รูปแบบสีอ้างอิงอย่างรวดเร็ว

ด้านล่างเป็นช่วงค่า ตัวอย่างสีแดงบริสุทธิ์ และกรณีการใช้งานหลักสำหรับแต่ละรูปแบบสี:

รูปแบบ	ช่วงค่า	ตัวอย่างสีแดงบริสุทธิ์	กรณีการใช้งานหลัก
HEX	#RRGGBB 00-FF	`#ff0000`	CSS เว็บ การส่งมอบงานดีไซน์—รูปแบบที่เป็นสากลที่สุด
RGB	R/G/B: 0-255	`rgb(255,0,0)`	พื้นฐานการแสดงผลบนหน้าจอ การเขียนโปรแกรม Canvas/WebGL
RGBA	บวก A: 0-1	`rgba(255,0,0,1)`	CSS ที่ต้องการความโปร่งใส เอฟเฟกต์โอเวอร์เลย์
HSL	H:0-360°, S/L:0-100%	`hsl(0,100%,50%)`	การปรับสีของนักออกแบบ การจัดการสีแบบไดนามิกในโค้ด
HSV	H:0-360°, S/V:0-100%	`hsv(0,100%,100%)`	ตัวเลือกสีในซอฟต์แวร์ออกแบบเช่น Photoshop
HWB	H:0-360°, W/B:0-100%	`hwb(0,0%,0%)`	CSS Color 4—การปรับที่ใช้งานง่ายโดยการเพิ่มสีขาว/ดำ
CMYK	C/M/Y/K: 0-100%	`cmyk(0%,100%,100%,0%)`	อุตสาหกรรมการพิมพ์และสิ่งพิมพ์
OKLCH	L:0-1, C:0-0.4, H:0-360°	`oklch(0.63,0.24,29)`	CSS สมัยใหม่ จานสีระบบดีไซน์ การไล่ระดับสีที่สม่ำเสมอตามการรับรู้

ตารางอ้างอิงมาตรฐานคอนทราสต์การเข้าถึง WCAG

ข้อกำหนดคอนทราสต์ขั้นต่ำจากแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG 2.1):

ระดับ	ข้อกำหนดอัตราส่วนคอนทราสต์	ประเภทข้อความที่ใช้ได้	หมายเหตุ
AA	≥ 4.5:1	ข้อความเนื้อหาปกติ (<18pt ปกติหรือ <14pt ตัวหนา)	มาตรฐานผ่านขั้นต่ำ ข้อกำหนดการปฏิบัติตามกฎหมาย
AA	≥ 3:1	ข้อความขนาดใหญ่ (≥18pt ปกติหรือ ≥14pt ตัวหนา)	หัวข้อขนาดใหญ่อาจมีข้อกำหนดลดลง
AAA	≥ 7:1	ข้อความเนื้อหาปกติ (ปรับปรุง)	แนะนำสำหรับเนื้อหาสำคัญ การอ่านเนื้อหายาว
AAA	≥ 4.5:1	ข้อความขนาดใหญ่ (ปรับปรุง)	ดีไซน์ที่เข้าถึงได้อย่างดีเยี่ยม

ตารางอ้างอิง 5 รูปแบบฮาร์โมนีสีอย่างรวดเร็ว

ชุดสีคลาสสิกตามมุมของวงล้อฮิว—คลิกเพื่อสร้างทันที:

ประเภทรูปแบบ	ระยะห่างฮิว	จำนวนสี	เอฟเฟกต์ภาพและกรณีการใช้งาน
คอมพลีเมนทารี	ห่างกัน 180°	2 สี	คอนทราสต์สูง—เหมาะสำหรับปุ่ม องค์ประกอบเน้น CTA
แอนะลอกัส	ติดกัน ±30°	3 สี	กลมกลืนและเป็นธรรมชาติ—เหมาะสำหรับพื้นหลังขนาดใหญ่ จานสีหลัก
ไตรแอดิก	ห่างกัน 120°	3 สี	มีชีวิตชีวาและสมดุล—เหมาะสำหรับแบรนด์ดิ้ง ภาพประกอบ
สปลิต-คอมพลีเมนทารี	สีหลัก + ±30° ของคอมพลีเมนทารี	3 สี	คอนทราสต์ที่อ่อนโยน—ประณีตกว่าคอมพลีเมนทารี
เตตราดิก	ห่างกัน 90°	4 สี	อุดมสมบูรณ์และหลากหลาย—เหมาะสำหรับดีไซน์ที่ซับซ้อน ผลิตภัณฑ์สำหรับเด็ก

Privacy & Security

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

Authoritative References

Troubleshooting

จะทำอย่างไรหากอินพุตแสดง 'ไม่รู้จักรูปแบบสี'?

ตรวจสอบ: 1) รูปแบบ HEX ใช้ตัวอักษรฐานสิบหกที่ถูกต้อง (0-9, a-f, A-F) มี 3, 6 หรือ 8 หลัก; # เป็นตัวเลือก; 2) รูปแบบ RGB/RGBA ต้องการสามหรือสี่ค่าในวงเล็บ—R/G/B 0-255, อัลฟา 0-1 คั่นด้วยจุลภาค; 3) รูปแบบ HSL/HSLA ต้องการ H 0-360, S และ L เป็นค่าเปอร์เซ็นต์ 0-100; 4) ชื่อสี CSS ต้องเป็นชื่อภาษาอังกฤษมาตรฐาน—ไม่รองรับชื่อสีภาษาไทย

เหตุใดการแปลง CMYK จึงดูแตกต่างจากงานพิมพ์จริง?

นี่เป็นไปตามที่คาด: RGB และ CMYK มีช่วงสีที่ต่างกัน—สี RGB ที่สดใสจำนวนมากไม่สามารถทำซ้ำด้วยหมึก CMYK ตัวแปลงใช้สูตรการแปลงมาตรฐานที่เหมาะสำหรับการอ้างอิงเบื้องต้น สำหรับการพิมพ์มืออาชีพ: 1) แปลงเป็นโหมด CMYK ในซอฟต์แวร์ออกแบบ; 2) ใช้โปรไฟล์สี ICC ที่ถูกต้อง; 3) ทำการพิสูจน์ดิจิทัล

เหตุใดสีเดียวกันจึงดูแตกต่างกันบนโทรศัพท์เทียบกับคอมพิวเตอร์?

หน้าจอต่างๆ มีความครอบคลุมช่วงสี อุณหภูมิสี ความสว่าง และการปรับเทียบที่แตกต่างกัน: Mac ตั้งค่าเริ่มต้นเป็นช่วงสีกว้าง Display P3, พีซี Windows ส่วนใหญ่ใช้ sRGB และหน้าจอมือถือแตกต่างกันไป แนะนำให้ดีไซน์เว็บให้เป็นมาตรฐานบน sRGB เป็นพื้นฐานเพื่อการแสดงผลที่สอดคล้องกันบนอุปกรณ์ส่วนใหญ่

อัปโหลดรูปภาพสำหรับตัวเลือกสีแล้วไม่ตอบสนอง?

โปรดยืนยัน: 1) คุณกำลังอัปโหลดรูปแบบรูปภาพมาตรฐาน (JPG/PNG/GIF/WebP); 2) ไฟล์รูปภาพไม่เสียหาย; 3) ขนาดไฟล์ไม่ใหญ่เกินไป (แนะนำไม่เกิน 5MB) การเลือกสีจากรูปภาพประมวลผลในเครื่องบน canvas และไม่เคยอัปโหลดไปยังเซิร์ฟเวอร์—การรีเฟรชและอัปโหลดใหม่มักจะแก้ไขปัญหาได้