[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.
Source link: webdesignernews