ข้ามไปยังเนื้อหาหลัก
FreeOnlineTools Go
ไทย
how-to

วิธีแปลงสีระหว่าง HEX, RGB และ HSL

By FreeOnlineTools Team · Updated 2026-09-02

Quick Answer

วิธีแปลงสี: เปิด Color Converter, ใส่สีในรูปแบบใดๆ (HEX, RGB, HSL) เครื่องมือจะแสดงค่าเทียบเท่าในรูปแบบอื่นทั้งหมดทันที การแปลงเกิดในเบราว์เซอร์ —ไม่มีข้อมูลอัปโหลด

Introduction

สีแสดงในรูปแบบต่างๆ: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) เครื่องมือและบริบทต่างกันใช้รูปแบบต่างกัน —CSS มักใช้ HEX หรือ RGB, design tool ใช้ HSL, API ใดๆ การแปลงระหว่างรูปแบบทำให้ใช้สีจะระบบหนึ่งในบริบทที่ต้องการอีกแบบ

Step by Step

  1. Open the Color Converter tool

    Go to the Color Converter tool page. The tool supports HEX, RGB, HSL, HSV, and CMYK formats.

  2. Enter your color

    Type or paste a color value in any supported format. Examples: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. The tool auto-detects the input format.

  3. Review all format equivalents

    The tool displays the color in all formats simultaneously: HEX, RGB, HSL, HSV, and CMYK. It also shows a color preview swatch so you can verify the conversion is correct.

  4. Copy the format you need

    Click the Copy button next to any format to copy that value to your clipboard. Use it in your CSS, design tool, or application.

  5. Adjust the color (optional)

    Some tools let you adjust the color with sliders (for HSL: hue, saturation, lightness) and see all formats update in real time. This is useful for finding related colors or shades.

Examples

HEX to RGB and HSL

Input: #ff6600

Output: RGB: rgb(255, 102, 0) HSL: hsl(24, 100%, 50%)

RGB to HEX

Input: rgb(0, 128, 255)

Output: HEX: #0080ff HSL: hsl(210, 100%, 50%)

HSL to HEX

Input: hsl(120, 100%, 50%)

Output: HEX: #00ff00 RGB: rgb(0, 255, 0)

Common Problems

  • HEX with vs without # —some tools require the # prefix, others do not. Our converter accepts both.
  • 3-digit vs 6-digit HEX —#f60 is shorthand for #ff6600. Both are valid; the converter normalizes to 6 digits.
  • HSL hue range —hue is 0-360 degrees (a circle). 0 and 360 are both red. Values above 360 wrap around.
  • Color space differences —HEX, RGB, and HSL are all sRGB. CMYK is a different color space (print) and conversion is approximate.

Tips

  • Use HSL for creating color variations —adjusting hue, saturation, or lightness is more intuitive than RGB.
  • Use HEX for CSS —it is the most compact and widely supported format in stylesheets.
  • Use RGB when you need to set alpha transparency —rgb(255, 102, 0, 0.5) for 50% opacity (or use 8-digit HEX: #ff660080).
  • Use our Color Converter for instant, private conversion between all color formats.

Related Tools

  • Color ตัวแปลง — แปลง colors between HEX, RGB and HSL ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, fully เป็นส่วนตัวทั้งหมด.
  • Color Picker — Pick colors and get HEX, RGB, and HSL values ในเบราว์เซอร์ของคุณ. Free, online, ไม่อัปโหลด, fully เป็นส่วนตัวทั้งหมด.
  • Hex to RGB Color Converter — Free online hex to rgb color converter. Process data instantly in your browser. No upload, no signup, fully private.
  • Color Contrast ตัวตรวจ (WCAG) — ออนไลน์ฟรี color contrast checker (wcag). Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.
  • Color Palette ตัวสร้าง — ออนไลน์ฟรี color palette generator. Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.
  • Add Watermark to Image ออนไลน์ฟรี — ออนไลน์ฟรี add watermark to image ออนไลน์ฟรี. Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.
  • App icono ตัวสร้าง — App icono ตัวสร้าง ออนไลน์ฟรี. ประมวลผลข้อมูลทันทีในเบราว์เซอร์ของคุณ. ไม่อัปโหลด ไม่ต้องสมัครสมาชิก เป็นส่วนตัวทั้งหมด.
  • AVIF to PNG ตัวแปลง — ออนไลน์ฟรี avif to png converter. Process data ทันที ในเบราว์เซอร์ของคุณ. ไม่อัปโหลด, no signup, fully เป็นส่วนตัวทั้งหมด.

Related Guides

References