Home >Operation and Maintenance >Nginx >Make web-safe colors using Bash
Make web-safe colors using Bash
- WBOYforward
- 2023-07-07 18:54:081555browse
When computer monitors have a limited color palette, web designers often use a set of web-safe colors to create websites. Although modern websites displayed on newer devices can display more colors than the original web-safe palette, I sometimes like to refer to web-safe colors when creating web pages. This way I know my page will look good everywhere.
You can find web safe palettes online, but I wanted to have my own copy for easy reference. You can also create one using a for loop in Bash.
Bash for loop
The syntax of the for loop in Bash is as follows:
for 变量 in 集合 ; do 语句 ; done
For example, suppose you want to print all numbers from 1 to 3. You can quickly write a for loop on the Bash command line to do the job for you:
$ for n in 1 2 3 ; do echo $n ; done123
The semicolon is the standard Bash statement delimiter. They allow you to write multiple commands in one line. If you were to include this for loop in a Bash script file, you could replace the semicolons with newlines and write the for loop like this:
for n in 1 2 3doecho $ndone
I like it Putting do and for on the same line makes it easier for me to read:
for n in 1 2 3 ; doecho $ndone
Multiple for loops at once
You can put a loop Put in another loop. This helps you iterate over multiple variables and do more than one thing at a time. Suppose you want to print out all combinations of the letters A, B, and C with the numbers 1, 2, and 3. You can do this in Bash using two for loops, like this:
#!/bin/bashfor number in 1 2 3 ; dofor letter in A B C ; doecho $letter$numberdonedone
If you put these lines in a Bash script called for.bash file and run it, you'll see nine lines showing all combinations of letters paired with each number:
$ bash for.bashA1B1C1A2B2C2A3B3C3
Traverse Web Safe Colors
Web safe colors are derived from hex Colors #000 (black, where red, green, and blue are all zero) to #fff (white, where red, green, and blue are all highest), each The steps for hexadecimal values are 0, 3, 6, 9, c, and f.
You can generate a list of all combinations of web-safe colors using three for loops in Bash, which loop over the red, green, and blue values.
#!/bin/bashfor r in 0 3 6 9 c f ; dofor g in 0 3 6 9 c f ; dofor b in 0 3 6 9 c f ; doecho "#$r$g$b"donedonedone
If you save this in a new Bash script called websafe.bash and run it, you'll see an iteration of the hex values for all the web-safe colors:
$ bash websafe.bash | head#000#003#006#009#00c#00f#030#033#036#039
要制作可用作 Web 安全颜色参考的 HTML 页面，你需要使每个条目成为一个单独的 HTML 元素。将每种颜色放在一个 <div> 元素中，并将背景设置为 Web 安全颜色。为了使十六进制值更易于阅读，将其放在单独的 <code> 元素中。将 Bash 脚本更新为如下：
#!/bin/bashfor r in 0 3 6 9 c f ; dofor g in 0 3 6 9 c f ; dofor b in 0 3 6 9 c f ; doecho "<div style='background-color:#$r$g$b'><code>#$r$g$b</code></div>"donedonedone
当你运行新的 Bash 脚本并将结果保存到 HTML 文件时，你可以在浏览器中查看所有 Web 安全颜色的输出：
$ bash websafe.bash > websafe.html
Colour gradient.
这个网页不是很好看。深色背景上的黑色文字无法阅读。我喜欢使用HTML样式，以确保在颜色矩形上以白色文本显示十六进制值，并且背景为黑色。我使用了HTML网格样式将每行六个框进行排列，并为了美观效果，在框之间留有适当的间距。
你需要在循环之前和之后包含其他的HTML元素来添加额外的样式。在顶部的HTML代码中定义样式，并在底部的HTML代码中关闭所有已打开的HTML标签
#!/bin/bashcat<<EOF<!DOCTYPE html><html lang="en"><head><title>Web-safe colors</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>div {padding-bottom: 1em;}code {background-color: black;color: white;}@media only screen and (min-width:600px) {body {display: grid;grid-template-columns: repeat(6,1fr);column-gap: 1em;row-gap: 1em;}div {padding-bottom: 3em;}}</style></head></body>EOFfor r in 0 3 6 9 c f ; dofor g in 0 3 6 9 c f ; dofor b in 0 3 6 9 c f ; doecho "<divstyle='background-color:#$r$g$b'><code>#$r$g$b</code></div>"donedonedonecat<<EOF</body></html>EOF
这个完整的Bash脚本生成了一个用HTML格式制作的Web安全颜色指南。当需要引用网络安全颜色时，运行脚本并将结果保存至 HTML 页面。你可以在浏览器中查看 Web 安全颜色演示，以作为你下一个 Web 项目的简单参考
$ bash websafe.bash > websafe.html
（题图：MJ/abf9daf2-b72f-4929-8dd8-b77fb5b9d39b）
The above is the detailed content of Make web-safe colors using Bash. For more information, please follow other related articles on the PHP Chinese website!