ตัวเลือกสี

ตัวเลือกสีเป็นเครื่องมือฟรีที่ให้คุณเลือกสีผ่านเบราว์เซอร์ และรับค่าสีในรูปแบบที่ต้องการ

ตัวเลือกสีให้ผลลัพธ์เป็นอะไร?

ตัวเลือกสีจะแสดงค่าตัวเลขของสีที่เลือกจากวงล้อสี สีที่มองเห็นเหมือนกันสามารถเขียนได้หลายรูปแบบ โดยรูปแบบที่ใช้กันมากที่สุดคือเลขฐานสิบหก, RGB, RGBA, HSL และ HSLA

แต่ละรูปแบบใช้อธิบายสีต่างกัน เลขฐานสิบหกและ RGB ระบุค่าช่องสีแดง เขียว และน้ำเงิน ส่วน HSL ใช้เฉดสี ความอิ่มตัว และความสว่าง จึงช่วยให้ปรับสีอย่างเป็นระบบได้ง่ายขึ้น รูปแบบที่มีช่องอัลฟายังระบุค่าความทึบได้ด้วย

• ค่าเลขฐานสิบหกใช้เครื่องหมายแฮชตามด้วยตัวเลขฐานสิบหก เช่น #336699
• ค่าRGBมักระบุแต่ละช่องด้วยตัวเลขตั้งแต่ 0 ถึง 255 เช่น rgb(51, 102, 153)
• ค่าHSLระบุมุมของเฉดสี พร้อมค่าร้อยละสำหรับความอิ่มตัวและความสว่าง เช่น hsl(210, 50%, 40%)
• RGBA และ HSLAรองรับความโปร่งใสเพิ่มเติม ค่าอัลฟา 0 หมายถึงโปร่งใสทั้งหมด ส่วน 1 หมายถึงทึบทั้งหมด

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

ใช้ตัวเลือกสีอย่างไร?

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

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

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

วิธีอ่านผลลัพธ์

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

ไวยากรณ์ของสีใน CSS หรือข้อมูลแบบมีโครงสร้างต้องเขียนอย่างเคร่งครัด ข้อผิดพลาดที่พบบ่อยเมื่อแก้ไขด้วยตนเอง ได้แก่

• ละเครื่องหมายแฮชที่ต้องอยู่หน้าค่า CSS แบบเลขฐานสิบหก
• ใช้เลขฐานสิบห้าหรือเจ็ดหลัก ซึ่งไม่ใช่จำนวนหลักมาตรฐานที่ถูกต้อง
• ใส่ค่าร้อยละในตำแหน่งที่ระบบ RGB ต้องการตัวเลขของช่องสี
• ลืมใส่จุลภาคในไวยากรณ์ RGB แบบเดิม หรือผสมไวยากรณ์เก่ากับแบบใหม่ที่ใช้ร่วมกันไม่ได้
• คัดลอกค่าที่มีอัลฟาไปใส่ในซอฟต์แวร์ที่รองรับเฉพาะเลขฐานสิบหกหกหลัก
• ใช้จุลภาคเป็นเครื่องหมายทศนิยม เช่น 0,5 ทั้งที่ CSS กำหนดให้ใช้จุดทศนิยม เช่น 0.5

ตัวเลือกสีมีหน้าที่สร้างค่าสี ไม่ใช่เครื่องมือตรวจสอบความถูกต้องของ CSS โดยทั่วไป เครื่องมือนี้ไม่ได้ยืนยันว่าคำประกาศที่ครอบค่าสี เอกสาร JSON หรือไฟล์ธีมนั้นถูกต้อง ดังนั้นข้อผิดพลาดทางไวยากรณ์ที่อยู่นอกค่าสียังต้องตรวจด้วยพาร์เซอร์หรือเครื่องมือพัฒนาที่เกี่ยวข้อง

ตัวอย่างการแปลงสี

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

ค่าเลขฐานสิบหก #336699

ค่า RGB ที่เทียบเท่า rgb(51, 102, 153)

ค่า HSL ที่เทียบเท่า hsl(210, 50%, 40%)

