Phối màu css

Ví dụ: rgb(0,0,255) được hiển thị là màu xanh lam vì tham số màu xanh lam được đặt thành giá trị cao nhất (255) và các giá trị khác được đặt thành 0

Thí dụ

MàuRGBColorrgb(255,0,0)Redrgb(0,255,0)Greenrgb(0,0,255)Blue

Tự mình thử »

Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho cả 3 nguồn sáng

Thí dụ

MàuRGBColorrgb(0,0,0)Blackrgb(128,128,128)Grayrgb(255,255,255)Trắng

Tự mình thử »



Màu thập lục phân

Các giá trị màu thập lục phân cũng được hỗ trợ trong tất cả các trình duyệt

Một màu thập lục phân được chỉ định với. #RRGGBB

RR (đỏ), GG (xanh lục) và BB (xanh dương) là các số nguyên thập lục phân giữa 00 và FF chỉ định cường độ của màu

Ví dụ: #0000FF được hiển thị dưới dạng màu xanh lam, vì thành phần màu xanh dương được đặt thành giá trị cao nhất (FF) và các thành phần khác được đặt thành 00

Thí dụ

ColorHEXRGBColor#FF0000rgb(255,0,0)Red#00FF00rgb(0,255,0)Green#0000FFrgb(0,0,255)Blue

Tự mình thử »

Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho cả 3 nguồn sáng

Thí dụ

MàuHEXRGBColor#000000rgb(0,0,0)Đen#808080rgb(128,128,128)Xám#FFFFFFrgb(255,255,255)Trắng

Tự mình thử »


Chữ hoa hay chữ thường?

Bạn có thể sử dụng chữ hoa hoặc chữ thường để chỉ định giá trị thập lục phân

Chữ thường dễ viết hơn. Chữ hoa dễ đọc hơn


Tên màu

CSS hỗ trợ 140 tên màu tiêu chuẩn

Trong chương tiếp theo, bạn sẽ tìm thấy một danh sách tên màu đầy đủ theo thứ tự bảng chữ cái với các giá trị thập lục phân

Tên màuHexColorAliceBlue#F0F8FFAntiqueWhite#FAEBD7Aqua#00FFFFAquamarine#7FFFD4Azure#F0FFFFBeige#F5F5DCBisque#FFE4C4

Máy làm mát. đồng là một công cụ hỗ trợ phân phối màu cực kỳ tiện lợi. Trang web sẽ đặc biệt hữu dụng cho những ai muốn tự tạo nên bảng màu cho riêng mình

Xem video hướng dẫn sử dụng Máy làm mát. co a way chi tiết tại đây

Trước khi vào phần hướng dẫn, điều đầu tiên chúng ta cần biết bảng màu là gì?

Phối màu css


Về cơ bản, Máy làm mát. đồng thời là một công cụ cực kỳ đơn giản, dễ sử dụng. Bạn có thể nhấn phím liên tục để lướt qua các bảng màu khác nhau. Nhấn biểu tượng khóa (khoá) các màu bạn muốn giữ và tiếp tục nhấn phím cách để thay đổi các màu còn lại. Thành quả chính là bảng màu của riêng bạn

Ngoài ra, để khám phá những bảng màu đẹp khác, hãy truy cập vào mục Browser. Tại đây, bạn có thể chọn xem màu thuộc các hạng mục khác nhau như Tốt nhất (Đẹp nhất), Mới nhất (Mới nhất) hay Lựa chọn (Được lựa chọn bởi Nền tảng)

Tuy nhiên, đó chỉ là bức tranh tổng thể. Để có được sự hướng dẫn kỹ lưỡng hơn, mời các bạn cùng Woay khám phá qua một số tính năng và các bước sử dụng của Coolors. đồng ý nhé

Các bước sử dụng


Bước 1. Truy cập vào trang web Coolors. đồng

Bước 2. Click “Start the generator” để bắt đầu

Phối màu css


Bước 3. Design table color

Phối màu css

