Các loại màu sắc trong css là gì?

Sử dụng công cụ chọn màu hoặc biểu đồ màu sau để chọn màu mà bạn có thể sử dụng trong mã CSS của mình. Bộ chọn màu cung cấp các giá trị màu ở hệ thập lục phân và RGB. Biểu đồ màu cung cấp chúng ở dạng thập lục phân, RGB và tên màu của chúng

Bộ chọn màu

◯

◯

#
R H
GS.
B V

lục giác

RGB

HSL

HSV

CTNH

CMYK

Chọn nhiều màu

So sánh tối đa 3 màu. Bấm vào một trường bên dưới, sau đó chọn một màu từ bộ chọn màu. Thử nó

Màu CSS cơ bản

Đây là bảng các tên màu cơ bản đã có trong CSS kể từ CSS1 (ngoại trừ màu cam, được thêm vào trong CSS 2. 1)

Hãy thử nhấp vào một giá trị. Thao tác này sẽ mở màu trong trình chỉnh sửa trực tuyến của Quackit để bạn có thể xem nó trông như thế nào (và lấy mã). Ngoài ra còn có một liên kết đến trình kiểm tra màu nơi bạn có thể xem trước màu khác

Tên màu Mã Hex
Mã thập phân RGB
RGBMaroon800000128,0,0RedFF0000255,0,0OrangeFFA500255,165,0YellowFFFF00255,255,0Olive808000128,128,0Green0080000,128,0Tên màu Mã Hex
Mã thập phân RGB
RGBPurple800080128,0,128FuchsiaFF00FF255,0,255Lime00FF000,255,0Teal0080800,128,128Aqua00FFFF0,255,255Blue0000FF0,0,255Tên màu Mã hex
Mã thập phân RGB
RGBNavy0000800,0,128Đen0000000,0,0Xám808080128,128,128BạcC0C0C0192,192,192TrắngFFFFFF255,255,255

Tên màu CSS

Dưới đây là danh sách đầy đủ các màu được đặt tên CSS như được chỉ định trong CSS3 (Mô-đun màu CSS cấp 4). Chúng dựa trên bộ màu X11. Các màu cơ bản trên cũng có trong chart này

Hãy thử nhấp vào một giá trị. Thao tác này sẽ mở màu trong trình chỉnh sửa trực tuyến của Quackit để bạn có thể xem nó trông như thế nào (và lấy mã). Ngoài ra còn có một liên kết đến trình kiểm tra màu nơi bạn có thể xem trước màu khác

Tên màu Mã Hex
Mã thập phân RGB
RGBRedsIndianRedCD5C5C205,92,92LightCoralF08080240,128,128SalmonFA8072250,128,114DarkSalmonE9967A233,150,122LightSalmonFFA07A255,160,122CrimsonDC143C220,20,60RedFF0000255,0,0FireBrickB22222178,34,34DarkRed8B0000139,0,0PinksPinkFFC0CB255,192,203LightPinkFFB6C1255,182,193HotPinkFF69B4255,105,180DeepPinkFF1493255,20,147MediumVioletRedC71585199,21,133PaleVioletRedDB7093219,112,147
Mã thập phân RGB
RGBGreensGreenYellowADFF2F173,255,47Chartreuse7FFF00127,255,0LawnGreen7CFC00124,252,0Lime00FF000,255,0LimeGreen32CD3250,205,50PaleGreen98FB98152,251,152LightGreen90EE90144,238,144MediumSpringGreen00FA9A0,250,154SpringGreen00FF7F0,255,127MediumSeaGreen3CB37160,179,113SeaGreen2E8B5746,139,87ForestGreen228B2234,139,34Green0080000,128,0DarkGreen0064000,100
Mã thập phân RGB
RGBBrownsCornsilkFFF8DC255,248,220BlanchedAlmondFFEBCD255,235,205BisqueFFE4C4255,228,196NavajoWhiteFFDEAD255,222,173WheatF5DEB3245,222,179BurlyWoodDEB887222,184,135TanD2B48C210,180,140RosyBrownBC8F8F188,143,143SandyBrownF4A460244,164,96GoldenrodDAA520218,165,32DarkGoldenrodB8860B184,134,11PeruCD853F205,133,63ChocolateD2691E210,105,30SaddleBrown8B4513139,69,19SiennaA0522D160,

