Color Picker & Converter

Chọn màu trực quan và chuyển đổi giữa HEX, RGB, HSL theo thời gian thực. Tạo bảng màu hài hoà chỉ với một click bằng các nguyên tắc bổ sung, tam giác, tương đồng cho công việc thiết kế. Hướng dẫn đầy đủ →

Color Picker

Thời gian thực

Bảng màu nâng cao với HEX, RGB, HSL, HSV và tạo bảng phối màu

Chọn màu

#FF5733

⚠️

Trình duyệt không hỗ trợ EyeDropper API

Thông tin debug 🔍

window:✗ undefined

EyeDropper:✗ not found

Type:

User Agent:

💡 Hỗ trợ: Chrome 95+, Edge 95+, Opera 81+

Định dạng màu

HEX

Upload ảnh để pick màu

Click vào bất kỳ pixel nào trên ảnh để lấy màu

Chọn ảnh

PNG, JPG, GIF, WebP

Giá trị màu

HEX

Hexadecimal

#FF5733

RGB

Red, Green, Blue

rgb(255, 87, 51)

HSL

Hue, Saturation, Lightness

hsl(11, 100%, 60%)

HSV

Hue, Saturation, Value

hsv(11, 80%, 100%)

Bảng phối màu

Màu sắc cho UI: từ HEX đến hệ HSL

Công cụ này là gì?

Color picker trên atdev.blog cho phép lấy mã màu dưới nhiều dạng (HEX, RGB, HSL), tạo bảng phối màu và tinh chỉnh độ sáng/độ bão hòa trực quan.

Thích hợp khi bạn thiết kế theme Tailwind/CSS, chỉnh màu brand, hoặc cần một bộ màu tương phản cho chữ và nền (accessibility).

Khi nào nên dùng?

Khi nhận brief chỉ có logo và bạn cần dựng palette phụ trợ. Khi debug CSS: copy mã từ design và kiểm tra nhanh trên component thật.

Khi làm slide hoặc infographic: giữ nhất quán mã màu giữa FigJam, Google Slides và code.

Tình huống thực tế

Frontend: tạo gradient primary/secondary khớp brand, rồi map sang CSS variables. Mobile: chỉnh màu dark mode sao cho đủ contrast WCAG.

Marketing: sinh thêm hai tông nhạt/đậm để dùng cho nút hover và border mà không lệch palette.

Ví dụ dùng nhanh

Chọn màu chữ yêu thích → đọc HSL → giảm lightness 15% để có màu hover.

Dán HEX từ design cũ → xem RGB để đồng bộ với thư viện chart (nhiều API nhận rgb).

Vì sao hữu ích?

Hiểu HSL giúp chỉnh sáng/tối có hệ thống hơn là sửa HEX mù. Công cụ chạy local nên bạn thử nhiều biến thể mà không động đến backend.

Đọc thêm trên blog·Về atdev.blog

Công cụ liên quan

Tất cả công cụ

Tiện ích văn bản

Chuyển đổi, sắp xếp, định dạng và làm sạch văn bản

Tạo mã Hash

Tạo mã hash MD5, SHA-1, SHA-256 và các thuật toán mã hóa khác

Ảnh sang Base64

Chuyển ảnh sang định dạng Base64 để nhúng vào HTML, CSS hoặc data URI

Thay đổi kích thước ảnh

Thay đổi kích thước ảnh giữ nguyên tỷ lệ. Phù hợp cho logo và thumbnail

About Color Picker

Pick colors visually and convert between HEX, RGB, and HSL formats instantly. Generate harmonious color palettes using complementary, triadic, and analogous color rules for your design projects.

Key Features

-Visual color picker with full spectrum
-Instant HEX, RGB, and HSL conversion
-Color harmony palette generation (complementary, triadic, analogous)
-One-click copy values to clipboard
-Automatic readable overlay color (black or white) for each swatch
-Works entirely in your browser — no sign-up required

Use Cases

Web Development

Pick exact colors for CSS styling, design tokens, and component theming.

Brand Guidelines

Extract and document brand colors in multiple formats for design systems.

Palette Building

Generate complementary, triadic, and analogous palettes around a base color in one click.

Design Prototyping

Quickly experiment with color combinations using harmony rules before committing to a palette.

Frequently Asked Questions

What is the difference between HEX and RGB?▾

HEX uses a six-character hexadecimal notation (#FF5733). RGB uses three decimal values (255, 87, 51). They represent the same colors in different notation systems.

What is HSL?▾

HSL stands for Hue, Saturation, and Lightness. It is often more intuitive for designers because you can adjust brightness and saturation independently of the base hue.

Which color formats can I copy?▾

Each color can be copied as HEX (#FF5733), RGB (rgb(255, 87, 51)), or HSL (hsl(12, 100%, 60%)). Click the value to copy it to your clipboard.