CoderTools

Bộ chọn/Chuyển đổi màu

Chọn màu và chuyển đổi giữa các định dạng khác nhau

Chưa có lịch sử
Khớp tốt ΔE: 0.00

Các kết quả khớp thay thế:

Xem trước giao diện văn bản

The quick brown fox jumps over the lazy dog

Tỷ lệ tương phản
5.48:1
WCAG AA
Văn bản thường Văn bản lớn
WCAG AAA
Văn bản thường Văn bản lớn
color: #6366f1;
background-color: #6366f1;
border-color: #6366f1;

Về các định dạng màu

Màu sắc có thể được biểu diễn dưới nhiều định dạng khác nhau, mỗi định dạng có các trường hợp sử dụng cụ thể và ưu điểm riêng. Công cụ này hỗ trợ chuyển đổi giữa các định dạng màu được sử dụng phổ biến nhất.

Hiểu các mô hình màu khác nhau là điều cần thiết cho phát triển web, thiết kế UI và tạo nghệ thuật kỹ thuật số.

Các định dạng màu được hỗ trợ

HEX

#RRGGBB

RGB

0-255, 0-255, 0-255

HSL

0°-360°, 0-100%, 0-100%

HSV

0°-360°, 0-100%, 0-100%

CMYK

0-100%, ×4

YCbCr

16-235, 16-240, 16-240

Lab

L*: 0-100, a*/b*: -128 to +127

Chi tiết định dạng màu

HEX (Thập lục phân)

Màu HEX sử dụng ký hiệu thập lục phân 6 chữ số có tiền tố #. Mỗi cặp đại diện cho giá trị Đỏ, Xanh lá và Xanh dương (00-FF). Ký hiệu ngắn (#RGB) mở rộng thành #RRGGBB. Hỗ trợ định dạng 8 chữ số cho độ trong suốt alpha (#RRGGBBAA).

Phạm vi: #000000 (đen) đến #FFFFFF (trắng) Ví dụ: #FF5733 = R:255, G:87, B:51

Sử dụng: CSS, HTML, thiết kế web, hầu hết các ngôn ngữ lập trình

RGB (Đỏ, Xanh lá, Xanh dương)

Mô hình RGB là mô hình màu cộng gộp trong đó ánh sáng đỏ, xanh lá và xanh dương được kết hợp để tạo ra màu sắc. Mô hình này ánh xạ trực tiếp với cách màn hình phát ra ánh sáng, làm cho nó trở thành không gian màu gốc cho màn hình kỹ thuật số.

Phạm vi: Mỗi kênh 0-255 (8-bit) hoặc 0.0-1.0 (chuẩn hóa) Ví dụ: rgb(255, 87, 51) hoặc rgba(255, 87, 51, 0.5) với alpha

Sử dụng: Màn hình hiển thị, đèn LED, CSS, hình ảnh kỹ thuật số

HSL (Sắc độ, Độ bão hòa, Độ sáng)

HSL biểu diễn màu sắc theo nhận thức của con người. Sắc độ là góc màu trên vòng tròn màu, Độ bão hòa là cường độ, và Độ sáng là mức độ sáng hoặc tối của màu. Điều này làm cho việc điều chỉnh màu trở nên trực quan hơn.

Phạm vi: H: 0-360, S: 0%-100%, L: 0%-100% Ví dụ: hsl(14, 100%, 60%) = màu cam ấm

Sử dụng: CSS, tạo bảng màu, chọn màu trực quan

HSV/HSB (Sắc độ, Độ bão hòa, Giá trị/Độ sáng)

HSV (còn được gọi là HSB) tương tự như HSL nhưng sử dụng Giá trị thay vì Độ sáng. Giá trị đại diện cho độ sáng trong đó 100% là sáng nhất. Mô hình này được ưa chuộng trong nhiều ứng dụng đồ họa vì nó phù hợp hơn với cách nghệ sĩ suy nghĩ về màu sắc.

Phạm vi: H: 0-360, S: 0%-100%, V: 0%-100% Ví dụ: hsv(14, 80%, 100%) = cam rực rỡ

Sử dụng: Photoshop, GIMP, bộ chọn màu trong phần mềm đồ họa

CMYK (Xanh lơ, Đỏ tươi, Vàng, Chìa khóa/Đen)

CMYK là mô hình màu trừ được sử dụng trong in ấn. Không giống như RGB thêm ánh sáng, CMYK trừ ánh sáng từ giấy trắng. 'K' đại diện cho Chìa khóa (đen) để cải thiện chất lượng in và giảm sử dụng mực.

Phạm vi: Mỗi kênh 0%-100% Ví dụ: cmyk(0%, 66%, 80%, 0%) = tông màu cam

Sử dụng: Thiết kế in, in thương mại, bao bì

YCbCr (Độ sáng, Độ màu)

