⚡DevTools12
VIEN
← Về trang chủ

Color Converter — HEX, RGB, HSL, HSV + Tailwind Palette

Convert color giữa HEX ↔ RGB ↔ HSL ↔ HSV cùng lúc + opacity slider → rgba/hsla. Color picker native + 18 Tailwind palette quick-pick. 100% pure math.

4 formatsAlphaTailwind
HEX#22d3ee
RGBrgb(34, 211, 238)
HSLhsl(188, 86%, 53%)
HSVhsv(188, 86%, 93%)
Tailwind palette

Vì sao dùng tool này

🎨
4 formats parallel

Đổi 1 input → HEX, RGB, HSL, HSV update đồng thời. So sánh format dễ.

🌈
Tailwind palette

18 Tailwind base colors (slate → rose) — click 1 cái → load HEX vào.

💧
Opacity slider

0-100% → rgba/hsla output realtime. Useful cho transparent overlay.

Cách sử dụng

  1. 1Click color picker hoặc nhập HEX (vd #22d3ee).
  2. 2Drag opacity slider nếu cần alpha.
  3. 3Copy format ưng nhất (HEX/RGB/HSL/HSV).

Color spaces

HEX (#RRGGBB): web standard, compact. HEX với alpha #RRGGBBAA (cuối là opacity).

RGB (red green blue 0-255): screen native. rgba() thêm alpha 0-1.

HSL (hue 0-360, saturation 0-100%, lightness 0-100%): perceptual, easier để tăng/giảm độ sáng giữ tone.

HSV (hue saturation value): tương tự HSL, V là max channel value.

  • ✓HEX ↔ RGB ↔ HSL ↔ HSV bidirectional
  • ✓Native color picker (input[type=color])
  • ✓Opacity slider 0-100
  • ✓18 Tailwind base colors
  • ✓Realtime update
  • ✓Copy per format

Câu hỏi thường gặp

HSL vs HSV khác gì?

Cả 2 dùng Hue (góc trên color wheel). HSL: L=0 đen, L=50% pure color, L=100 trắng. HSV: V=0 đen, V=100 pure color (saturation 100 = pure, saturation 0 = trắng/xám).

Support P3 / Display P3?

Chưa. Phase 1 chỉ sRGB. P3 (wider gamut) sẽ thêm Phase 2.

Tại sao output HSL không khớp Figma 100%?

Rounding khi convert RGB ↔ HSL ↔ RGB. Sai số ±1 trong S/L. Negligible visually.