Softonic

เครื่องมือเลือกสี HEX

ขั้นตอน 1 / 4 HEX colour picker

พรีเซ็ตที่ใช้บ่อย

เลือกสีด้วยตัวเลือกสีมาตรฐานของเบราว์เซอร์ หรือป้อนค่า HEX แบบ 3 หรือ 6 หลัก เครื่องมือจะแปลงเป็น RGB, HSL และ CMYK โดยประมาณ แล้วคำนวณค่าความสว่างสัมพัทธ์กับอัตราส่วนคอนทราสต์ต่อสีขาวและสีดำอย่างแม่นยำ สีจะถูกประมวลผลในเบราว์เซอร์นี้และไม่ถูกเพิ่มลงใน URL ของแต่ละขั้นตอน

วิธีเลือกสี

  1. 1

    เริ่มจากสีตัวอย่างหรือตัวเลือกสี

    เลือกสีตัวอย่างหรือเปิดตัวเลือกสีมาตรฐานของเบราว์เซอร์

  2. 2

    ป้อนค่า HEX ที่แน่นอน

    พิมพ์ 3 หลัก เช่น #F60 หรือ 6 หลัก เช่น #FF6600 โดยรูปแบบย่อจะถูกขยายอย่างถูกต้อง

  3. 3

    ตรวจรูปแบบที่คำนวณแล้ว

    ดู HEX, RGB, HSL, CMYK โดยประมาณ และค่าความสว่างสัมพัทธ์ sRGB ในที่เดียว

  4. 4

    ตรวจคอนทราสต์แล้วคัดลอก

    เปรียบเทียบสีกับสีขาวและสีดำ แล้วคัดลอกค่า HEX, RGB หรือ HSL ที่ต้องการ

รูปแบบสีที่ใช้จริงในงานออกแบบ

โมเดลสีแต่ละแบบตอบโจทย์คนละด้านเล็กน้อย

ตารางอ้างอิงรูปแบบสี

รูปแบบ องค์ประกอบ ใช้กับงานประเภทใด
HEX #RRGGBB CSS, เครื่องมือออกแบบ, คู่มือแบรนด์
RGB แดง 0–255, เขียว 0–255, น้ำเงิน 0–255 CSS rgb(), โปรแกรมแก้ไขภาพ
HSL เฉดสี 0–360°, ความอิ่มตัว %, ความสว่าง % CSS hsl(), ระบบออกแบบ
CMYK ไซแอน %, มาเจนตา %, เหลือง %, key/ดำ % งานพิมพ์, ขั้นตอนก่อนพิมพ์

คอนทราสต์เพื่อการเข้าถึง

WCAG 2.2 กำหนดอัตราส่วนคอนทราสต์ขั้นต่ำระหว่างข้อความกับพื้นหลังดังนี้:

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

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

เคล็ดลับ

  • HEX เป็นรูปแบบเริ่มต้นในเครื่องมือออกแบบส่วนใหญ่ แต่ HEX แบบย่อสามหลัก (#F60) เท่ากับ #FF6600 ไม่ใช่ #F06060
  • HSL เหมาะกับการสร้างพาเลต เพราะล็อกเฉดสีไว้แล้วปรับความสว่างเพื่อสร้างสีอ่อนและสีเข้มได้ง่าย
  • CMYK และ RGB แปลงหากันได้ไม่สมบูรณ์ ผลลัพธ์ CMYK ในงานพิมพ์ขึ้นอยู่กับโปรไฟล์แท่นพิมพ์ ควรตรวจปรู๊ฟบนกระดาษจริงเสมอ
  • หากออกแบบสำหรับ CSS สมัยใหม่ ลองพิจารณา OKLCH เพื่อให้ขั้นความสว่างดูสม่ำเสมอตามการรับรู้ของสายตา

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

Photoshop ใช้โปรไฟล์สี โดยทั่วไปหน้าจอจะใช้ sRGB ส่วนงานพิมพ์อาจใช้โปรไฟล์อื่น เบราว์เซอร์จะแสดงค่า HEX ที่ไม่มีโปรไฟล์เป็น sRGB หากเอกสารถูกตั้งเป็น Adobe RGB หรือ ProPhoto ค่าพิกเซลจะเหมือนเดิม แต่สีที่มองเห็นอาจเปลี่ยนไป

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

เลือกสีหลักแล้วคัดลอกค่า HSL จากนั้นใช้ CSS หรือโปรแกรมออกแบบเพื่อล็อกเฉดสีกับความอิ่มตัวและปรับความสว่าง ควรตรวจทุกคู่สีตัวอักษรและพื้นหลังแยกกัน

สีปัจจุบันจะถูกเก็บในแท็บเบราว์เซอร์นี้ไม่เกิน 30 นาทีเพื่อใช้ระหว่างขั้นตอน สีจะไม่ถูกเพิ่มใน URL หรือส่งผ่าน Livewire การเริ่มใหม่ ปิดแท็บ ล้างข้อมูลเบราว์เซอร์ หรือหมดเวลาจะลบสีออก

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตัวลดรูปพีชคณิตบูลีน

ลดรูปนิพจน์บูลีนด้วยแผนผัง Karnaugh และอัลกอริทึม Quine-McCluskey แสดงทุกขั้นตอนการลดรูปและผลลัพธ์สุดท้ายในรูป SOP/POS

เลขฐานสองเป็นฐานสิบ

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

ตัวแปลง BBCode เป็น HTML

แปลง BBCode (มาร์กอัปของเว็บบอร์ด) เป็น HTML ที่สะอาด รองรับแท็กจัดรูปแบบ รายการ quote, code, รูปภาพ ลิงก์ และตาราง

เครื่องกำเนิดจานสี

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

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน