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

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

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

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

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

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

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

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

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

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

ตัวแปลงไบนารีเป็น ASCII

วางข้อมูลไบนารี (ไบต์ที่คั่นด้วยช่องว่าง หรือบิตสตรีมยาวๆ) แล้วรับข้อความ ASCII ที่แทนค่านั้น รองรับการเข้ารหัสแบบ 7 บิตและ 8 บิต

เครื่องมือสร้างสีแบบสุ่ม

สร้างสี HEX แบบสุ่ม 1 ถึง 50 สี พร้อมตัวอย่างสีสำหรับดูตัวอย่าง คัดลอก และนำไปใช้ใน CSS งานทดสอบ หรือการสำรวจพาเลตสี.