From afc0a1d927e59ee4f30ad3dcbec40e85785ff188 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 12 Sep 2023 17:53:19 +0800 Subject: [PATCH] chore: update blog style --- docs/blog/color-picker.en-US.md | 18 ++++++++++++------ docs/blog/color-picker.zh-CN.md | 18 ++++++++++++------ 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/docs/blog/color-picker.en-US.md b/docs/blog/color-picker.en-US.md index afa9040e9f..1a2332ab36 100644 --- a/docs/blog/color-picker.en-US.md +++ b/docs/blog/color-picker.en-US.md @@ -14,17 +14,17 @@ Before we start implementing, we need to understand a concept: color models. A c The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 2563 colors. These colors can form a cube, as shown in the following figure: ![RGB](https://user-images.githubusercontent.com/21119589/266228482-f1ff94b1-e7ca-40c5-8512-1bc5ab79c388.jpg) -In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `(255, 0, 0)`, green can be represented as `(0, 255, 0)`, and blue can be represented as `(0, 0, 255)`. +In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as RGB(255, 0, 0), green can be represented as RGB(0, 255, 0), and blue can be represented as RGB(0, 0, 255). ### HSV/HSB Color Model The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: ![HSV](https://user-images.githubusercontent.com/21119589/266231236-d68ad9d7-9654-4bc5-8489-7cc52f2aabb1.png) -In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `(0, 100, 100)`, green can be represented as `(120, 100, 100)`, and blue can be represented as `(240, 100, 100)`. +In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as HSV(0, 100, 100), green can be represented as HSV(120, 100, 100), and blue can be represented as HSV(240, 100, 100). ### HEX Color Model -The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png) +The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as #FF0000, green can be represented as #00FF00, and blue can be represented as #0000FF. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png) This is also the most common way of representing colors because it can be used directly in CSS. Moreover, the representation is very simple, just convert the three numbers in the RGB color model to hexadecimal numbers. @@ -52,7 +52,9 @@ Since we are using the `HSV` color model, we need to represent hue, saturation, background-color: rgb(0, 106, 255); ``` -This way we get a blue color with both saturation and brightness set to 100% +This way we get a blue color with both saturation and brightness set to 100% + +
2. Add brightness overlay @@ -61,7 +63,9 @@ background-color: rgb(0, 106, 255); background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent); ``` -After adding the brightness overlay, we get a blue color with brightness variation +After adding the brightness overlay, we get a blue color with brightness variation + +
3. Add saturation overlay @@ -70,7 +74,9 @@ background-color: rgb(0, 106, 255); background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0)); ``` -After adding the saturation overlay, we get a blue color with brightness variation +After adding the saturation overlay, we get a blue color with brightness variation + +
So far, we have obtained a color panel with complete hue, saturation, and brightness. diff --git a/docs/blog/color-picker.zh-CN.md b/docs/blog/color-picker.zh-CN.md index 98eaf63372..7fbec024ba 100644 --- a/docs/blog/color-picker.zh-CN.md +++ b/docs/blog/color-picker.zh-CN.md @@ -14,17 +14,17 @@ author: Redjue `RGB` 色彩模型是通过三原色（红、绿、蓝）的不同组合来表示色彩的，每个原色的取值范围是 0-255，三原色的组合可以表示 2563 种颜色，这些颜色可以组成一个立方体，如下图所示： ![RGB](https://user-images.githubusercontent.com/21119589/266228482-f1ff94b1-e7ca-40c5-8512-1bc5ab79c388.jpg) -在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `(255, 0, 0)`，绿色可以表示为 `(0, 255, 0)`，蓝色可以表示为 `(0, 0, 255)`。 +在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 RGB(255, 0, 0)，绿色可以表示为 RGB(0, 255, 0)，蓝色可以表示为 RGB(0, 0, 255)。 ### HSV/HSB 色彩模型 `HSV` 色彩模型是通过色相（Hue）、饱和度（Saturation）、明度（Value）来表示色彩的，其中色相的取值范围是 0-360，饱和度和明度的取值范围是 0-100。HSV 色彩模型可以用一个圆锥体来表示，如下图所示： ![HSV](https://user-images.githubusercontent.com/21119589/266231236-d68ad9d7-9654-4bc5-8489-7cc52f2aabb1.png) -在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `(0, 100, 100)`，绿色可以表示为 `(120, 100, 100)`，蓝色可以表示为 `(240, 100, 100)`。 +在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 HSV(0, 100, 100)，绿色可以表示为 HSV(120, 100, 100)，蓝色可以表示为 HSV(240, 100, 100)。 ### HEX 色彩模型 -`HEX` 色彩模型是通过十六进制数来表示色彩的，其中前两位表示红色的取值，中间两位表示绿色的取值，后两位表示蓝色的取值。例如，红色可以表示为 `#FF0000`，绿色可以表示为 `#00FF00`，蓝色可以表示为 `#0000FF`。如下图所示： ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png) +`HEX` 色彩模型是通过十六进制数来表示色彩的，其中前两位表示红色的取值，中间两位表示绿色的取值，后两位表示蓝色的取值。例如，红色可以表示为 #FF0000，绿色可以表示为 #00FF00，蓝色可以表示为 #0000FF。如下图所示： ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png) 这也是我们最常见的颜色表示方式，因为它可以直接在 CSS 中使用。而且表示方式非常简单，只需要将 RGB 色彩模型中的三个数字转换为十六进制数即可。 @@ -52,7 +52,9 @@ author: Redjue background-color: rgb(0, 106, 255); ``` -这样我们就得到一个明度和饱和度都为 100% 的蓝色 +这样我们就得到一个明度和饱和度都为 100% 的蓝色 + +
2. 叠加明度 @@ -61,7 +63,9 @@ background-color: rgb(0, 106, 255); background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent); ``` -叠加明度图层后，我们得到了具有明度变化的蓝色 +叠加明度图层后，我们得到了具有明度变化的蓝色 + +
3. 叠加饱和度 @@ -70,7 +74,9 @@ background-color: rgb(0, 106, 255); background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0)); ``` -叠加饱和度图层后，我们得到了具有明度变化和饱和度变化的蓝色 +叠加饱和度图层后，我们得到了具有明度变化和饱和度变化的蓝色 + +
至此我们就得到了一个拥有完整色相、饱和度、明度的颜色面板。