ใส่ความโปร่งใสได้ไหม?

ได้ ผ่าน alpha channel RGBA เพิ่มค่าที่ 4 ระหว่าง 0-1 (rgba(255,87,51,0.5) คือโปร่งใส 50%) HEX ก็รองรับด้วย 8 หลัก เช่น #FF573380 คือสีเดียวกันที่ opacity 50%

ค่า contrast เท่าไหร่ถึงอ่านง่าย?

WCAG AA กำหนด 4.5:1 สำหรับตัวหนังสือปกติ และ 3:1 สำหรับตัวใหญ่ (18pt+) ระดับ AAA ขยับเป็น 7:1 และ 4.5:1 สีเทาอ่อนบนพื้นขาวมักไม่ผ่าน เช่น #999 บนขาวได้แค่ 2.85:1 ตรวจด้วย contrast checker ก่อนปล่อยจริง

ทำไม HEX เดียวกันสีต่างกันระหว่างมือถือกับโน้ตบุ๊ก?

สีที่เห็นขึ้นกับ gamut จอ การ calibrate และแสงรอบตัว มือถือส่วนใหญ่ใช้ OLED wide-gamut (DCI-P3) โน้ตบุ๊กมัก sRGB ค่า hex เท่ากันแต่สีที่ขึ้นต่าง ถ้างานแบรนด์สำคัญ calibrate จอและทำงานบน sRGB

HEX แสดงสีต่างกันได้กี่สี?

HEX 6 หลักมาตรฐานให้ 16,777,216 สี (256³) สายตาคนแยกได้ราว 10 ล้านสี HEX จึงเหลือเฟือสำหรับงานดีไซน์ สี 24-bit เป็นมาตรฐานทุกที่ ยกเว้นงาน HDR/วิดีโอมืออาชีพที่ใช้ 30-bit

เครื่องมือรหัสสี

ค้นหาและแปลงรหัสสี HEX, RGB, HSL สำหรับงานดีไซน์

ดีไซน์

Share this tool

f 𝕏 L

คลิกที่พื้นที่สีเพื่อเลือกสีใหม่#6366f1

ค่าสีและสเกล

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

CMYK

cmyk(59%, 58%, 0%, 5%)

Pantone

18-3946 (baja-blue)

Pro Tip

ลองปรับค่า HSL ความสว่าง (L) เพื่อสร้างโทนสีที่นุ่มนวลขึ้น หรือปรับ RGB ทีละนิดเพื่อหาสีที่เข้ากับแบรนด์ของคุณที่สุด

จิตวิทยาของสีในการออกแบบ

สีมีผลต่อความรู้สึกของผู้ใช้งานโดยตรง เช่น สีน้ำเงินให้ความรู้สึกน่าเชื่อถือ (Trust) สีแดงกระตุ้นความตื่นเต้น (Excitement) และสีเขียวให้ความรู้สึกปลอดภัยหรือเป็นธรรมชาติ

รหัสสีที่ควรรู้

HEX

มาตรฐานหลักในงานเว็บดีไซน์ ประกอบด้วยรหัสฐาน 16 จำนวน 6 ตัว

RGB

ค่าความเข้มของแสง แดง, เขียว, น้ำเงิน (0-255) สำหรับงานหน้าจอ

HSL

การตั้งค่าตามมุมสี ความอิ่มตัว และความสว่าง ทำให้เลือกสีที่ดูดีได้ง่ายขึ้น

CMYK

ระบบสี Cyan, Magenta, Yellow, Black สำหรับงานสิ่งพิมพ์มืออาชีพ

Pantone

ระบบจับคู่สีมาตรฐาน (PMS) ที่ใช้ในงานออกแบบแบรนด์และวัสดุจริง

การเลือกโทนสี

• สีโทนร้อน: ดึงดูดความสนใจและกระตุ้นการตัดสินใจ • สีโทนเย็น: ให้ความรู้สึกสงบและเป็นมืออาชีพ • สีกลาง (Neutral): ช่วยให้เนื้อหาอ่านง่ายและสบายตา

Pro Tip

เครื่องมืออื่นๆ ที่น่าสนใจ

🌈

สร้าง Gradient

สร้าง CSS gradient แบบ linear หรือ radial เลือก 2-5 สี พร้อมคัดลอกโค้ด

📦

สร้าง Box Shadow

ออกแบบ CSS box-shadow พร้อม preview แบบสด รองรับหลาย layer

🔵

สร้าง Border Radius

ออกแบบมุมโค้งแต่ละด้านของกล่อง พร้อมแสดงผลและโค้ด

🎨

สร้าง Color Palette

สร้างชุดสีที่เข้ากันจากสีหลัก 1 สี

🎯

Tailwind Colors

ดู Tailwind color palette ทั้งหมด คลิกเพื่อคัดลอก

🖼️

Social Media Safe Zone

ตรวจสอบ safe zone สำหรับ TikTok, Reels และ Shorts เพื่อให้คอนเทนต์ไม่โดนบัง

ดู tools ทั้งหมดในหมวด ดีไซน์ →

วิธีใช้งาน

1
คลิกบนวงล้อสีหรือพิมพ์ค่าในช่อง HEX, RGB หรือ HSL
2
ตัว picker จะอัปเดตทุกรูปแบบพร้อมกันทันทีที่ปรับ
3
กดไอคอน copy ข้างรูปแบบที่ต้องการเพื่อคัดลอกค่านั้น
4
ใช้ alpha slider ถ้าต้องการสีที่มีความโปร่งใส

ตัวอย่างการใช้งาน

ดึงสีแบรนด์

แปลงสี HEX ของแบรนด์เป็น RGB หรือ HSL สำหรับใช้ในเครื่องมือดีไซน์ต่างๆ

เขียน CSS

ได้ค่าสี CSS ที่แม่นยำสำหรับวางลงใน stylesheet โดยตรง

ตรวจ accessibility

เลือกสีตัวอักษรและพื้นหลังแล้วตรวจ contrast ก่อนเขียนโค้ด

Prototype UI

ทดลองสีต่างๆ สำหรับปุ่ม การ์ด หรือ background ในช่วง design exploration

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

เลือกสีและแปลงระหว่าง HEX, RGB, HSL ได้ทันที เหมาะสำหรับดีไซเนอร์ที่จับคู่สี Brand, นักพัฒนาที่เขียน CSS และทุกคนที่ต้องการค่าสีแม่นยำ

HEX (#FF5733) สั้นกะทัดรัด เหมาะ CSS และโปรแกรมกราฟิก RGB(A) ใช้เมื่อต้องการ alpha โปร่งใส HSL (hue, saturation, lightness) เหมาะปรับสี เพราะแค่ขยับเลขเดียวก็ทำให้สีเข้มขึ้นหรือจางลง

เครื่องมืออื่นๆ ที่น่าสนใจ

🌈