Cách sử dụng mã màu Hex trong CSS

Mã màu hex là phương pháp phổ biến nhất để thêm màu vào phần tử HTML bằng CSS. Trong biểu định kiểu của mình, bạn có thể sử dụng thuộc tính màu CSS để thay đổi màu mặc định của văn bản trên trang web của mình

CSS
/* In your .css stylesheet */
body { color: #FF0000; }

A second option is to include the CSS styles right in the of your HTML document using

Dễ dàng, phải không? . Lên cơn điên

Cách sử dụng tên màu HTML trong CSS

Tên màu HTML là một cách khác để tạo kiểu cho nội dung của bạn trong CSS và thường dễ hiểu hơn. Bạn có thể sử dụng tên màu theo cách giống như mã màu Hex, đặt nó làm giá trị cho thuộc tính màu CSS trong biểu định kiểu của bạn

CSS
/* In your .css stylesheet */
body { color: red; }

Hiện tại, 140 tên màu được hỗ trợ trên tất cả các trình duyệt hiện đại và chúng tôi đã tập hợp một danh sách đẹp về tất cả chúng ở đây để tham khảo nhanh

Cách sử dụng các giá trị màu RGB trong CSS

RGB, viết tắt của Red, Green và Blue, là một hệ màu thường thấy trong nhiều ứng dụng và công nghệ thiết kế, và gần đây đã trở thành lựa chọn phù hợp cho các nhà thiết kế web cũng như lập trình viên. Trong CSS, màu RGB có thể được sử dụng bằng cách gói các giá trị trong dấu ngoặc đơn và đặt trước chúng bằng chữ thường 'rgb'

CSS
/* In your .css stylesheet */
body { color: rgb(255, 0, 0); }

Một trong những lợi ích của việc sử dụng RGB trong CSS của bạn là khả năng kiểm soát độ mờ bên cạnh màu sắc. Việc thêm 'a' vào tiền tố rgb() cho phép gán giá trị thứ tư xác định độ trong suốt của màu trên thang điểm từ 0 đến 1. Trong ví dụ này, văn bản trang HTML sẽ hiển thị ở độ mờ 50% kể từ 0. 5 nằm giữa 0 và 1

CSS
/* In your .css stylesheet */
body { color: rgba(255, 0, 0, 0.5); }

Nếu bạn muốn sử dụng RGB nhưng không biết bắt đầu từ đâu, hãy xem bộ chọn màu của chúng tôi để tạo nhanh một số mã màu

Cách sử dụng giá trị màu HSL trong CSS

Bạn có thể đã nghe nói về HSL, viết tắt của Hue, Saturation và Lightness, một hệ màu khác được sử dụng trong nhiều ứng dụng. Hue được đo bằng độ từ 0 – 360, trong khi Saturation và Lightness sử dụng thang đo từ 0% – 100%. Trong CSS, HSL có thể dễ dàng triển khai theo cú pháp tương tự như RGB nhưng thay vào đó là tiền tố 'hsl'

CSS
/* In your .css stylesheet */
body { color: hsl(0, 100%, 50%); }

Tương tự, HSL cũng hỗ trợ kênh alpha để kiểm soát độ trong suốt của màu. Việc sử dụng nó giống với RGB, với giá trị thứ tư nằm trong khoảng từ 0 đến 1 được bật khi sử dụng tiền tố 'hsla'

CSS
/* In your .css stylesheet */
body { color: hsla(0, 100%, 50%, 0.5); }

Lưu ý, rgba(), hsl() và hsla() là những bổ sung tương đối mới cho CSS và không được một số trình duyệt cũ hỗ trợ. Tùy thuộc vào tình huống của bạn, bạn có thể muốn chọn các phương pháp khác nhau để điều chỉnh độ mờ của màu sắc

Kiểu dữ liệu CSS

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65  

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Một

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65  

• Sử dụng một từ khóa (chẳng hạn như

   = 
      |
    currentcolor           |
             
  
   = 
                    |
      |
                  |
    transparent                
  
   = 
        |
       |
        |
       |
        |
        |
        |
      |
      |
      
  
   = 
    rgb( [  | none ]{3} [ / [  | none ] ]? )  |
    rgb( [  | none ]{3} [ / [  | none ] ]? )  
  
   = 
    hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    color(  [ / [  | none ] ]? )  
  
   = 
          |
      
  
   = 
      |
       
  
   = 
      |
                 
  
   = 
     [  |  | none ]{3}  
  
   = 
     [  |  | none ]{3}  
  
   = 
    srgb          |
    srgb-linear   |
    display-p3    |
    a98-rgb       |
    prophoto-rgb  |
    rec2020       
  
   = 
    xyz      |
    xyz-d50  |
    xyz-d65  
  
  

  3 hoặc

   = 
      |
    currentcolor           |
             
  
   = 
                    |
      |
                  |
    transparent                
  
   = 
        |
       |
        |
       |
        |
        |
        |
      |
      |
      
  
   = 
    rgb( [  | none ]{3} [ / [  | none ] ]? )  |
    rgb( [  | none ]{3} [ / [  | none ] ]? )  
  
   = 
    hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    color(  [ / [  | none ] ]? )  
  
   = 
          |
      
  
   = 
      |
       
  
   = 
      |
                 
  
   = 
     [  |  | none ]{3}  
  
   = 
     [  |  | none ]{3}  
  
   = 
    srgb          |
    srgb-linear   |
    display-p3    |
    a98-rgb       |
    prophoto-rgb  |
    rec2020       
  
   = 
    xyz      |
    xyz-d50  |
    xyz-d65  
  
  

  4). Tất cả các từ khóa hiện có chỉ định một màu trong không gian màu sRGB
• Sử dụng hệ thống (thông qua #-thập lục phân hoặc ký hiệu chức năng

   = 
      |
    currentcolor           |
             
  
   = 
                    |
      |
                  |
    transparent                
  
   = 
        |
       |
        |
       |
        |
        |
        |
      |
      |
      
  
   = 
    rgb( [  | none ]{3} [ / [  | none ] ]? )  |
    rgb( [  | none ]{3} [ / [  | none ] ]? )  
  
   = 
    hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    color(  [ / [  | none ] ]? )  
  
   = 
          |
      
  
   = 
      |
       
  
   = 
      |
                 
  
   = 
     [  |  | none ]{3}  
  
   = 
     [  |  | none ]{3}  
  
   = 
    srgb          |
    srgb-linear   |
    display-p3    |
    a98-rgb       |
    prophoto-rgb  |
    rec2020       
  
   = 
    xyz      |
    xyz-d50  |
    xyz-d65  
  
  

  5 và

   = 
      |
    currentcolor           |
             
  
   = 
                    |
      |
                  |
    transparent                
  
   = 
        |
       |
        |
       |
        |
        |
        |
      |
      |
      
  
   = 
    rgb( [  | none ]{3} [ / [  | none ] ]? )  |
    rgb( [  | none ]{3} [ / [  | none ] ]? )  
  
   = 
    hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    color(  [ / [  | none ] ]? )  
  
   = 
          |
      
  
   = 
      |
       
  
   = 
      |
                 
  
   = 
     [  |  | none ]{3}  
  
   = 
     [  |  | none ]{3}  
  
   = 
    srgb          |
    srgb-linear   |
    display-p3    |
    a98-rgb       |
    prophoto-rgb  |
    rec2020       
  
   = 
    xyz      |
    xyz-d50  |
    xyz-d65  
  
  

  6). Chúng luôn chỉ định một màu trong không gian màu sRGB
• Sử dụng hệ tọa độ trụ HSL (thông qua các ký hiệu chức năng

   = 
      |
    currentcolor           |
             
  
   = 
                    |
      |
                  |
    transparent                
  
   = 
        |
       |
        |
       |
        |
        |
        |
      |
      |
      
  
   = 
    rgb( [  | none ]{3} [ / [  | none ] ]? )  |
    rgb( [  | none ]{3} [ / [  | none ] ]? )  
  
   = 
    hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    color(  [ / [  | none ] ]? )  
  
   = 
          |
      
  
   = 
      |
       
  
   = 
      |
                 
  
   = 
     [  |  | none ]{3}  
  
   = 
     [  |  | none ]{3}  
  
   = 
    srgb          |
    srgb-linear   |
    display-p3    |
    a98-rgb       |
    prophoto-rgb  |
    rec2020       
  
   = 
    xyz      |
    xyz-d50  |
    xyz-d65  
  
  

  7 và

   = 
      |
    currentcolor           |
             
  
   = 
                    |
      |
                  |
    transparent                
  
   = 
        |
       |
        |
       |
        |
        |
        |
      |
      |
      
  
   = 
    rgb( [  | none ]{3} [ / [  | none ] ]? )  |
    rgb( [  | none ]{3} [ / [  | none ] ]? )  
  
   = 
    hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    color(  [ / [  | none ] ]? )  
  
   = 
          |
      
  
   = 
      |
       
  
   = 
      |
                 
  
   = 
     [  |  | none ]{3}  
  
   = 
     [  |  | none ]{3}  
  
   = 
    srgb          |
    srgb-linear   |
    display-p3    |
    a98-rgb       |
    prophoto-rgb  |
    rec2020       
  
   = 
    xyz      |
    xyz-d50  |
    xyz-d65  
  
  

  8). Chúng luôn chỉ định một màu trong không gian màu sRGB
• Sử dụng hệ tọa độ trụ HWB (thông qua ký hiệu chức năng

   = 
      |
    currentcolor           |
             
  
   = 
                    |
      |
                  |
    transparent                
  
   = 
        |
       |
        |
       |
        |
        |
        |
      |
      |
      
  
   = 
    rgb( [  | none ]{3} [ / [  | none ] ]? )  |
    rgb( [  | none ]{3} [ / [  | none ] ]? )  
  
   = 
    hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  
  
   = 
    oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  
  
   = 
    color(  [ / [  | none ] ]? )  
  
   = 
          |
      
  
   = 
      |
       
  
   = 
      |
                 
  
   = 
     [  |  | none ]{3}  
  
   = 
     [  |  | none ]{3}  
  
   = 
    srgb          |
    srgb-linear   |
    display-p3    |
    a98-rgb       |
    prophoto-rgb  |
    rec2020       
  
   = 
    xyz      |
    xyz-d50  |
    xyz-d65  
  
  

  9). Chúng luôn chỉ định một màu trong không gian màu sRGB
• Sử dụng , thông qua ký hiệu chức năng

  HTML
  
  
    
  
  

  70. Điều này có thể chỉ định bất kỳ màu nào có thể nhìn thấy
• Sử dụng hệ tọa độ Lab, thông qua ký hiệu chức năng

  HTML
  
  
    
  
  

  71. Điều này có thể chỉ định bất kỳ màu nào có thể nhìn thấy
• Sử dụng ký hiệu chức năng

  HTML
  
  
    
  
  

  72, để chỉ định một màu trong nhiều không gian màu được xác định trước hoặc tùy chỉnh

Ghi chú. Bài viết này mô tả chi tiết về kiểu dữ liệu

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65  

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65  

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65  

HTML


  

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65  

HTML


  

HTML


  

CSS
/* In your .css stylesheet */
body { color: red; }

CSS
/* In your .css stylesheet */
body { color: red; }

CSS
/* In your .css stylesheet */
body { color: red; }

CSS
/* In your .css stylesheet */
body { color: red; }

CSS
/* In your .css stylesheet */
body { color: red; }

CSS
/* In your .css stylesheet */
body { color: red; }

CSS
/* In your .css stylesheet */
body { color: rgb(255, 0, 0); }

CSS
/* In your .css stylesheet */
body { color: red; }

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65  

 = 
    |
  currentcolor           |
           

 = 
                  |
    |
                |
  transparent                

 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
    

 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )  

 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )  

 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )  

 = 
  color(  [ / [  | none ] ]? )  

 = 
        |
    

 = 
    |
     

 = 
    |
               

 = 
   [  |  | none ]{3}  

 = 
   [  |  | none ]{3}  

 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

 = 
  xyz      |
  xyz-d50  |
  xyz-d65