Bộ trộn màu: hướng dẫn bắt đầu nhanh

Mọi thứ bạn cần cho lần dùng thành công đầu tiên: dán gì vào, tùy chọn nào thực sự quan trọng, và đọc kết quả ra sao.

Đầu vào Bộ trộn màu Đầu ra Chạy 100% trên trình duyệt — dữ liệu không rời khỏi thiết bị.
Bộ trộn màu — Đầu vào → Đầu ra. Chạy 100% trên trình duyệt — dữ liệu không rời khỏi thiết bị.

Cách dùng

  1. Mở công cụ và dán dữ liệu vào khung bên trái.
  2. Chỉ chỉnh những tùy chọn mà tác vụ thực sự cần — giá trị mặc định đã đúng cho hầu hết trường hợp.
  3. Đọc kết quả ở khung bên phải; kết quả cập nhật khi bạn gõ.
  4. Dùng Sao chép để lấy kết quả, hoặc Tải xuống để lưu thành tệp.
Cách dùng · Bộ trộn màu 1 Dán dữ liệu vào ô nhập(hoặc nạp ví dụ). 2 Chỉnh tùy chọn theođịnh dạng mong muốn. 3 Sao chép, tải hoặc xemkết quả — cập nhật khibạn gõ.
Cách dùng — 3

Ví dụ

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

Đầu vào

#0ea5b7

Đầu ra — Kết quả

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

Chạy

Mô tả

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

Bộ trộn màu → · Cách dùng → · Công cụ màu sắc →

Công cụ liên quan

Bộ chọn thập phân màuInteractive picker with HEX, RGB and HSL output.Bộ chuyển đổi màu CodeConvert between HEX, RGB, HSL and named colors.màu tên Bộ kiểm tra (WCAG)Verify text contrast ratios against WCAG AA/AAA.Bộ tạo màu độ tương phảnShades, tints and complementary schemes from one color.Bộ tạo tuổi màuBatch random colors with copyable codes.Bảng tham chiếu CSS Đặt tên MàuAll 148 CSS color names with codes and previews.