คำถามที่พบบ่อย ตัวแปลงสี (HEX, RGB, HSL)

ฉันจะแปลง HEX เป็น RGB ได้อย่างไร?

ในการแปลงรหัสสี hex เป็น RGB ให้แยกสตริง hex หกหลัก #RRGGBB ออกเป็นสามคู่ จากนั้นแปลงแต่ละคู่จากเลขฐานสิบหก (ฐาน 16) เป็นเลขฐานสิบ (ฐาน 10)

ตัวอย่าง: #FF5733

• FF = 255 (แดง)
• 57 = 87 (เขียว)
• 33 = 51 (น้ำเงิน)
• ผลลัพธ์: rgb(255, 87, 51)

สำหรับ hex แบบย่อ (#F53) ให้ขยายแต่ละหลักเป็นคู่ก่อน: #F53 กลายเป็น #FF5533 ตัวเลขถูกขยายเป็นสองเท่า: F ขยายเป็น FF, 5 ขยายเป็น 55, 3 ขยายเป็น 33

hex แปดหลัก (#RRGGBBAA) ทำงานในลักษณะเดียวกันแต่มีคู่พิเศษสำหรับช่องอัลฟา #FF573380 เพิ่ม 80 (128 หรือความทึบ ~50%) สำหรับช่องอัลฟา

สำหรับการแปลงทันที ใช้ ตัวแปลงสี ของเรา รองรับทุกรูปแบบ รวมถึง hex แบบสั้นและยาว ทั้งแบบมีและไม่มีอัลฟา

RGB กับ RGBA แตกต่างกันอย่างไร?

RGB กำหนดสีโดยใช้ช่องสีแดง เขียว และน้ำเงิน RGBA คือ RGB ที่มีช่อง Alpha เพิ่มเติมซึ่งควบคุมความทึบ ค่าอัลฟามีตั้งแต่ 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบทั้งหมด)

rgb(255, 0, 0)         /* สีแดงทึบเต็มที่ */
rgba(255, 0, 0, 0.5)  /* สีแดงที่ความทึบ 50% */

ใน CSS สมัยใหม่ (CSS Color Level 4) ไม่จำเป็นต้องใช้นามแฝง rgba() อีกต่อไป ฟังก์ชัน rgb() รองรับช่องอัลฟาเสริมแล้ว:

rgb(255 0 0 / 0.5)  /* ไวยากรณ์สมัยใหม่ สีแดงที่ความทึบ 50% */

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

ฉันจะแปลง RGB เป็น HSL ได้อย่างไร?

การแปลง RGB เป็น HSL ประกอบด้วยสามขั้นตอน:

1. ปรับค่าให้เป็นมาตรฐาน โดยให้ค่า RGB อยู่ในช่วง 0-1 (หารด้วย 255)
2. หาค่าต่ำสุดและสูงสุด ของค่าที่ปรับมาตรฐานแล้วสามค่า — ค่าเฉลี่ยของค่าต่ำสุดและสูงสุดคือความสว่าง (L)
3. คำนวณเฉดสีและความอิ่มตัว ตามช่องสีใดเป็นค่าสูงสุดและผลต่างระหว่างค่าสูงสุดและต่ำสุด

สูตรจะแตกต่างกันไปตามช่องสีที่เด่น:

• ถ้าสีแดงเป็นค่าสูงสุด: เฉดสี = (เขียว - น้ำเงิน) / (สูงสุด - ต่ำสุด)
• ถ้าสีเขียวเป็นค่าสูงสุด: เฉดสี = 2 + (น้ำเงิน - แดง) / (สูงสุด - ต่ำสุด)
• ถ้าสีน้ำเงินเป็นค่าสูงสุด: เฉดสี = 4 + (แดง - เขียว) / (สูงสุด - ต่ำสุด)
• ความอิ่มตัวขึ้นอยู่กับความสว่าง: ถ้า L > 0.5, ความอิ่มตัว = (สูงสุด - ต่ำสุด) / (2 - สูงสุด - ต่ำสุด) มิฉะนั้นความอิ่มตัว = (สูงสุด - ต่ำสุด) / (สูงสุด + ต่ำสุด)

การคำนวณนี้ไม่ใช่เรื่องง่ายและทำผิดได้ง่าย ดังนั้นการใช้ เครื่องมือแปลงสี จึงแนะนำสำหรับผลลัพธ์ทันที

ทำไมสีของฉันถึงดูแตกต่างกันบนหน้าจอต่าง ๆ?

ลักษณะสีแตกต่างกันระหว่างหน้าจอด้วยหลายสาเหตุ:

การปรับเทียบหน้าจอ — หน้าจอผู้บริโภคส่วนใหญ่ไม่ได้ปรับเทียบสี การตั้งค่าจากโรงงานแตกต่างกันอย่างมากในด้านความสว่าง คอนทราสต์ และอุณหภูมิสี

ความแตกต่างของขอบเขตสี — หน้าจอต่างกันรองรับช่วงสีที่ต่างกัน sRGB เป็นมาตรฐานเว็บ แต่โทรศัพท์และแล็ปท็อปสมัยใหม่จำนวนมากรองรับ DCI-P3 (กว้างกว่า 25%) สีที่อยู่นอกขอบเขต sRGB จะดูถูกต้องบนจอแสดงผลขอบเขตกว้างแต่จะถูกตัดหรือเปลี่ยนบนจอแสดงผลมาตรฐาน

เทคโนโลยีการแสดงผล — หน้าจอ OLED ให้สีดำที่ลึกกว่าและสีที่อิ่มตัวกว่าหน้าจอ LCD แผง IPS มีความแม่นยำของสีดีกว่าแผง TN

มุมมอง — สีเปลี่ยนไปเมื่อมองจากมุม โดยเฉพาะบนจอแสดงผลระดับล่าง

ความสว่างและแสงโดยรอบ — หน้าจอที่ความสว่าง 50% ในห้องมืดดูแตกต่างจากหน้าจอเดียวกันที่ความสว่าง 100% ในแสงแดดโดยตรง

เพื่อลดความแตกต่าง: ทำงานในพื้นที่สี sRGB ปรับเทียบจอภาพด้วยเครื่องมือปรับเทียบฮาร์ดแวร์ และทดสอบการออกแบบของคุณบนอุปกรณ์หลายเครื่องก่อนเผยแพร่

โมเดลสี HSL ใช้ทำอะไรได้ดี?

HSL (Hue, Saturation, Lightness — เฉดสี, ความอิ่มตัว, ความสว่าง) เหมาะสำหรับ การจัดการสีด้วยโปรแกรม ข้อได้เปรียบสำคัญคือช่องหนึ่งเก็บข้อมูล "สี" (เฉดสี) ในขณะที่อีกสองช่องควบคุมลักษณะที่ปรากฏโดยไม่ขึ้นกับค่าเฉดสี

สิ่งที่ HSL ทำได้ง่าย:

• พาเลทสี — คงเฉดสีเดิม เปลี่ยนความสว่างและความอิ่มตัวเพื่อสร้างสเกลสีที่สมบูรณ์
• สถานะ hover และ active — เปลี่ยนความสว่างเป็นเปอร์เซ็นต์คงที่: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
• โหมดมืด — ลดความสว่างของทุกสี: ลบ 30% จากความสว่างของแต่ละสี
• ธีม — สลับค่าเฉดสีเพื่อสร้างรูปแบบสีใหม่ทั้งหมดจากโครงสร้างความอิ่มตัว/ความสว่างเดิม
• สถานะปิดใช้งาน — ลดความอิ่มตัวเพื่อทำให้องค์ประกอบดูจางลง: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

สิ่งที่ HSL ไม่เหมาะสำหรับ:

HSL ไม่สม่ำเสมอทางการรับรู้ สองสีที่มีค่าความสว่างเท่ากัน (เช่น hsl(60, 100%, 50%) — เหลืองสว่าง และ hsl(240, 100%, 50%) — น้ำเงินบริสุทธิ์) มีความสว่างที่รับรู้แตกต่างกันมาก สำหรับการจัดการสีที่สม่ำเสมอทางการรับรู้ ใช้ OKLCH แทน

เครื่องหมาย # ในสี hex หมายถึงอะไร?

คำนำหน้า # (แฮชหรือเครื่องหมายปอนด์) บอกให้ตัวแยกวิเคราะห์ CSS ทราบว่าอักขระต่อไปนี้แทนค่าเลขฐานสิบหกของสี เป็นสัญกรณ์มาตรฐานใน CSS และ HTML สำหรับรหัสสี hex

รูปแบบเต็มคือ #RRGGBB หรือ #RRGGBBAA:

| ส่วนประกอบ | ความหมาย | ตัวอย่าง (#FF5733) | |-----------|---------|---------------------| | # | คำนำหน้า hex | ตัวบ่งชี้ที่จำเป็น | | RR | ช่องสีแดง | FF (255) | | GG | ช่องสีเขียว | 57 (87) | | BB | ช่องสีน้ำเงิน | 33 (51) |

ใน HTML # ยังใช้สำหรับลิงก์จุดยึด (<a href="#section">) แต่ในบริบท CSS หรือแอตทริบิวต์ style จะหมายถึงสี hex เสมอ HTML ยังรองรับ "ชื่อสี" แบบดั้งเดิม (ชื่อที่กำหนดไว้ล่วงหน้า 140 ชื่อ เช่น red, blue, rebeccapurple) ที่ไม่ต้องใช้ #

ขอบเขตสีคืออะไรและทำไมจึงสำคัญ?

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

ขอบเขตสีทั่วไป จากเล็กสุดไปใหญ่สุด:

| พื้นที่สี | ขนาดสัมพัทธ์ | ที่ใช้งาน | |-------------|--------------|------------| | sRGB | พื้นฐาน | มาตรฐานเว็บ, จอภาพส่วนใหญ่, ทุกเบราว์เซอร์ | | Adobe RGB | กว้างกว่า ~50% | การถ่ายภาพมืออาชีพ, งานพิมพ์ | | DCI-P3 | กว้างกว่า ~25% | โทรศัพท์สมัยใหม่, Mac, แล็ปท็อปจำนวนมาก | | Rec. 2020 | กว้างกว่า ~75% | โทรทัศน์ HDR, จอแสดงผลระดับสูง |

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

สำหรับการออกแบบเว็บ: ออกแบบใน sRGB เสมอหรือตรวจสอบว่าสีของคุณปลอดภัยสำหรับ sRGB OKLCH และพื้นที่สี display-p3 ช่วยให้คุณกำหนดเป้าหมายขอบเขตที่กว้างขึ้น แต่คุณควรจัดเตรียมทางเลือก sRGB สำหรับหน้าจอมาตรฐาน

ความแตกต่างระหว่าง hex และ hex แบบมีอัลฟาคืออะไร?

hex มาตรฐาน (#FF5733) ใช้หกหลักและไม่มีช่องอัลฟา — สีจะทึบเต็มที่เสมอ hex แบบมีอัลฟา (#FF573380) ใช้แปดหลัก เพิ่มเลข hex สองหลักที่ท้ายสำหรับช่องอัลฟา (ความทึบ)

ค่าอัลฟาใน hex:

| คู่ Hex | เลขฐานสิบ | ความทึบ | |----------|---------|---------| | 00 | 0 | โปร่งใสทั้งหมด | | 80 | 128 | ความทึบ ~50% | | FF | 255 | ทึบทั้งหมด |

ตัวอย่าง:

#FF5733     — สีส้มแดงทึบ ไม่มีความโปร่งใส
#FF5733FF   — สีเดียวกัน ทึบทั้งหมด (FF ซ้ำซ้อน)
#FF573380   — สีเดียวกัน โปร่งใส 50%
#FF573300   — สีเดียวกัน มองไม่เห็นทั้งหมด

นอกจากนี้ยังมี hex แบบย่อสี่หลักพร้อมอัลฟา: #F538 ขยายเป็น #FF553388 (ความทึบ 50%)

การรองรับเบราว์เซอร์: hex แปดหลักรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด สำหรับการรองรับเบราว์เซอร์รุ่นเก่า (Internet Explorer) ใช้ rgba() แทน

ฉันจะเลือกสีที่เข้าถึงได้สำหรับเว็บไซต์ของฉันอย่างไร?

ทำตามขั้นตอนต่อไปนี้เพื่อสร้างระบบสีที่เข้าถึงได้:

1. เริ่มต้นด้วยสีหลักของแบรนด์ เลือกเฉดสีที่แสดงถึงแบรนด์ของคุณ จากนั้นใช้ HSL หรือ OKLCH เพื่อสร้างสเกลเต็มจากสว่างมาก (พื้นหลัง) ไปจนถึงมืดมาก (ข้อความ)

2. ตั้งค่าข้อความเป็นเกือบดำ ข้อความตัวอักษรบนพื้นขาวควรเป็น #1A1A1A ถึง #333333 อย่าใช้ดำบริสุทธิ์ (#000000) บนขาวบริสุทธิ์ — ทำให้ปวดตาสำหรับผู้อ่านบางคน เทาเข้มบนขาวให้ความสามารถในการอ่านที่ดีกว่า

3. ตรวจสอบทุกคู่สีพื้นหน้า-พื้นหลัง ทุกการรวมกันของข้อความและพื้นหลังต้องเป็นไปตามมาตรฐาน WCAG:

• ข้อความปกติ: 4.5:1 ขั้นต่ำ (WCAG AA)
• ข้อความใหญ่: 3:1 ขั้นต่ำ (WCAG AA)
• ตั้งเป้า 7:1 สำหรับข้อความเนื้อหา (WCAG AAA)

4. อย่าใช้สีเป็นตัวบ่งชี้เพียงอย่างเดียว ลิงก์ต้องมีขีดเส้นใต้ (ไม่ใช่แค่สีที่ต่างกัน) สถานะข้อผิดพลาดต้องมีไอคอนหรือข้อความ แผนภูมิต้องใช้ลวดลายหรือป้ายกำกับ

5. ทดสอบด้วยโปรแกรมจำลองตาบอดสี Deuteranopia (แดง-เขียว) เป็นประเภทที่พบบ่อยที่สุด ตรวจสอบให้แน่ใจว่าการออกแบบของคุณทำงานได้โดยไม่ต้องพึ่งการรับรู้สี

6. ตรวจสอบในโทนสีเทา หากการออกแบบของคุณสูญเสียความหมายเมื่อแปลงเป็นโทนสีเทา แสดงว่าคุณพึ่งพาสีในการสื่อข้อมูลมากเกินไป

ใช้ ตัวแปลงสี ของเราเพื่อตรวจสอบอัตราส่วนคอนทราสต์ระหว่างสองสีใด ๆ ทันที