Color Picker & Converter

Pick colors visually and convert between HEX, RGB, and HSL formats in real time. Build harmonious palettes with one click using complementary, triadic, and analogous color rules for your design work.

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

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.