Stax
Tools

ตัวเลือกสี

เลือกสีใดก็ได้และรับค่า HEX, RGB และ HSL ทันที

R
79
G
70
B
229
HEX#4F46E5
RGBrgb(79, 70, 229)
HSLhsl(243, 75%, 59%)

รูปแบบสีที่อธิบาย

HEX vs RGB vs HSL

เคล็ดลับสำหรับนักออกแบบและนักพัฒนา

ทุกสีบนหน้าจอสามารถอธิบายได้ในหลายรูปแบบ — HEX, RGB, HSL และอื่นๆ เครื่องมือและ workflow ต่างกันชอบรูปแบบต่างกัน Figma ใช้ HEX และ RGB CSS รองรับทั้งสาม Tailwind ใช้ HEX ใน config เครื่องมือนี้ช่วยให้คุณเลือกสีใดก็ได้และคัดลอกในรูปแบบที่ต้องการได้ทันที

เพื่อสร้าง hover state ที่มืดกว่าเล็กน้อย ให้นำสี HSL พื้นฐานและลดค่า L ลง 10 เพื่อสร้าง overlay แบบโปร่งแสงให้ใช้ค่า RGB ใน rgba(r, g, b, 0.15) เพื่อสร้าง palette ที่สม่ำเสมอ ให้คง H ไว้และเปลี่ยน S และ L

นักออกแบบใช้เพื่อจับคู่ brand color จาก style guide กับ HEX code ที่แม่นยำสำหรับการ implement ใน CSS Frontend developer ใช้เพื่อแปลงค่า HEX จาก Figma เป็น HSL อย่างรวดเร็วเมื่อเขียน CSS variable สำหรับ theming Content creator ใช้เพื่อเลือกสีที่สอดคล้องกับ brand สำหรับ social media graphic บน Canva ทีม UI/UX ใช้โมเดล HSL เพื่อสร้าง tint (L สูงขึ้น) และ shade (L ต่ำลง) อย่างเป็นระบบจาก brand hue เดียวเพื่อรับ design system ที่สมบูรณ์

แม้ HEX, RGB และ HSL ครอบคลุม workflow เว็บและการออกแบบส่วนใหญ่ แต่ยังมี color space อื่นสำหรับวัตถุประสงค์เฉพาะ CMYK ใช้ในการออกแบบสื่อสิ่งพิมพ์ — เครื่องพิมพ์ใช้หมึก cyan, magenta, yellow และ black แทนแสง HSV (Hue, Saturation, Value) คล้ายกับ HSL แต่ใช้ในเครื่องมือแก้ไขรูปภาพหลายตัวเช่น color picker ของ Photoshop OKLCH เป็น CSS color space ที่กำลังเติบโตซึ่งให้ color stepping ที่สม่ำเสมอในเชิง perceptual มากกว่า ทำให้ยอดเยี่ยมสำหรับการสร้าง color scale แบบ programmatic สำหรับงานเว็บส่วนใหญ่ HEX และ HSL ครอบคลุมทุกสิ่งที่คุณต้องการ

การเลือกสีเป็นเพียงครึ่งหนึ่งของงาน — การตรวจสอบกับข้อกำหนด contrast ของ WCAG คืออีกครึ่งหนึ่ง WCAG AA กำหนด contrast ratio อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่หรือ UI component หลังจากเลือกสีแล้ว ทดสอบการผสมสีหน้า/พื้นหลังโดยใช้ contrast checker ข้อความมืดบนพื้นหลังสว่างและข้อความสว่างบนพื้นมืดมักผ่าน สีโทนกลางบนพื้นขาวหรือเทามักล้มเหลว

  • HEX — กระชับ รองรับอย่างกว้างขวาง อ่านได้ยากที่สุดด้วยตา
  • RGB — เข้าใจง่ายสำหรับโปรแกรมเมอร์ ยอดเยี่ยมเมื่อต้องการ alpha (rgba)
  • HSL — อ่านได้ง่ายที่สุดสำหรับมนุษย์ ง่ายในการสร้างรูปแบบที่อ่อนกว่า/เข้มกว่าโดยการเปลี่ยน L

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

What is a HEX color code?
A HEX color code is a 6-character string representing a color in RGB format using hexadecimal notation. The format is #RRGGBB where RR, GG, BB are two-hex-digit values from 00 to FF for red, green, and blue. For example, #ff0000 is pure red, #ffffff is white, #000000 is black.
What is RGB?
RGB (Red, Green, Blue) represents colors as three numbers from 0 to 255. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, rgb(0, 0, 255) is blue. It's the native color model for screens.
What is HSL?
HSL (Hue, Saturation, Lightness) is a more human-intuitive color model. Hue is the color angle (0–360°), Saturation is the intensity (0–100%), and Lightness controls how light or dark the color is (0% = black, 100% = white, 50% = full color). HSL is widely used in CSS.
Which format should I use in CSS?
All three work in CSS. HEX is the most common for static colors. HSL is best when you need to programmatically adjust lightness or saturation (e.g. hover states). RGB is useful when you need alpha transparency — use rgba(r, g, b, 0.5) for semi-transparent colors.

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