RevealTheme logo

เครื่องมือแปลงสี (HEX/RGB/HSL)

แปลงสีระหว่างรูปแบบ HEX, RGB และ HSL เลือกสีด้วยภาพหรือป้อนค่าด้วยตนเอง

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

วิธีใช้เครื่องมือนี้

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 4

    Copy whichever format you need straight into your CSS or design file.

เครื่องมือแปลงสี (HEX/RGB/HSL) คืออะไร?

HEX, RGB และ HSL เป็นสามวิธีในการแสดงสีเดียวกัน HEX (#RRGGBB) เป็นที่นิยมมากที่สุดใน CSS และเครื่องมือออกแบบ RGB (rgb(R,G,B)) แยกแต่ละช่องสัญญาณออกเป็นตัวเลข ส่วน HSL (hsl(H,S%,L%)) เข้าใจได้ง่ายกว่าสำหรับมนุษย์: hue คือสี saturation คือความเข้ม และ lightness คือความสว่าง ใช้ HSL เมื่อออกแบบชุดสี แล้วแปลงเป็น HEX สำหรับการนำไปใช้งานจริง

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

  • Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

  • Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

  • Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

  • Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

  • Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

  • Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

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

ฉันควรใช้ HSL แทน HEX เมื่อใด?
เมื่อออกแบบ: HSL ช่วยให้คุณปรับ lightness หรือ saturation ได้อย่างอิสระ จากนั้นจึงแปลงเป็น HEX สำหรับโค้ด
แล้ว OKLCH และพื้นที่สีสมัยใหม่ล่ะ?
OKLCH มีความสม่ำเสมอเชิงการรับรู้และดีกว่าสำหรับการเข้าถึง รองรับใน CSS Color Level 4 (เบราว์เซอร์สมัยใหม่ทั้งหมด)

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

เครื่องมือสร้าง Box Shadow CSS

สร้างค่า box-shadow ใน CSS แบบมองเห็นภาพได้ ดูตัวอย่างแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้น

เครื่องมือสร้างไล่ระดับสีของ CSS

สร้างไล่ระดับสีของ CSS แบบเส้นตรงและแบบรัศมี เลือกสีแบบเห็นภาพและคัดลอก CSS ที่สร้างขึ้น

เครื่องมือสร้างเส้นโค้งการเร่งความเร็ว Cubic Bezier

สร้างเส้นโค้งการเร่งความเร็ว cubic-bezier สำหรับ CSS รวมค่าที่ตั้งไว้ล่วงหน้าแบบมาตรฐาน

เครื่องมือสร้างชุดสี

สร้างชุดสีที่กลมกลืนจากสีฐานใดก็ได้ รองรับโทนสีคู่ตรงข้าม สีข้างเคียง สามสีไตรแอด และสีโมโนโครม

เครื่องมือสร้าง Border Radius CSS

สร้างค่า border-radius ที่ซับซ้อนใน CSS แบบมองเห็นภาพได้ ควบคุมแต่ละมุมได้อย่างอิสระ

ตัวสร้าง CSS Clamp()

สร้างค่า CSS แบบลื่นไหลและตอบสนองด้วย clamp() ปรับขนาดอย่างนุ่มนวลระหว่างขนาดต่ำสุดและสูงสุดตลอดช่วงของ viewport

สมัครรับข่าวสารอัปเดต

เราไม่ขายอีเมลของคุณ เราไม่ส่งสแปม

© 2026 RevealTheme. All rights reserved.