Stax
Tools

HEX to RGB Converter

Convert colour codes between HEX, RGB, HSL, and HSV.

#3B82F6
RGB sliders
R
G
B
HSL sliders
H
S
L
All formats — click to copy

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

วิธีใช้ตัวแปลงนี้

เมื่อใดควรใช้แต่ละรูปแบบใน CSS

สีเว็บสามารถแสดงได้หลายรูปแบบ แต่ละรูปแบบเหมาะกับบริบทต่างกัน HEX กระทัดรัดที่สุดและใช้กันแพร่หลายใน HTML และ CSS RGB ง่ายต่อการจัดการผ่านโปรแกรม HSL เป็นรูปแบบที่เข้าใจง่ายที่สุดสำหรับการปรับความสว่างและความอิ่มตัวของสี RGBA และ HSLA เพิ่มช่องความโปร่งใส (0 = โปร่งใส, 1 = ทึบ)

  • ใช้ color picker หรือพิมพ์รหัส HEX เพื่อกำหนดสีพื้นฐาน
  • ลาก slider RGB หรือ HSL เพื่อปรับสีและดูรูปแบบทั้งหมดอัปเดตแบบเรียลไทม์
  • คลิกแถวรูปแบบใดก็ได้ในตารางเพื่อคัดลอกไปยังคลิปบอร์ด
  • HEX: สีคงที่ใน stylesheet — ไวยากรณ์สั้นที่สุด รองรับทุกที่
  • RGB / RGBA: เมื่อต้องการความโปร่งใส (rgba) หรือคำนวณสีใน JavaScript
  • HSL / HSLA: เมื่อสร้าง design system — ง่ายต่อการสร้างเฉดสีสม่ำเสมอโดยปรับเฉพาะความสว่าง
  • CSS variables: กำหนดครั้งเดียว ใช้ทุกที่ อัปเดตง่ายสำหรับ theming และ dark mode

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

How do I convert HEX to RGB?
Split the 6-digit hex code into three 2-digit pairs and convert each from base 16 to base 10. For example, #3b82f6: 3b → 59, 82 → 130, f6 → 246, giving rgb(59, 130, 246). This tool does it instantly — just enter your hex code or use the colour picker.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) describes colour by mixing light primaries — each channel 0–255. HSL (Hue, Saturation, Lightness) describes colour more intuitively: hue is the angle on the colour wheel (0–360°), saturation controls how vivid the colour is (0–100%), and lightness controls brightness (0–100%). HSL is much easier for humans to reason about when adjusting colours.
What is HSV / HSB?
HSV (Hue, Saturation, Value) — also called HSB (Hue, Saturation, Brightness) — is similar to HSL but differs in how brightness works. In HSL, 50% lightness is the 'pure' colour; in HSV, 100% value is the pure colour. HSV is used in most design apps (Figma, Photoshop) while HSL is more common in CSS.
How do I use colour codes in CSS?
CSS accepts hex (#3b82f6), rgb(59, 130, 246), rgba(59, 130, 246, 0.5), hsl(217, 91%, 60%), and hsla() formats. Modern CSS also accepts oklch() and lab() for wider gamut colours. For CSS custom properties, use --color: #3b82f6 and reference it with var(--color).
What is the Tailwind CSS arbitrary colour format?
Tailwind v3+ supports arbitrary values like bg-[#3b82f6] or text-[#3b82f6] for one-off colours not in your theme. For regular usage, define the colour in your tailwind.config.js under theme.extend.colors so you can use it as bg-brand-500 etc.

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