Xem sắc thái. Khi nhấn vào biểu tượng này, sẽ hiện ra một bảng có các màu liên quan với màu mà bạn chọn, từ sáng nhất tối đa nhất, chúng ta có thể thay thế các màu đó theo ý thích của mình

Phối màu css

Lưu màu vào mục yêu thích. Lưu lại những màu yêu thích của mình bằng cách nhấn vào nút này

Lôi kéo. Với thao tác Kéo, ta có thể chuyển vị trí của các màu qua lại

Sao chép HEX. Sử dụng để sao chép các màu mã, tiện ích lưu trữ và thiết kế trên các nền tảng khác nhau. Ví dụ như có các HEX. 0C0A3E, 7B1E7A, F3C677,

chuyển đổi khóa. Các biểu tượng này có chức năng khá đặc biệt. Khi bạn nhấn giữ vào nút này và tiếp tục nhấn không gian. Màu thuộc tính của nút chưa khóa sẽ thay đổi theo màu chủ đạo của nút đã khóa


In the More of thanh công cụ bạn sẽ có bao gồm.  

Phối màu css

  • Tạo phương pháp (Create method). bao gồm nhiều phương pháp tạo bảng màu khác nhau
  • View luminance map (Xem độ sáng của bảng). Hiện % độ sáng của các màu trong bảng
  • Xem dưới dạng gradient  (Xem bảng màu dưới dạng gradient)
  • Cài đặt. Phần cài đặt có thể giúp thay đổi tên các màu theo nhiều định dạng, cô lập màu và chuyển sang chế độ zen (toàn màn hình)
  • Xem hướng dẫn (Xem hướng dẫn)

Tạo đĩa trên ảnh. Công cụ này giúp chúng tôi có thể chọn màu từ các tấm hình mà chúng tôi tải lên

Phối màu css


Bằng cách nhấn vào từng ô màu hiện tại, rồi kéo ô tròn vào màu ưa thích, sau đó nhấn ‘’Tiếp theo’’, ta có thể thay đổi màu ở các ô màu hiện tại theo màu mình thích.

Create a college (Tạo ảnh ghép). Thông qua nút này, ta có thể tải ảnh lên và thiết kế bố trí, diện mạo và bảng màu cho ảnh đó và ta cũng có thể tải về máy sau khi hoàn thành thiết kế

mù màu. Use to view table color at mù color mode

Điều chỉnh bảng màu. Sử dụng để điều chỉnh bảng màu theo HUE, độ bão hòa, độ sáng và nhiệt độ

Dùng để xem lại các thành phần của bảng màu

Xuất bảng màu

Save table color by account of Coolors. đồng

Tại mục “Explore” ta có thể tìm thấy những bảng màu thiết bị sẵn có và cũng có thể sao chép chúng

Và cuối cùng để tìm hiểu nhiều hơn về Máy làm mát. co ta access to the “More”


Woay là nền tảng thiết kế minigame dành cho doanh nghiệp. Với những tính năng đặc biệt đến từ nền tảng của Woay, doanh nghiệp không cần sở hữu một đội ngũ chuyên viên thiết kế đồ họa chuyên nghiệp để có thể tạo ra một minigame thu hút

Với 66 bảng màu có sẵn, đi kèm cùng 8 tùy chọn Chọn màu nhanh, doanh nghiệp có thể dễ dàng chọn nhanh cho mình những bảng màu tương thích nhất cho vòng quay

Phối màu css
Phối màu css


Tuy nhiên, để có thể tối ưu hóa giao diện tổng quan, liệu chỉ màu vòng quay không đủ. Với Bộ làm mát. đồng thời, bạn hoàn toàn có thể thiết lập nên một bảng màu với nhiều tông màu, sắc độ khác nhau để thuận tiện cho việc kết hợp các yếu tố thiết kế, cũng như phân phối màu cho ảnh nền, biểu ngữ và nhiều chi tiết khác

Dưới đây là một ví dụ minigame thiết kế về “Cửa hàng rau sạch” và cách phân phối bảng màu của Woay. Và để biết rõ hơn về cách thiết kế, bạn hãy truy cập tại đây