Chọn màu và tạo bảng màu
Chọn màu và tạo bảng màu
Chọn một màu
Bảng màu
Material
Pastel
Hiện đại
Đơn sắc
Mẹo về màu sắc
Nhấp vào bất kỳ màu nào trong phần phối màu hoặc bảng màu để chọn màu đó.
Dùng nút ngẫu nhiên để khám phá các tổ hợp màu mới.
Màu bổ sung tạo độ tương phản cao và sự thu hút thị giác.
Màu tương đồng tạo ra thiết kế hài hòa và êm dịu.
Bộ ba màu mang lại độ tương phản sống động mà vẫn giữ được sự hài hòa.
Dùng sắc độ đậm và nhạt để tìm biến thể tối hơn hoặc sáng hơn của màu bạn chọn.
Xem trước màu
Định dạng màu
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)hsla(217, 91%, 60%, 1)Chọn một màu để xem giá trị, các màu phối hài hòa và các biến thể của nó.
Màu bổ sung
Màu tương đồng
Bộ ba màu
Bổ sung chia đôi
Bộ bốn màu
Sắc độ đậm và nhạt
Sắc độ đậm hơn
Sắc độ nhạt hơn
Giới thiệu về công cụ Chọn màu
Đây là công cụ chọn màu trực tuyến miễn phí của chúng tôi, một công cụ chọn và chuyển đổi màu toàn diện, dành cho nhà thiết kế, lập trình viên và người sáng tạo nội dung số. Chọn bất kỳ màu nào bằng ô nhập màu tương tác, xem màu ở nhiều định dạng gồm HEX, RGB, RGBA, HSL và HSLA, rồi khám phá các phối màu hài hòa để xây dựng bảng màu đẹp và đồng bộ cho dự án của bạn.
Dù bạn đang thiết kế website, xây dựng nhận diện thương hiệu, phát triển giao diện người dùng hay sáng tạo tác phẩm nghệ thuật số, một công cụ chọn màu phù hợp là điều thiết yếu. Công cụ của chúng tôi vượt xa việc chọn màu cơ bản: tự động tạo các phối màu bổ túc, tương tự, tam giác, bổ túc chia đôi và tứ giác, cung cấp các bảng màu được tuyển chọn (Material, Pastel, Hiện đại, Đơn sắc) và cho phép sao chép ngay vào bộ nhớ tạm ở mọi định dạng màu.
Công cụ có bảng xem trước màu lớn, trình tạo sắc đậm và sắc nhạt, tạo màu ngẫu nhiên để lấy cảm hứng, cùng các ô mẫu trong bảng màu có thể nhấn, giúp việc khám phá tổ hợp màu nhanh và trực quan. Mọi phép tính màu diễn ra tức thì trong trình duyệt của bạn, không cần xử lý trên máy chủ, mang lại trải nghiệm nhanh, riêng tư và mượt mà.
Tính năng chính
- Bộ chọn màu tương tác với ô nhập màu gốc của trình duyệt
- Năm định dạng màu đầu ra: HEX, RGB, RGBA, HSL và HSLA
- Sao chép vào bộ nhớ tạm bằng một lần nhấn cho mọi định dạng màu
- Năm kiểu phối màu hài hòa: bổ túc, tương tự, tam giác, bổ túc chia đôi và tứ giác
- Trình tạo sắc đậm và sắc nhạt để tìm biến thể tối hơn hoặc sáng hơn
- Bốn bảng màu tuyển chọn: Material Design, Pastel, Hiện đại và Đơn sắc
- Trình tạo màu ngẫu nhiên để lấy cảm hứng sáng tạo
- Bảng xem trước màu lớn để đánh giá trực quan chính xác
- Kiểm tra mã hex hợp lệ với phản hồi theo thời gian thực
- Bố cục đáp ứng, tối ưu cho máy tính và thiết bị di động
Cách sử dụng công cụ Chọn màu
- Chọn một màu: Nhấn vào ô vuông nhập màu để mở bộ chọn màu gốc, hoặc gõ trực tiếp giá trị HEX vào ô văn bản (ví dụ: #3B82F6).
- Xem các định dạng màu: Xem màu đã chọn hiển thị ở các định dạng HEX, RGB, RGBA, HSL và HSLA trong phần Định dạng màu bên dưới bản xem trước.
- Sao chép giá trị màu: Nhấn biểu tượng sao chép cạnh bất kỳ định dạng màu nào để chép giá trị đó vào bộ nhớ tạm, dùng trong CSS, công cụ thiết kế hoặc mã.
- Khám phá các phối màu hài hòa: Xem các phối màu được tạo tự động. Dùng các tab để lọc từng kiểu phối màu hoặc xem tất cả cùng lúc.
- Tinh chỉnh bằng sắc đậm & sắc nhạt: Tìm các biến thể tối hơn hoặc sáng hơn của màu đã chọn trong phần Sắc đậm & sắc nhạt.
- Duyệt các bảng màu: Nhấn vào bất kỳ ô mẫu nào trong bảng Material, Pastel, Hiện đại hoặc Đơn sắc để chọn màu đó và xem giá trị cùng các phối màu của nó.
- Tạo màu ngẫu nhiên: Nhấn nút xáo trộn cạnh ô nhập màu để khám phá màu mới và những tổ hợp bất ngờ, lấy cảm hứng sáng tạo.
Trường hợp sử dụng
- Thiết kế & phát triển web: Chọn và chuyển đổi màu cho stylesheet CSS, design token và framework frontend. Sao chép giá trị HEX, RGB hoặc HSL thẳng vào mã của bạn.
- Xây dựng nhận diện thương hiệu: Chọn màu chính, màu phụ và màu nhấn cho bộ quy chuẩn thương hiệu, rồi dùng các phối màu hài hòa để dựng một bảng màu thương hiệu hoàn chỉnh và đồng bộ.
- Thiết kế UI/UX: Chọn màu giao diện có độ tương phản và sự hài hòa phù hợp cho nút, nền, văn bản và các phần tử tương tác trong thiết kế giao diện người dùng.
- Dự án thiết kế đồ họa: Tìm và tinh chỉnh chính xác màu sắc cho tranh minh họa, đồ họa mạng xã hội, tài liệu tiếp thị và các dự án thiết kế in ấn.
- Thiết kế bài thuyết trình: Chọn bảng phối màu chuyên nghiệp, hài hòa cho bộ slide, báo cáo và trực quan hóa dữ liệu.
- Giáo dục lý thuyết màu sắc: Tìm hiểu các mối quan hệ màu bổ túc, tương tự, tam giác, bổ túc chia đôi và tứ giác thông qua trình tạo phối màu tương tác.
- Kiểm tra khả năng truy cập: So sánh giá trị màu và thử nghiệm tỷ lệ tương phản để đảm bảo thiết kế của bạn đáp ứng tiêu chuẩn khả năng truy cập WCAG.
- Nghệ thuật số & minh họa: Khám phá các bảng màu và tìm những tổ hợp hài hòa cho tranh kỹ thuật số, tranh minh họa và tác phẩm sáng tạo.
Câu hỏi thường gặp
Công cụ hỗ trợ những định dạng màu nào?
Công cụ chọn màu hỗ trợ năm định dạng: HEX (ví dụ: #3B82F6), RGB (ví dụ: rgb(59, 130, 246)), RGBA có kênh alpha, HSL (ví dụ: hsl(217, 91%, 60%)) và HSLA có kênh alpha. Tất cả định dạng được tạo tự động từ màu bạn chọn.
Phối màu hài hòa là gì?
Phối màu hài hòa là những tổ hợp màu đẹp mắt khi đặt cạnh nhau. Công cụ của chúng tôi tạo năm kiểu: bổ túc (đối diện nhau trên bánh xe màu), tương tự (các màu liền kề), tam giác (ba màu cách đều nhau), bổ túc chia đôi (màu gốc + hai màu liền kề màu bổ túc của nó) và tứ giác (bốn màu theo hình chữ nhật).
Tôi có thể nhập một mã HEX cụ thể không?
Có, bạn có thể gõ bất kỳ mã màu HEX hợp lệ nào trực tiếp vào ô văn bản cạnh bộ chọn màu. Công cụ kiểm tra dữ liệu bạn nhập theo thời gian thực và sẽ cập nhật ngay bản xem trước, các định dạng màu và phối màu khi mã hex hợp lệ được nhập.
Sắc đậm và sắc nhạt là gì?
Công cụ này tạo năm biến thể tối hơn và năm biến thể sáng hơn bằng cách thay đổi độ sáng HSL theo từng bước 12 điểm phần trăm, giữ nguyên sắc độ và độ bão hòa. Độ sáng bị giới hạn trong khoảng 0-100%, nên một số biến thể có thể lặp lại ở màu đen hoặc trắng.
Công cụ này có miễn phí không?
Có, công cụ chọn màu của chúng tôi hoàn toàn miễn phí và không giới hạn. Chọn, chuyển đổi và sao chép bao nhiêu màu tùy ý mà không cần tạo tài khoản hay trả phí.
Dữ liệu của tôi có an toàn không?
Chắc chắn rồi. Toàn bộ việc chọn và chuyển đổi màu diễn ra hoàn toàn trong trình duyệt của bạn. Không có dữ liệu nào được gửi đến máy chủ, và không có thông tin nào về lựa chọn màu của bạn được lưu hay theo dõi.
Mẹo và thực hành tốt nhất
- Bắt đầu từ các phối màu hài hòa: Khi xây dựng bảng phối màu, hãy chọn màu chính trước, rồi dùng các màu bổ túc, tương tự hoặc tam giác được tạo tự động làm điểm khởi đầu cho bảng màu của bạn.
- Dùng sắc đậm & sắc nhạt để tạo chiều sâu: Khi đã chọn màu chính, hãy dùng sắc đậm và sắc nhạt để tạo trạng thái di chuột, nền và viền giữ được sự nhất quán về thị giác.
- Dùng trình tạo ngẫu nhiên để lấy cảm hứng: Khi bí ý tưởng chọn màu, hãy nhấn nút ngẫu nhiên vài lần để khám phá những màu bất ngờ có thể gợi mở hướng sáng tạo.
- Thử màu trong ngữ cảnh thực: Một màu trông rất đẹp trong bộ chọn có thể khác đi trong thiết kế thực tế. Hãy luôn thử các giá trị màu đã sao chép trong dự án của bạn trước khi chốt bảng màu.
- Lưu ý khả năng truy cập: Đảm bảo độ tương phản đủ giữa màu chữ và màu nền. Một hướng dẫn phổ biến là tỷ lệ tương phản tối thiểu 4.5:1 cho văn bản thường và 3:1 cho văn bản cỡ lớn (WCAG AA).
- Dùng HSL để tinh chỉnh: Định dạng HSL giúp dễ tạo biến thể của một màu bằng cách điều chỉnh độ sáng (sáng hơn hoặc tối hơn) hoặc độ bão hòa (rực hơn hoặc dịu hơn) mà vẫn giữ nguyên sắc độ.