Thuộc tính màu trong css

  • Nguyễn Lê Điệp
  • 05-12-2016
  • 201
  • 1
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.
    Các bạn đã từng vào một trang web, các bạn đã thấy trang A toàn màu xanh trang B toàn màu cam. Thì đó chính là quyền lực của giá trị màu trong CSS đang đảm nhiệm. Giá trị màu trong CSS đảm nhiệm như: Màu chữ (color), màu nền (backgroud), màu khung (border) của đường bao hoặc một bảng nào đó. Theo như mình hiểu về cách định dạng màu trong ngành công nghệ thì nó lấy ba màu chủ đạo đó là Red, Green và Blue thì giá trị màu trong CSS cũng không ngoại lệ.

    Các giá trị màu

    Trong CSS theo mình biết và hay dùng thì nó có 4 giá trị màu cơ bản
    Tên gọi Cú pháp
    Hex color #ff00ff
    Short hex color #f0f
    RGB color rgb(100,200,100)
    Tên màu Blue, red,…
     

    Hex color

    Theo như ở bản bên trên thì phần Hex color gồm có 6 chữ số. Như phần mở đầu bài mình đã nói thì ý nghĩa của 6 chữ số đó như sau:
    • Hai chữ số đầu tiên biểu diễn cho giá trị RED
    • Hai chữ số tiếp theo biểu diễn cho giá trị là GREEN
    • Hai chữ số cuối cùng biểu diễn cho giá trị là BLUE
    Để biểu diễn cho mỗi Hex color và phần thuộc tính trong CSS hiểu được thì ta phải kèm theo dấu thăng ở phía trước mỗi dãi Hex color ta có thể theo dõi ở ví dụ bên dưới
    Color Hex color
      #000000
      #0000ff
      #ff0000
      #ff00ff
      #ffff00
      #ffffff

    Short hex color

    Cũng tương tự như phần Hex color. Ở phần Hex color gồm có 6 chữ số thì tương ứng sẽ là: RR, GG, BB. Còn ở Short hex color sẽ là R, G, B có thể nói short hex color là viết tắt của hex color. Ví dụ bạn có hex color là #ff00ff thì short hex color sẽ là #f0f hai giá trị này là như nhau. Chúng ta theo dõi ví dụ bên dưới.
    Color Short Hex color
      #000
      #0ff
      #f00
      #f0f
      #ff0
      #fff

    RGB color

    Với thuộc tính rgb sẽ nhận ba giá trị gồm RED, GREEN và Blue. Giá trị mà thuộc tính rgb nhận vào là một số nguyên.
    Lưu ý: Các trình duyệt hỗ trợ thuộc tính rgb rất kém các bạn không nên sử dụng thuộc tính này. Để hiểu hơn các bạn xem bảng bên dưới
    Color RGB color
      rgb(0,0,0)
      rgb(0,0,255)
      rgb(255,0,0)
      rgb(255,0,255)
      rgb(255,255,0)
      rgb(255,255,255)

    Name color

    Khác hẳn so với ba giá trị màu bên trên giá trị này sẽ nhận với các giá trị là tên màu bằng tiếng anh. Ví dụ như các bạn muốn thuộc tính này màu đỏ thì bạn có thể viết là red. Hiểu rõ hơn với bảng bên dưới
    Color Name color
      black
      blue
      red
      fuchsia
      yellow
      white

    Bảng màu

    Bên dưới mình đã sưu tập có tất cả 276 mã màu các bạn có thể sử dụng. Đảm bảo các mã màu ở bên dưới các máy tính cũng như các trình duyệt của bạn đều hỗ trợ tốt.
    #EEEEEE #DDDDDD #CCCCCC #BBBBBB
    #AAAAAA #999999 #888888 #777777
    #666666 #555555 #444444 #333333
    #222222 #111111 #000000 #FF0000
    #EE0000 #DD0000 #CC0000 #BB0000
    #AA0000 #990000 #880000 #770000
    #660000 #550000 #440000 #330000
    #220000 #110000 #FFFFFF #FFFFCC
    #FFFF99 #FFFF66 #FFFF33 #FFFF00
    #CCFFFF #CCFFCC #CCFF99 #CCFF66
    #CCFF33 #CCFF00 #99FFFF #99FFCC
    #99FF99 #99FF66 #99FF33 #99FF00
    #66FFFF #66FFCC #66FF99 #66FF66
    #66FF33 #66FF00 #33FFFF #33FFCC
    #33FF99 #33FF66 #33FF33 #33FF00
    #00FFFF #00FFCC #00FF99 #00FF66
    #00FF33 #00FF00 #FFCCFF #FFCCCC
    #FFCC99 #FFCC66 #FFCC33 #FFCC00
    #CCCCFF #CCCCCC #CCCC99 #CCCC66
    #CCCC33 #CCCC00 #99CCFF #99CCCC
    #99CC99 #99CC66 #99CC33 #99CC00
    #66CCFF #66CCCC #66CC99 #66CC66
    #66CC33 #66CC00 #33CCFF #33CCCC
    #33CC99 #33CC66 #33CC33 #33CC00
    #00CCFF #00CCCC #33CC66 #33CC33
    #00CC99 #00CC66 #00CC33 #00CC00
    #FF99FF #FF99CC #FF9999 #FF9966
    #FF9933 #FF9900 #CC99FF #CC99CC
    #CC9999 #CC9966 #CC9933 #CC9900
    #9999FF #9999CC #999999 #999966
    #999933 #999900 #6699FF #6699CC
    #669999 #669966 #669933 #669900
    #3399FF #3399CC #339999 #339966
    #339933 #339900 #0099FF #0099CC
    #009999 #009966 #009933 #009900
    #FF66FF #FF66CC #FF6699 #FF6666
    #FF6633 #FF6600 #CC66FF #CC66CC
    #CC6699 #CC6666 #CC6633 #CC6600
    #9966FF #9966CC #996699 #996666
    #996633 #996600 #6666FF #6666CC
    #666699 #666666 #666633 #666600
    #3366FF #3366CC #336699 #336666
    #336633 #336600 #0066FF #0066CC
    #006699 #006666 #006633 #006600
    #FF33FF #FF33CC #FF3399 #FF3366
    #FF3333 #FF3300 #CC33FF #CC33CC
    #CC3399 #CC3366 #CC3333 #CC3300
    #9933FF #9933CC #993399 #993366
    #993333 #993300 #6633FF #6633CC
    #663399 #663366 #663333 #663300
    #3333FF #3333CC #333399 #333366
    #333333 #333300 #0033FF #FF3333
    #0033CC #003399 #003366 #003333
    #003300 #FF00FF #FF00CC #FF0099
    #FF0066 #FF0033 #FF0000 #CC00FF
    #CC00CC #CC0099 #CC0066 #CC0033
    #CC0000 #9900FF #9900CC #990099
    #990066 #990033 #990000 #6600FF
    #6600CC #660099 #660066 #660033
    #660000 #3300FF #3300CC #330099
    #330066 #330033 #330000 #0000FF
    #0000CC #000099 #000066 #000033
    #00FF00 #00EE00 #00DD00 #00CC00
    #00BB00 #00AA00 #009900 #008800
    #007700 #006600 #005500 #004400
    #003300 #002200 #001100 #0000FF
    #0000EE #0000DD #0000CC #0000BB
    #0000AA #000099 #000088 #000077
    #000055 #000044 #000022 #000011

    Từ khóa:

    Thuộc tính màu trong css

    Thuộc tính màu trong css

    Thuộc tính màu trong css

    Thuộc tính màu trong css
    Thuộc tính màu trong css
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Trần Thị Diễn Trần Thị Diễn
    16:56:30 06-12-2016
    X
    S
    Phần RGB mình chưa hiểu lắm ad. Ad có thể giải thích thêm được không ạ?
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    356
    - Hôm qua:
    704
    - Tuần này:
    2.457
    - Tuần trước:
    4.456
    - Tháng này:
    17.080
    - Tháng trước:
    21.317
    - Năm này:
    109.769
    - Năm trước:
    17.373
    - Tổng cộng:
    127.142