YCbCr tách các thành phần luma (Y) khỏi chroma (Cb, Cr). Sự tách biệt này cho phép nén video hiệu quả vì mắt người nhạy cảm hơn với độ sáng so với màu sắc. Thường được sử dụng trong JPEG, MPEG và các tiêu chuẩn phát sóng.

Phạm vi: Y: 16-235 (kỹ thuật số), Cb/Cr: 16-240 (tâm tại 128) Ví dụ: Y:166, Cb:90, Cr:198 cam

Sử dụng: Nén JPEG, mã hóa video (H.264, HEVC), phát sóng TV

Lab (CIE L*a*b*)

Lab là không gian màu đồng đều về mặt tri giác được thiết kế để xấp xỉ tầm nhìn của con người. L* đại diện cho độ sáng, a* trục xanh lá-đỏ, và b* trục xanh dương-vàng. Khoảng cách tri giác 1 đơn vị trông gần giống nhau bất kể màu sắc.

Phạm vi: L*: 0-100, a*: -128 đến +127, b*: -128 đến +127 Ví dụ: L*:70, a*:45, b*:65 cam

Sử dụng: Khoa học màu sắc, tính toán sự khác biệt màu (Delta E), quản lý màu chuyên nghiệp

Pantone (PMS)

Pantone Matching System (PMS) là hệ thống chuẩn hóa màu sắc độc quyền được sử dụng rộng rãi trong in ấn, thời trang và thiết kế sản phẩm. Mỗi màu có một mã duy nhất đảm bảo tái tạo nhất quán trên các vật liệu và nhà sản xuất khác nhau.

Định dạng: PANTONE [Số] C/U/M (Phủ bóng/Không phủ bóng/Mờ) Ví dụ: PANTONE 186 C (Đỏ Coca-Cola), PANTONE 286 C (Xanh IBM)

Sử dụng: Nhận diện thương hiệu, in thương mại, thiết kế bao bì, ngành dệt may

Lưu ý: Đây là các biểu diễn kỹ thuật số gần đúng. Màu Pantone thực tế có thể khác khi in.

Cơ bản về lý thuyết màu

Màu sắc tồn tại trong các 'không gian' khác nhau được tối ưu hóa cho các mục đích khác nhau. Các mô hình cộng gộp (RGB) hoạt động bằng cách thêm ánh sáng, trong khi các mô hình trừ (CMYK) hoạt động bằng cách hấp thụ ánh sáng. Các mô hình tri giác (Lab) phù hợp với tầm nhìn của con người.

Mô hình màu cộng gộp

RGB kết hợp ánh sáng đỏ, xanh lá và xanh dương. Thêm cả ba ở cường độ đầy đủ tạo ra màu trắng. Đây là cách màn hình, máy chiếu và màn hình kỹ thuật số hoạt động.

=

Mô hình màu trừ

CMYK hấp thụ (trừ) các bước sóng ánh sáng từ màu trắng. Kết hợp tất cả các màu tạo ra màu đen (về lý thuyết). Đây là cách mực và sơn hoạt động.

=

Mô hình màu tri giác

Lab và các không gian tương tự được thiết kế xung quanh nhận thức của con người, làm cho chúng lý tưởng cho việc so sánh và hiệu chỉnh màu.

L* a* b*

Ghi chú chuyển đổi

  • RGB HEX: Chuyển đổi không mất dữ liệu, chỉ thay đổi định dạng
  • RGB HSL/HSV: Không mất dữ liệu trong phạm vi gamut, có thể mất độ chính xác
  • RGB CMYK: Có thể mất màu ngoài phạm vi gamut in
  • RGB Lab: Sử dụng chất chiếu sáng D65, giả định không gian màu sRGB
  • RGB YCbCr: Sử dụng tiêu chuẩn BT.601 theo mặc định

Tiêu chuẩn độ tương phản WCAG

Hướng dẫn Khả năng tiếp cận Nội dung Web (WCAG) định nghĩa các yêu cầu tối thiểu về độ tương phản giữa văn bản và nền để đảm bảo tất cả người dùng, bao gồm cả những người có khiếm khuyết thị giác, có thể đọc nội dung.

AA Cấp AA: Tối thiểu 4.5:1 cho văn bản thường, 3:1 cho văn bản lớn
AAA Cấp AAA: Tối thiểu 7:1 cho văn bản thường, 4.5:1 cho văn bản lớn

Các trường hợp sử dụng phổ biến

Cài đặt màu CSS trong phát triển web
Bảng màu trong thiết kế UI/UX
Thiết kế thương hiệu và nhận diện thị giác
Kiểm tra tuân thủ thiết kế khả năng tiếp cận
Chuyển đổi màu cho thiết kế in
Tô màu biểu đồ trực quan hóa dữ liệu