Thêm bảng màu

Cách sử dụng các Màu này

Mỗi màu có thể được thể hiện theo nhiều cách khác nhau. Ví dụ: blue cũng có thể được biểu diễn dưới dạng #0000ff, #00f, rgb(0,0,255) và nhiều cách khác. Không quan trọng bạn chọn màu nào miễn là đó là màu hợp lệ

Bạn có thể áp dụng bất kỳ màu nào trong số này cho trang web hoặc blog bằng cách sử dụng mã CSS có liên quan

• Để đặt màu nền, hãy sử dụng background-color
• Để đặt màu văn bản, hãy sử dụng color
• Để đặt màu đường viền, hãy sử dụng border-color

Lấy blue làm ví dụ

Dưới đây là các ví dụ mã CSS nhanh để áp dụng màu này cho các phần tử HTML khác nhau

Kiểm tra một số ví dụ về mã màu cơ bản sử dụng tên màu trong trình chỉnh sửa trực tuyến

Tên màu không phân biệt chữ hoa chữ thường (không quan trọng bạn sử dụng chữ HOA hay chữ thường)

Vì vậy, blue, Blue và #0000ff0 đều hiển thị cùng một màu

Trong ký hiệu thập lục phân

Đây là màu tương tự, nhưng lần này sử dụng ký hiệu thập lục phân thay vì tên màu

Vậy mã màu bây giờ là #0000ff1

Điều này cần phải được bắt đầu bằng một ký hiệu băm, vì vậy nó sẽ trở thành #0000ff khi được viết trong mã

Kiểm tra một số ví dụ về mã màu cơ bản bằng cách sử dụng các giá trị thập lục phân trong trình chỉnh sửa trực tuyến

Màu hex không phân biệt chữ hoa chữ thường (không quan trọng bạn sử dụng chữ HOA hay chữ thường)

Vì vậy, cả #0000ff1 và #0000ff4 đều hiển thị cùng một màu

Trong ký hiệu chức năng RGB

Đây là cùng một màu, nhưng lần này sử dụng ký hiệu chức năng RGB

Vậy mã màu bây giờ là #0000ff5. Điều này cần được đặt bên trong hàm #0000ff6, vì vậy nó sẽ giống như thế này rgb(0,0,255)

Kiểm tra một số ví dụ về mã màu cơ bản sử dụng ký hiệu chức năng RGB trong trình chỉnh sửa trực tuyến

Ví dụ toàn trang

Dưới đây là một ví dụ về nơi mã màu CSS có thể phù hợp với tài liệu HTML

Thử nó

Ví dụ này sử dụng biểu định kiểu nhúng. Bạn cũng có thể di chuyển các kiểu sang biểu định kiểu bên ngoài để bạn có thể áp dụng các kiểu trên toàn bộ trang web từ một tệp

Màu trong suốt

CSS cũng cho phép chúng tôi thêm các màu trong suốt vào các phần tử HTML của chúng tôi. Điều này có nghĩa là bạn có thể thêm một màu bán trong suốt — để bạn có thể nhìn thấy thành phần phía sau màu đó

Đây là một ví dụ về việc thêm độ trong suốt cho một màu bằng cách sử dụng hàm #0000ff8

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Danh sách giá trị màu

Đây là danh sách các giá trị màu bạn có thể sử dụng với CSS

Danh sách thuộc tính màu

Đây là danh sách các thuộc tính liên quan đến màu sắc mà bạn có thể sử dụng với CSS

Màu an toàn trên web

Biểu đồ này hiển thị 216 màu "an toàn trên web". Bấm vào một màu để hiển thị nó trong một trang mới

Với các màn hình ngày nay có thể hiển thị hàng triệu màu, bạn không cần phải sử dụng các màu an toàn trên web nữa. Nhưng đó là một cách tuyệt vời để chọn một số màu cơ bản đẹp và nhanh chóng. Và này, nó vẫn là một biểu đồ đẹp

Có bao nhiêu loại màu trong CSS?

Các loại màu được hỗ trợ bởi CSS là gì?

Mã màu trong CSS là gì?

3 cách màu CSS được chỉ định là gì?