เลขฐานสิบหกสามหลักเป็นรูปแบบย่อ โดยนำแต่ละหลักมาเขียนซ้ำเพื่อให้ได้ค่าแบบหกหลัก

ค่าเลขฐานสิบหกแบบย่อ #fff

ค่าเลขฐานสิบหกแบบเต็ม #ffffff

ค่า RGB ที่เทียบเท่า rgb(255, 255, 255)

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

ควรเลือกรูปแบบสีแบบไหน?

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

• ใช้เลขฐานสิบหกหกหลักสำหรับสีเว็บแบบทึบ เมื่อต้องการค่าที่กระชับและอ่านเข้าใจได้ทั่วไป
• ใช้เลขฐานสิบหกแปดหลักเฉพาะเมื่อสภาพแวดล้อมปลายทางระบุชัดว่ารองรับค่าอัลฟาในรูปแบบนี้
• ใช้ RGB หรือ RGBA เมื่อต้องทำงานกับช่องสีแดง เขียว และน้ำเงินแยกกัน
• ใช้ HSL หรือ HSLA เมื่อต้องสร้างรูปแบบธีมด้วยโปรแกรม โดยอิงจากเฉดสี ความอิ่มตัว หรือความสว่าง
• ใช้ตัวแปลงสีเมื่อมีค่าสีอยู่แล้วและต้องการแปลงรูปแบบ แทนการเลือกสีใหม่ด้วยตา

อย่าใช้ค่า RGB บนหน้าจอเป็นข้อกำหนดสำหรับงานพิมพ์ งานพิมพ์เชิงพาณิชย์อาจต้องใช้ค่า CMYK, โปรไฟล์สี ICC, การทำปรู๊ฟ และการตกลงกับโรงพิมพ์ การแปลงด้วยการคำนวณเพียงอย่างเดียวไม่อาจรับประกันได้ว่าสีที่พิมพ์จะตรงกับหน้าจอที่มีแสงส่องจากด้านหลัง

เมื่อใดที่ไม่จำเป็นต้องเลือกหรือแปลงสี?

ไม่จำเป็นต้องเลือกหรือแปลงสี หากค่าที่มีอยู่เป็นรูปแบบที่ปลายทางต้องการอยู่แล้ว การแปลงซ้ำไปมาอาจทำให้เกิดความต่างจากการปัดเศษ การใช้ตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ไม่สอดคล้องกัน หรือทำให้ไฟล์ต้นฉบับเปลี่ยนโดยไม่จำเป็น

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

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

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

นำค่าสีไปใช้กับตัวแปร CSS ได้ไหม?

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

ทำไมสีเดียวกันจึงดูต่างกันเมื่อเปิดบนอีกหน้าจอ?

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

ตัวอักษรพิมพ์ใหญ่กับพิมพ์เล็กในค่าเลขฐานสิบหกทำให้สีเปลี่ยนไหม?

ไม่เปลี่ยน ตัวเลขฐานสิบหก A ถึง F ไม่แยกตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก ดังนั้น #AABBCC และ #aabbcc จึงแทนสีเดียวกัน ควรใช้รูปแบบตัวพิมพ์ตามหลักที่ repository กำหนดไว้ เพื่อเลี่ยงการเปลี่ยนแปลงที่มีผลเฉพาะกับการจัดรูปแบบ

ค่าสีมีอักขระมีเครื่องหมายกำกับหรืออักขระที่ไม่ใช่ละตินได้ไหม?

รูปแบบมาตรฐานของเลขฐานสิบหก, RGB และ HSL ใช้ตัวเลข ตัวอักษร และเครื่องหมายวรรคตอนแบบ ASCII อักขระที่มีเครื่องหมายกำกับหรืออักขระที่ไม่ใช่ละตินไม่ได้เป็นส่วนหนึ่งของไวยากรณ์ค่าสีแบบตัวเลขเหล่านี้ แต่อาจปรากฏในชื่อตัวแปรหรือข้อมูลเมตาที่อยู่โดยรอบได้ หากภาษาและการเข้ารหัสไฟล์ที่เกี่ยวข้องรองรับ

สีโปร่งใสเหมือนกับไม่มีสีหรือไม่?

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

ควรปัดเศษค่าทศนิยมของช่องสีไหม?

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