Công cụ màu
Tạo, phân tích và xuất bảng màu cho dự án của bạn.
Bộ chọn màu
Nhấp vào bất kỳ điểm nào trên hình ảnh để lấy màu và sao chép mã HEX, RGB, HSL hoặc CMYK ngay lập tức. Xem trước và lưu mẫu màu vào bảng màu trong trình duyệt.
Trích xuất màu
Tải lên hình ảnh để trích xuất các màu chính và tạo bảng màu sẵn dùng với mã HEX và RGB. Xem trước từng sắc độ và xuất ra để dùng cho thiết kế của bạn.
Trình tạo bảng màu
Tạo bảng màu hài hòa từ bất kỳ ảnh hoặc hình nào kèm mã HEX và RGB đầy đủ. Điều chỉnh từng sắc độ rồi xuất sang CSS cho dự án thiết kế của bạn nhanh chóng.
Màu chủ đạo
Phân tích hình ảnh để tìm các màu chủ đạo nhất kèm tỷ lệ phần trăm và mã HEX. Xây dựng bảng màu cân đối từ các màu chính và xuất kết quả ra thiết kế của bạn.
Màu tương tự
Nhập một màu để tìm các sắc độ HEX và RGB tương tự và lân cận với nó. Khám phá các biến thể sáng và tối rồi xây dựng bảng màu hài hòa ngay trong trình duyệt.
Chuyển đổi màu
Chuyển đổi giá trị màu giữa HEX, RGB, HSL, CMYK, OKLCH và LAB ngay lập tức. Dán một mã và nhận tất cả định dạng còn lại kèm bản xem trước trực tiếp ngay.
Độ tương phản màu
Kiểm tra tỷ lệ tương phản giữa chữ và nền để đáp ứng tiêu chuẩn dễ tiếp cận WCAG AA và AAA. Điều chỉnh cặp màu HEX cho đến khi chữ dễ đọc với mọi người.
Xuất bảng màu
Xuất bảng màu của bạn ra các định dạng CSS, SCSS, JSON và ASE sẵn sàng cho mã. Sao chép biến HEX và RGB thẳng vào dự án Tailwind, Figma hay trình soạn thảo.
Xem trước màu
Trực quan hóa cách màu sắc và tổ hợp HEX của bạn hiển thị trên nút, thẻ và chữ. Điều chỉnh bảng màu với bản xem trước trực tiếp trước khi áp dụng vào thiết kế.
Tải xuống màu
Tải bảng màu của bạn thành hình ảnh PNG gọn gàng hiển thị từng mã HEX. Chia sẻ mẫu màu với nhóm hoặc khách hàng và lưu lại tham chiếu màu cho dự án của bạn.
Chia sẻ màu
Chia sẻ bảng màu của bạn qua một liên kết duy nhất hiển thị từng mã HEX và RGB. Gửi cho đồng nghiệp hoặc khách hàng để xem lại và sao chép sắc độ nhanh chóng.
Hòa sắc màu
Khám phá các hòa sắc bổ sung, tam giác, tương đồng và bộ bốn từ vòng tròn màu. Xây dựng bảng màu cân đối với mã HEX và RGB rồi xuất ra cho thiết kế của bạn.
Gradient CSS
Thiết kế gradient CSS tuyến tính và xuyên tâm với nhiều điểm dừng màu và góc tùy chỉnh. Điều chỉnh từng sắc độ HEX và sao chép mã nền CSS vào dự án của bạn.
Gradient lưới
Tạo gradient lưới đa màu mượt mà và hiện đại cho nền của các trang web. Điều chỉnh từng điểm dừng màu HEX rồi sao chép mã CSS sẵn dùng vào dự án của bạn.
Gradient động
Thiết kế nền gradient động mượt mà bằng keyframes CSS thuần túy hoàn toàn. Điều chỉnh màu HEX, hướng và tốc độ rồi sao chép mã hoạt hình vào trang của bạn.
Mô phỏng mù màu
Mô phỏng cách bảng màu của bạn hiển thị với người mắc chứng protanopia, deuteranopia và tritanopia. Đảm bảo màu HEX vẫn phân biệt được và bao hàm cho mọi người.
Khả năng đọc văn bản
Kiểm tra mức độ dễ đọc của văn bản trên các nền màu khác nhau bằng tỷ lệ tương phản WCAG. Điều chỉnh cặp màu HEX cho đến khi dễ đọc trên bất kỳ màn hình nào.
Phân tích WCAG
Phân tích toàn bộ bảng màu về mức độ tuân thủ khả năng tiếp cận WCAG cấp AA và AAA. Xem tỷ lệ tương phản của từng cặp HEX và sửa các cặp không đạt dễ dàng.
Glassmorphism
Thiết kế hiệu ứng glassmorphism với nền mờ, độ trong suốt và làm mờ tinh tế. Điều chỉnh màu HEX và cường độ rồi sao chép mã CSS sẵn dùng vào giao diện của bạn.
Neumorphism
Tạo hiệu ứng neumorphic mềm mại với bóng sáng và tối kép trên nút và thẻ. Điều chỉnh màu HEX và khoảng cách bóng rồi sao chép mã CSS cho giao diện của bạn.
Bóng màu
Thiết kế bóng đổ CSS đầy màu mềm mại cho nút, thẻ và hình ảnh của bạn. Điều chỉnh màu HEX, độ mờ và khoảng cách rồi sao chép mã box-shadow sẵn dùng vào dự án.
Hiệu ứng Duotone
Áp dụng hiệu ứng duotone với hai màu tùy chọn để mang lại phong cách táo bạo cho ảnh. Điều chỉnh màu sáng và bóng HEX rồi tải hình kết quả cho thiết kế của bạn.
Bộ lọc màu hình ảnh
Áp dụng bộ lọc màu, tông màu và điều chỉnh cho ảnh để thay đổi bầu không khí. Điều chỉnh cường độ và màu HEX rồi tải hình kết quả sẵn dùng cho dự án của bạn.
Bảng tâm trạng màu
Thu thập màu sắc, sắc độ và cảm hứng vào một bảng tâm trạng thị giác cho dự án. Sắp xếp từng mẫu HEX, dựng bảng màu hài hòa và chia sẻ ý tưởng với nhóm của bạn.
Trộn màu
Trộn hai hoặc nhiều màu để tạo ra các sắc độ trung gian mới với mã HEX. Điều chỉnh tỷ lệ pha trộn và xem trước kết quả trực tiếp ngay trong trình duyệt.
Sắc độ và bóng
Tạo một dải tints sáng và shades tối từ bất kỳ màu cơ sở nào. Nhận mã HEX cho từng bước để xây dựng thang màu nhất quán cho giao diện của bạn nhanh chóng.
Bảng màu ngẫu nhiên
Tạo các bảng màu ngẫu nhiên tươi mới để khơi nguồn ý tưởng thiết kế khi bạn bí ý. Khóa các sắc độ yêu thích, xáo trộn phần còn lại và sao chép mã HEX ra.
Bảng màu từ từ khóa
Nhập một từ khóa hoặc tâm trạng rồi biến nó thành bảng màu theo chủ đề hài hòa. Nhận mã HEX và RGB của từng sắc độ và xuất sang CSS cho thiết kế của bạn.
Bảng màu Tailwind
Tạo thang màu Tailwind CSS đầy đủ từ 50 đến 950 cho màu thương hiệu của bạn. Sao chép cấu hình sẵn dán với giá trị HEX thẳng vào tệp config của dự án.
Biến CSS
Chuyển bảng màu của bạn thành các CSS custom properties gọn gàng và dễ bảo trì. Sao chép biến HEX sẵn dán vào root stylesheet cho chủ đề trang web của bạn.
Theme shadcn/ui
Tạo theme shadcn/ui đầy đủ với biến màu HSL cho chế độ sáng và tối. Sao chép cấu hình CSS sẵn dán thẳng vào dự án Next.js hoặc React của bạn nhanh chóng.
Biến SCSS
Chuyển bảng màu của bạn thành các biến SCSS và Sass gọn gàng cho stylesheet dự án. Sao chép giá trị HEX sẵn dán và quản lý màu thương hiệu một cách nhất quán.
Nhiệt độ màu
Phân tích nhiệt độ của từng màu để hiểu sự cân bằng giữa các tông ấm và lạnh. Điều chỉnh bảng màu HEX để truyền tải bầu không khí mong muốn trong thiết kế.
Tâm trạng màu
Hiểu cảm xúc và tâm lý đằng sau mỗi màu để chọn đúng bảng màu phù hợp. Khám phá ý nghĩa của các sắc độ HEX và xây dựng bản sắc thị giác mạnh cho thương hiệu.
Màu thương hiệu
Tìm thương hiệu trong danh mục, xem các màu đã lưu và nhanh chóng sao chép những mã HEX có sẵn.
Xu hướng màu
Khám phá các màu và bảng màu đang thịnh hành để giữ thiết kế của bạn luôn tươi mới. Nhận mã HEX của từng sắc độ phổ biến và áp dụng vào dự án thương hiệu.
Bản đồ gradient
Áp dụng bản đồ gradient để ánh xạ tông sáng và tối của ảnh sang dải chuyển màu bạn chọn. Điều chỉnh điểm dừng màu HEX rồi tải hình kết quả đầy phong cách xuống.
Lớp phủ màu
Thêm một lớp màu trong suốt lên trên ảnh để hợp nhất bầu không khí thị giác. Điều chỉnh màu HEX, chế độ hòa trộn và độ mờ đục rồi tải hình kết quả xuống.
Bảng màu đơn sắc
Xây dựng một sơ đồ màu đơn sắc thanh lịch từ bất kỳ sắc độ cơ sở nào. Nhận mã HEX của từng biến thể sáng và tối rồi xuất ra cho giao diện hoặc thương hiệu.
Sơ đồ bổ sung
Tạo một sơ đồ bổ sung với các cặp màu đối lập trên vòng tròn màu sắc. Nhận mã HEX của từng sắc độ tương phản và cân đối cho một thiết kế nổi bật ấn tượng.
Xem trước UI
Áp dụng bảng màu của bạn lên các thành phần UI thực tế như nút, thẻ và biểu mẫu. Xem trước chủ đề sáng và tối trực tiếp trước khi áp dụng vào sản phẩm.
Xem trước mạng xã hội
Xem cách màu sắc của bạn hiển thị trên bản mẫu bài đăng và hồ sơ mạng xã hội. Điều chỉnh bảng màu HEX để thu hút chú ý trên bảng tin trước khi bạn đăng tải.