What is the difference between HEX, RGB, and HSL color formats?

HEX (#RRGGBB) encodes red, green, and blue channels as two hexadecimal digits each (0–FF). RGB (rgb(255, 0, 0)) expresses the same channels as decimal values 0–255. HSL (hsl(0, 100%, 50%)) represents color as Hue (0–360°, the color wheel position), Saturation (0–100%, color intensity), and Lightness (0–100%, black to white). HEX and RGB are equivalent and used most in code; HSL is more intuitive for manually adjusting colors because you can change lightness independently of hue.

What is the difference between HSL and HSV (HSB)?

HSL and HSV (also called HSB — Hue, Saturation, Brightness) both use a hue angle and saturation percentage but differ in the third channel. In HSL, 50% Lightness is a pure color, 0% is black, and 100% is white. In HSV, 100% Value/Brightness is a pure color, and 0% is black — there is no way to get white without reducing saturation. Photoshop and most design tools use HSB; CSS uses HSL. The same hue and saturation produce different colors in each model.

How do I convert a hex color code to RGB?

Split the hex code into three 2-character pairs and convert each from hexadecimal to decimal. For #1A2B3C: R = 1A hex = 26 decimal, G = 2B hex = 43 decimal, B = 3C hex = 60 decimal → rgb(26, 43, 60). For shorthand hex like #ABC, expand each digit: #ABC = #AABBCC. In JavaScript: parseInt('1A', 16) returns 26. Most color pickers, CSS preprocessors, and design tools perform this conversion automatically.

What is color opacity/alpha and how is it expressed?

Alpha represents opacity: 0 = fully transparent, 1 (or 100%) = fully opaque. In CSS: rgba(255, 0, 0, 0.5) for 50% transparent red. In 8-digit HEX: #RRGGBBAA, so #FF000080 is 50% transparent red (80 hex = 128 decimal = ~50%). In HSLA: hsla(0, 100%, 50%, 0.5). In Tailwind CSS, opacity is set separately (bg-red-500/50). In SVG, fill-opacity and stroke-opacity control transparency. Note: alpha compositing depends on the background — a transparent element over white looks different than over black.

ตัวเลือกสีและตัวแปลงสี

การป้อนค่าสี

รายละเอียดทางเทคนิค

เครื่องมือเลือกสีทำงานอย่างไร

เครื่องมือนี้ทำอะไร

เครื่องมือเลือกสีมอบความสามารถในการเลือกสีและแปลงรูปแบบสีอย่างครอบคลุม ช่วยให้ผู้ใช้เลือกสีด้วยภาพและแปลงระหว่างรูปแบบสีต่าง ๆ ได้ เครื่องมือเลือกสีออนไลน์นี้รองรับโมเดลสีหลายแบบ รวมถึง RGB, HSL, HSV และรูปแบบเลขฐานสิบหก (hex) ทำให้การแปลงโค้ดสีสำหรับงานพัฒนาเว็บและงานออกแบบเป็นไปอย่างราบรื่น เมื่อคุณต้องการแปลง hex เป็น rgb หรือแปลง rgb เป็น hex เครื่องมือนี้ให้ผลลัพธ์ทันทีพร้อมพรีวิวสีแบบเรียลไทม์ ตัวแปลงสีรองรับการแปลงระหว่างคัลเลอร์สเปซและรูปแบบต่าง ๆ ทำให้ง่ายต่อการทำงานกับสีในเครื่องมือออกแบบและบริบทการเขียนโปรแกรมที่หลากหลาย เครื่องมือเลือกสีแบบ hex นี้มีอินเทอร์เฟซที่ใช้งานง่ายสำหรับการเลือกสีอย่างแม่นยำ ขณะที่เครื่องมือเลือกสีแบบ rgb ให้การควบคุมเชิงตัวเลขเพื่อระบุสีได้อย่างละเอียด

กรณีการใช้งานทั่วไปของนักพัฒนา

นักพัฒนาใช้เครื่องมือเลือกสีเมื่อทำ UI สร้างสไตล์ CSS หรือทำงานกับดีไซน์ซิสเต็มที่ต้องการการใช้สีอย่างสม่ำเสมอ การแปลง hex เป็น rgb เป็นสิ่งจำเป็นเมื่อทำงานกับรูปแบบสี CSS ที่แตกต่างกัน แปลงสเปกจากงานออกแบบเป็นโค้ด หรือทำให้สีสอดคล้องกันข้ามแพลตฟอร์ม นักพัฒนาจำนวนมากต้องแปลงโค้ดสีเมื่อเชื่อมต่อกับเครื่องมือออกแบบ ประมวลผลสีที่ผู้ใช้เลือก หรือทำระบบธีมที่มีการแทนค่าสีหลายรูปแบบ ตัวแปลงสีช่วยเมื่อทำงานกับไลบรารีกราฟิก งาน canvas หรือการประมวลผลภาพที่ต้องการรูปแบบสีเฉพาะ ฟังก์ชันเครื่องมือเลือกสีออนไลน์มีประโยชน์สำหรับสร้างพาเลตสี ดีบักปัญหาที่เกี่ยวกับสี หรือสร้างความหลากหลายของสีสำหรับคอมโพเนนต์ UI เครื่องมือดูดสี (eyedropper) ช่วยดึงสีจากงานออกแบบที่มีอยู่หรือจับคู่สีระหว่างองค์ประกอบต่าง ๆ

รูปแบบข้อมูล ชนิด หรือรูปแบบย่อย

เครื่องมือเลือกสีรองรับรูปแบบการแทนค่าสีหลากหลายที่ใช้ในการพัฒนาเว็บและแอปออกแบบ โค้ดสีแบบเลขฐานสิบหก (#RRGGBB หรือ #RGB) เป็นมาตรฐานสำหรับ CSS และการพัฒนาเว็บ ให้การแทนค่าสีที่กระชับ ค่า RGB (แดง เขียว น้ำเงิน) ใช้ช่วงตัวเลข 0-255 หรือค่าแบบทศนิยม 0-1 เพื่อระบุสีได้อย่างแม่นยำ โมเดลสี HSL (hue, saturation, lightness) และ HSV (hue, saturation, value) ให้การปรับแต่งสีที่เข้าใจง่ายตามการรับรู้สีของมนุษย์ ตัวแปลง hsl ช่วยในการปรับสี ขณะที่ตัวแปลง hsv มีประโยชน์สำหรับงานเขียนโปรแกรมกราฟิก บางแอปต้องใช้ค่า CMYK สำหรับงานพิมพ์ หรือคัลเลอร์สเปซ LAB สำหรับเวิร์กโฟลว์ที่ต้องการความแม่นยำของสี ตัวแปลงโค้ดสีจะจัดการการแปลงรูปแบบ การปัดเศษความละเอียด และการตรวจสอบความถูกต้องโดยอัตโนมัติ เพื่อให้มั่นใจว่าสีถูกต้องข้ามระบบต่าง ๆ

ข้อผิดพลาดที่พบบ่อยและกรณีขอบ

เมื่อใช้เครื่องมือเลือกสี โปรดทราบว่าการแสดงผลสีอาจแตกต่างกันมากระหว่างจอแสดงผล เบราว์เซอร์ และระบบปฏิบัติการต่าง ๆ กระบวนการแปลง hex เป็น rgb อาจเกิดข้อผิดพลาดจากการปัดเศษเล็กน้อยเมื่อแปลงระหว่างรูปแบบ โดยเฉพาะสีที่ไม่สามารถแมปกับค่า RGB แบบไม่ต่อเนื่องได้พอดี ข้อพิจารณาด้านการเข้าถึง (accessibility) ของสีจำเป็นต้องตรวจสอบอัตราส่วนคอนทราสต์และให้แน่ใจว่าสีใช้งานได้สำหรับผู้ใช้ที่มีภาวะบกพร่องในการมองเห็นสี รูปแบบสีบางแบบมีช่วง gamut จำกัด ดังนั้นสีอาจดูแตกต่างเมื่อแปลงระหว่างคัลเลอร์สเปซ เครื่องมือเลือกสีออนไลน์ควรคำนึงถึงการแก้ไขแกมมา (gamma correction) และความแตกต่างของโปรไฟล์สีที่ส่งผลต่อการมองเห็นสีในบริบทต่าง ๆ ควรทดสอบสีที่เลือกในสภาพแวดล้อมที่ตั้งใจใช้งานเสมอ เพราะสีอาจดูต่างกันภายใต้สภาพแสง บริบทของพื้นหลัง หรือเมื่อแสดงบนอุปกรณ์คนละประเภท

เมื่อใดควรใช้เครื่องมือนี้แทนการเขียนโค้ด

ใช้เครื่องมือเลือกสีบนเบราว์เซอร์นี้สำหรับการเลือกสีอย่างรวดเร็ว การสำรวจงานออกแบบ หรือการแปลงสีระหว่างการพัฒนา เหมาะสำหรับการเลือกสีแบบอินเทอร์แอคทีฟ การดึงสีจากงานออกแบบ หรือการแปลงระหว่างรูปแบบสีเมื่อทำโปรโตไทป์หรือโปรเจ็กต์ขนาดเล็ก สำหรับแอปในโปรดักชัน ให้ใช้ไลบรารีจัดการสีที่เฉพาะกับภาษาที่คุณใช้ (เช่น chroma.js สำหรับ JavaScript, colorsys สำหรับ Python หรือ Color สำหรับ Java) ซึ่งมีการทำงานกับสีแบบโปรแกรมและผสานกับลอจิกของแอปได้ โซลูชันแบบโค้ดช่วยให้ประมวลผลสีอัตโนมัติ สร้างพาเลตสี และผสานกับดีไซน์ซิสเต็มหรือเครื่องมือจัดการคอนเทนต์ ใช้เครื่องมือบนเบราว์เซอร์สำหรับงานออกแบบและงานพัฒนา แต่ให้ทำการจัดการสีแบบโปรแกรมสำหรับแอปที่ต้องการการประมวลผลสีอัตโนมัติ การสร้างธีม หรือฟีเจอร์จัดการสีขั้นสูง เช่น การคำนวณความกลมกลืนของสีหรือการตรวจสอบการเข้าถึง