ตัวแปลงหน่วยและสี CSS

ทำความเข้าใจสีและหน่วย CSS

รูปแบบสี HEX, RGB และ HSL

CSS รองรับรูปแบบสีหลายแบบ <strong>สี HEX</strong> ใช้สัญกรณ์ฐานสิบหกหกหลัก (เช่น <code>#22c55e</code>) และเป็นรูปแบบที่พบมากที่สุดในการออกแบบเว็บ

<strong>RGB</strong> ใช้ค่าทศนิยมตั้งแต่ 0 ถึง 255 สำหรับแต่ละช่อง RGBA เพิ่มช่องอัลฟาสำหรับความโปร่งใส

<strong>HSL</strong> เป็นรูปแบบที่ใช้งานง่ายที่สุดสำหรับนักออกแบบ Hue คือองศาบนวงล้อสี (0–360) ในขณะที่ Saturation และ Lightness เป็นเปอร์เซ็นต์

CSS Named Colors

CSS provides 147 named colors like coral, steelblue, and rebeccapurple. While convenient for prototyping, named colors offer limited precision. Converting a CSS color name to HEX or RGB gives you exact values you can fine-tune for production use.

CMYK สำหรับงานพิมพ์

<strong>CMYK</strong> เป็นโมเดลสีมาตรฐานสำหรับการพิมพ์

HSV ในเครื่องมือออกแบบ

<strong>HSV</strong> เป็นโมเดลสีดั้งเดิมใน Photoshop, Figma และ Sketch

PX เทียบกับ REM: อธิบายหน่วย CSS

<strong>พิกเซล (PX)</strong> เป็นหน่วยสัมบูรณ์ <strong>REM</strong> เป็นหน่วยสัมพัทธ์กับขนาดฟอนต์ขององค์ประกอบราก (ปกติ 16px) การใช้ REM ช่วยให้เลย์เอาต์ปรับขนาดตามสัดส่วน

การแปลงตรงไปตรงมา: หารพิกเซลด้วย 16 เพื่อให้ได้ค่า REM ตัวอย่างเช่น 24px เท่ากับ 1.5rem

<strong>หน่วย EM</strong> สัมพันธ์กับขนาดฟอนต์ขององค์ประกอบแม่

• 1rem = 16px (default browser setting)
• 1em = parent font-size (context-dependent)
• 0.75rem = 12px — common for small/caption text
• 1.25rem = 20px — common for subheadings
• 2rem = 32px — common for section headings

ทำไมต้องใช้ตัวแปลง CSS?

การแปลงระหว่างรูปแบบสีด้วยตนเองเป็นเรื่องน่าเบื่อและผิดพลาดง่าย เครื่องมือแปลงอัตโนมัติช่วยประหยัดเวลาและขจัดข้อผิดพลาด

• Instant results — paste a value and get the converted output immediately, no formulas needed.
• Copy-ready output — every result includes a one-click copy button with properly formatted CSS syntax.
• Color preview — see a live swatch of the converted color to visually confirm accuracy.
• No installation — works in any browser, on any device. No extensions, downloads, or signups.
• Developer-friendly — shareable URLs with pre-filled values for easy team collaboration.

Common CSS Conversion Workflows

• Design handoff: Figma and Sketch export colors as HEX. Convert to RGB or HSL if your codebase uses those formats.
• Dark mode generation: Take your light-mode HSL palette, adjust lightness values, and convert back to HEX.
• Accessibility checks: Convert colors to RGB to calculate contrast ratios using the WCAG luminance formula.
• Legacy migration: Convert pixel-based layouts to rem-based responsive systems during refactors.
• Cross-browser debugging: Quickly convert colors to match your source code format.

Supported Conversions