20 Bảng màu CSS dành cho nhà phát triển web

[ad_1]

      

Màu sắc là một phần thiết yếu của thiết kế. Và việc lựa chọn bảng màu hoàn hảo là một bước tất cả các nhà thiết kế web, phải trải qua.

Dưới đây là 20 Bảng màu CSS dành cho nhà phát triển web.

Các biến CSS và flexbox được sử dụng.

Được làm bằng

  1
 
 HTML (Pug) / CSS (SCSS) 

Tác giả

Bản trình diễn

   Xem Bút
  Xem trước bộ sưu tập sinh viên
bởi MenSeb (@MenSeb)
  trên CodePen.


Bảng màu với Flexbox.

Được làm bằng

Tác giả

Bản trình diễn

   Xem Bút
  Bảng màu với Flexbox (nghiên cứu 2)
của Linda Labancz (@marlasd daughter)
  trên CodePen.


Bảng màu có thể được sử dụng trong trường hợp sử dụng thực tế.

Được làm bằng

  1
 
 HTML (Pug) / CSS (SCSS) 

Tác giả

Bản trình diễn

   Xem Bút
  Lưới CSS: Bảng màu
của Olivia Ng (@oliviale)
  trên CodePen.


Một bộ sưu tập nhỏ của gradient.

Được làm bằng

  1
 
 HTML (Pug) / CSS (PostCSS) 

Tác giả

Bản trình diễn

   Xem Bút
  Bộ sưu tập Gradient
của Tamino Martinius (@Zaku)
  trên CodePen.


Đã chơi với chế độ hòa trộn để tạo các bộ lọc duotone khác nhau. Sau đó, tôi nghĩ rằng nó có thể là mát mẻ để có một bánh xe chọn tiện dụng để thử các bộ lọc khác nhau. Vì vậy, đây là! Một trình kiểm tra lọc duotone sử dụng các biến CSS. Vòng trong là màu sáng trong khi bên ngoài là màu tối. Để thay đổi màu sắc, hãy điều chỉnh biến màu trong mã Pug.

Được làm bằng

  1
 
 HTML (Pug) / CSS (Bút stylus) / JavaScript 

Tác giả

Bản trình diễn

   Xem Bút
  Lọc duotone w / biến CSS ??
bởi Jhey (@ jh3y)
  trên CodePen.


Bảng màu sử dụng CSS Grid.

Được làm bằng

Tác giả

Bản trình diễn

   Xem Bút
  Bảng màu
của Joshua Ward (@joshuaward)
  trên CodePen.


Thêm / Chỉnh sửa / Xóa màu Hex khỏi mảng để cập nhật bảng màu.

Được làm bằng

  1
 
 CSS (SCSS) / JavaScript 

Tác giả

Bản trình diễn

   Xem Bút
  Định dạng bảng màu tự động
của Tony Banik (@banik)
  trên CodePen.


Trình tạo bảng màu Bootstrap 4 màu. Tạo các biến thể màu từ Bootstrap $ colors i.e: .text-indigo-600 .bg-indigo-600 .border-indigo-600.

Được làm bằng

Tác giả

Bản trình diễn

   Xem Bút
  Trình tạo bảng màu Bootstrap 4
của Gilles Migliori (@migli)
  trên CodePen.


Bảng màu CSS thuần túy.

Được làm bằng

Tác giả

Bản trình diễn

   Xem Bút
  Bảng màu
của Joshua Ward (@joshuaward)
  trên CodePen.


Bảng màu với hộp flex CSS.

Được làm bằng

Tác giả

Bản trình diễn

   Xem Bút
  Flexbox – Bảng màu
của Diana Choi (@dianachoi)
  trên CodePen.


Bánh xe màu với HTML, CSS và JavaScript.

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  Bánh xe màu
của Jake Weary (@thepheer)
  trên CodePen.


Vòng tròn là vòng tròn SVG lồng nhau. Chúng được tạo bởi các vòng Jade (để điều chỉnh dễ dàng). Flexbox xếp chúng thành một hàng chẵn. Chúng được tô màu thông qua các bảng màu từ API COLOURlovers.

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  Vòng tròn bảng màu
của Chris Coyier (@chriscoyier)
  trên CodePen.


Bảng màu với các sắc thái trong HTML, CSS và JavaScript. Bảng màu: Windows Phone, Dự án máy tính để bàn Tango, Fedora, Open Suse, Jack Production, iOs 7, Pantone Spring 2016.

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  Bảng màu với sắc thái
của Alessandro (@afranceschetti)
  trên CodePen.


Tìm kiếm màu Pantone với clipboard trong HTML, CSS và JavaScript.

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  Tìm kiếm màu Vue Pantone + Clipboard
của Mike Weaver (@ mjweaver01)
  trên CodePen.


Đã thêm khả năng chuyển đổi giữa màu nền sáng và tối.

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  Trình tạo bảng màu ngẫu nhiên
bởi Giana (@giana)
  trên CodePen.


Nhấp vào nút để xem bảng màu ngẫu nhiên.

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  Bảng màu
của Screeny (@ screeny05)
  trên CodePen.


Nhấp vào mã màu để thay đổi màu!

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  bảng màu
của Philipp (@phbo)
  trên CodePen.


Công cụ này sẽ cho phép bạn thả hình ảnh và tạo các bảng màu từ 100 màu hàng đầu của nó (theo diện tích bề mặt) và xuất ra để sử dụng trong CSS, iOS (Objective-C & Swift), Android (Java), v.v.

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  Tạo bảng màu từ một hình ảnh
bởi Blixt (@blixt)
  trên CodePen.


Cây bút này là phiên bản HTML / CSS của Bảng màu rê bóng Flattastic Pro của Erigon.

Được làm bằng

Tác giả

Bản trình diễn

   Xem Bút
  Bảng màu Flattastic Pro
của Marcos Coleues (@rodriguesmarcos)
  trên CodePen.


Các mẫu màu với các giá trị hex khi nhấp, được chọn chủ động và có sẵn để sao chép.

Được làm bằng

  1
  2
  3
 
 Html
Css / SCSS
Javascript 

Tác giả

Bản trình diễn

   Xem Bút
  Bảng màu
của Louis Coyle (@dropside)
  trên CodePen.

    

[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.