Bộ chuyển đổi đơn vị và màu CSS

Hiểu về màu sắc và đơn vị CSS

Định dạng màu HEX, RGB và HSL

CSS hỗ trợ nhiều định dạng màu. <strong>Màu HEX</strong> sử dụng ký hiệu thập lục phân sáu ký tự (ví dụ: <code>#22c55e</code>) và là định dạng phổ biến nhất trong thiết kế web.

<strong>RGB</strong> sử dụng các giá trị thập phân từ 0 đến 255 cho mỗi kênh. RGBA mở rộng thêm kênh alpha để kiểm soát độ trong suốt.

<strong>HSL</strong> là trực quan nhất cho nhà thiết kế. Hue là một độ trên bánh xe màu (0–360), Saturation và Lightness là phần trăm.

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 cho thiết kế in

<strong>CMYK</strong> là mô hình màu tiêu chuẩn cho in ấn.

HSV trong công cụ thiết kế

<strong>HSV</strong> là mô hình màu gốc trong Photoshop, Figma và Sketch.

PX so với REM: Giải thích đơn vị CSS

<strong>Pixel (PX)</strong> là đơn vị tuyệt đối. <strong>REM</strong> là đơn vị tương đối so với kích thước phông chữ của phần tử gốc (thường là 16px). Sử dụng REM đảm bảo bố cục co giãn theo tỷ lệ.

Phép chuyển đổi đơn giản: chia pixel cho 16 để có giá trị REM. Ví dụ, 24px bằng 1.5rem.

<strong>Đơn vị EM</strong> tương đối với cỡ chữ của phần tử cha.

• 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

Tại sao sử dụng bộ chuyển đổi CSS?

Chuyển đổi thủ công giữa các định dạng màu rất nhàm chán và dễ mắc lỗi. Các công cụ chuyển đổi tự động giúp tiết kiệm thời gian và loại bỏ sai sót.

• 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