Softonic

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

ขั้นตอน 1 / 4 สี Hex

เลือกสี

พรีเซ็ตที่ใช้บ่อย
ถัดไป: ดูตัวอย่าง

เลือกสีด้วยตัวเลือกสีมาตรฐานของเบราว์เซอร์ หรือป้อนค่า 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 หรือส่งไปยังเซิร์ฟเวอร์ของเรา การเริ่มใหม่ ปิดแท็บ ล้างข้อมูลเบราว์เซอร์ หรือหมดเวลาจะลบสีออก

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

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

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

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

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวตรวจสอบความถูกต้องของ JSON

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

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

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

เครื่องมือนี้มีให้บริการในภาษาอื่น