Skip to content

Commit 30ff3ce

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #107 from codeharborhub/dev-1
Done colors task in css
2 parents 6cb7697 + 9c593ea commit 30ff3ce

File tree

6 files changed

+630
-6
lines changed

6 files changed

+630
-6
lines changed

‎docs/css/colors/color-names.mdx‎

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,85 @@
1-
<ComingSoon />
1+
---
2+
title: "CSS Color Keywords (Names)"
3+
description: "Learn how to use simple, named CSS Color Keywords to set colors for text and backgrounds, and understand their history and limitations compared to numerical color models."
4+
keywords: [CSS color names, color keywords, web safe colors, named colors, color values, CodeHarborHub]
5+
tags: [CSS color names, color keywords, web safe colors, named colors, color values]
6+
sidebar_label: Color Keywords
7+
---
8+
9+
The simplest way to specify a color in CSS is by using a **Color Keyword** (or **Color Name**). These are plain English names that represent a specific, predefined numerical color value (like a HEX code).
10+
11+
Using color keywords is convenient for quick styling, prototyping, and when you need basic, well-known colors.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## The Syntax
17+
18+
To use a color keyword, you simply provide the name as the value for properties like `color` or `background-color`.
19+
20+
```css title="styles.css"
21+
/* Sets the background to a light cyan color */
22+
.header-box {
23+
background-color: aquamarine;
24+
}
25+
26+
/* Sets the text color to dark blue */
27+
.title {
28+
color: darkblue;
29+
}
30+
```
31+
32+
## Standard and Extended Color Names
33+
34+
CSS supports two main groups of color names:
35+
36+
### 1. The 16 Basic VGA Colors
37+
38+
Historically, CSS adopted the original 16 colors from the standard VGA palette. These are guaranteed to be recognized by every browser and system.
39+
40+
| Color Name | HEX Code | Example |
41+
| :--- | :--- | :--- |
42+
| `black` | `#000000` | Black |
43+
| `white` | `#FFFFFF` | White |
44+
| `red` | `#FF0000` | Red |
45+
| `blue` | `#0000FF` | Blue |
46+
| `lime` | `#00FF00` | Lime |
47+
| `yellow` | `#FFFF00` | Yellow |
48+
| `gray` | `#808080` | Gray |
49+
| `fuchsia` | `#FF00FF` | Fuchsia |
50+
| ...and 8 others | | |
51+
52+
### 2. Extended Color Keywords (Over 140 Names)
53+
54+
The list of color names has been extended to over 140, covering a much wider range of hues and shades (e.g., `cornflowerblue`, `darkslategray`, `lightcoral`).
55+
56+
| Example Name | HEX Code | Color Example |
57+
| :--- | :--- | :--- |
58+
| `skyblue` | `#87CEEB` | Sky Blue |
59+
| `gold` | `#FFD700` | Gold |
60+
| `rebeccapurple` | `#663399` | Rebecca Purple |
61+
| `peru` | `#CD853F` | Peru |
62+
63+
:::info New Keyword: `rebeccapurple`
64+
The color `rebeccapurple` was officially added to CSS in 2014 to honor web developer and designer Rebecca Meyer, symbolizing the community's acknowledgment of its pioneers.
65+
:::
66+
67+
<AdsComponent />
68+
<br />
69+
70+
## Limitations of Color Keywords
71+
72+
While convenient, color keywords are rarely used for full design systems due to these limitations:
73+
74+
1. **Limited Selection:** You are restricted to the 140+ predefined names. You cannot create a precise shade like "50% lighter than dark blue."
75+
2. **No Opacity Control:** Color keywords cannot define transparency. To make a color 50% transparent, you must use the numerical equivalent (e.g., RGBA or HSLA).
76+
3. **Ambiguity:** Naming conventions can be confusing (e.g., is `darkred` darker than `maroon`?).
77+
78+
### Interactive Color Keyword Demo
79+
80+
Use the live editor to test different color names and see their immediate effect. Try replacing the current keyword with `tomato`, `dodgerblue`, or `goldenrod`.
81+
82+
<CodePenEmbed
83+
title="Interactive Color Keyword Demo"
84+
penId="gbrGzwL"
85+
/>

‎docs/css/colors/gradients.mdx‎

Lines changed: 200 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,200 @@
1-
<ComingSoon />
1+
---
2+
title: CSS Gradients
3+
description: "Learn how to use CSS gradients (linear and radial) to create smooth transitions between two or more colors without relying on image files."
4+
keywords: [CSS gradients, linear-gradient, radial-gradient, color-stop, background-image, web design effects, CodeHarborHub]
5+
tags: [CSS gradients, linear-gradient, radial-gradient, color-stop, background-image, web design effects]
6+
sidebar_label: Gradients
7+
---
8+
9+
CSS **Gradients** allow you to create smooth transitions between two or more specified colors. Crucially, these gradients are treated as CSS **background images**, but they are generated entirely by the browser using code, not by downloading a file. This results in faster load times and perfectly scalable graphics.
10+
11+
Gradients are defined using two main functions: `linear-gradient()` and `radial-gradient()`.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. `linear-gradient()`: Straight-Line Transitions
17+
18+
A linear gradient transitions colors along a straight line.
19+
20+
### Basic Syntax
21+
22+
The function requires a direction or angle, followed by at least two color stops.
23+
24+
```css title="styles.css"
25+
selector {
26+
background-image: linear-gradient(direction/angle, color-stop-1, color-stop-2, ...);
27+
}
28+
```
29+
30+
### Defining Direction
31+
32+
You can specify the direction using keywords or an angle:
33+
34+
* **Keywords:** `to top`, `to bottom` (default), `to left`, `to right`.
35+
* **Diagonal Keywords:** `to top left`, `to bottom right`.
36+
* **Angle:** Specified in degrees (`deg`). $0^{\circ}$ is up, $90^{\circ}$ is right, $180^{\circ}$ is down.
37+
38+
### Example
39+
40+
<Tabs>
41+
<TabItem value="css" label="styles.css">
42+
43+
```css
44+
.box-gradient {
45+
background-image: linear-gradient(to bottom, #1976d2, #d32f2f);
46+
height: '100px',
47+
borderRadius: '5px'
48+
}
49+
```
50+
51+
</TabItem>
52+
<TabItem value="html" label="index.html">
53+
54+
```html
55+
<div class="box-gradient"></div>
56+
```
57+
58+
</TabItem>
59+
</Tabs>
60+
61+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
62+
<div style={{
63+
background: 'linear-gradient(to bottom, #1976d2, #d32f2f)',
64+
height: '100px',
65+
borderRadius: '5px'
66+
}}></div>
67+
</BrowserWindow>
68+
69+
<AdsComponent />
70+
<br />
71+
72+
## 2. `radial-gradient()`: Circular Transitions
73+
74+
A radial gradient transitions colors outward from a central point.
75+
76+
### Basic Syntax
77+
78+
The function requires a shape (optional), a position (optional), and at least two color stops.
79+
80+
```css title="styles.css"
81+
selector {
82+
background-image: radial-gradient(shape size at position, color-stop-1, color-stop-2, ...);
83+
}
84+
```
85+
86+
* **Shape:** `circle` or `ellipse` (default).
87+
* **Position:** Uses keywords like `at center` (default), `at top left`, or coordinates (`at 20% 80%`).
88+
89+
### Example
90+
91+
<Tabs>
92+
<TabItem value="css" label="styles.css">
93+
94+
```css
95+
.box-gradient {
96+
/* Starts at the center, circle shape, transitions from yellow to green */
97+
background-image: radial-gradient(circle at center, #ffeb3b, #4caf50);
98+
}
99+
```
100+
101+
</TabItem>
102+
<TabItem value="html" label="index.html">
103+
104+
```html
105+
<div class="box-gradient"></div>
106+
```
107+
108+
</TabItem>
109+
</Tabs>
110+
111+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
112+
<div style={{
113+
background: 'radial-gradient(circle at center, #ffeb3b, #4caf50)',
114+
height: '100px',
115+
borderRadius: '5px'
116+
}}></div>
117+
</BrowserWindow>
118+
119+
## Color Stops and Transparency
120+
121+
A **color stop** is the point where a gradient changes to a specific color. You can specify the transition point using length units (`px`, `em`) or percentages (`%`).
122+
123+
### Example: Hard Stop
124+
125+
To create a sharp, striped transition (not smooth), set two colors to stop at the same point.
126+
127+
```css title="styles.css"
128+
/* Color stops at 50% for both red and blue, creating a sharp line */
129+
background-image: linear-gradient(to right, red 50%, blue 50%);
130+
```
131+
132+
### Using Transparency (RGBA/HSLA)
133+
134+
Gradients work perfectly with transparent color values, allowing the background underneath to show through.
135+
136+
<Tabs>
137+
<TabItem value="css" label="styles.css">
138+
```css
139+
/* Fades from solid blue to a transparent blue */
140+
.box {
141+
background-image: linear-gradient(to right, #2196f3, rgba(33, 150, 243, 0));
142+
}
143+
```
144+
</TabItem>
145+
<TabItem value="html" label="index.html">
146+
```html
147+
<div class="box"></div>
148+
```
149+
</TabItem>
150+
</Tabs>
151+
152+
153+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
154+
<div style={{background: 'linear-gradient(to right, #2196f3, rgba(33, 150, 243, 0))',
155+
height: '100px', borderRadius: '5px', backgroundImage: 'linear-gradient(to right, #2196f3, rgba(33, 150, 243, 0))', backgroundColor: 'pink'}}></div>
156+
</BrowserWindow>
157+
158+
159+
160+
<AdsComponent />
161+
<br />
162+
163+
## Advanced Features and Tips
164+
165+
:::tip Use Angle for Predictability
166+
When using `linear-gradient()`, using an **angle** (e.g., `45deg`) is often more reliable and predictable than using diagonal keywords (e.g., `to top right`).
167+
:::
168+
169+
### Repeating Gradients
170+
171+
CSS provides two specialized functions to create seamless patterns:
172+
173+
* `repeating-linear-gradient()`
174+
* `repeating-radial-gradient()`
175+
176+
These functions take the same arguments as their standard counterparts, but they repeat the color-stop pattern infinitely.
177+
178+
```css title="styles.css"
179+
/* Creates a repeating stripe pattern */
180+
background-image: repeating-linear-gradient(
181+
45deg,
182+
#f06292, /* Pink */
183+
#f06292 10px,
184+
#ffcdd2 10px, /* Lighter Pink */
185+
#ffcdd2 20px
186+
);
187+
```
188+
189+
### Performance Note
190+
191+
Using CSS gradients (`background-image`) is almost always better for performance than using actual image files for simple transitions. The browser renders the colors directly on the GPU, minimizing file requests and bandwidth usage.
192+
193+
## Interactive Gradient Demo
194+
195+
Experiment with different directions, angles, and color stops in the live editor.
196+
197+
<CodePenEmbed
198+
title="Interactive Gradient Demo"
199+
penId="emZGrXw"
200+
/>

‎docs/css/colors/hsl.mdx‎

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,83 @@
1-
<ComingSoon />
1+
---
2+
title: "HSL and HSLA Colors"
3+
description: "Learn how to use the HSL (Hue, Saturation, Lightness) color model in CSS, which is based on human perception, and how the HSLA model adds an Alpha channel for transparency."
4+
keywords: [CSS HSL, CSS HSLA, Hue Saturation Lightness, Alpha channel, color perception, color values, CodeHarborHub]
5+
tags: [CSS HSL, CSS HSLA, Hue Saturation Lightness, Alpha channel, color perception, color values]
6+
sidebar_label: "HSL and HSLA"
7+
---
8+
9+
The **HSL** (Hue, Saturation, Lightness) color model is an alternative to RGB and HEX. It's often preferred by designers because it more closely aligns with how humans perceive and describe color, making it easier to adjust colors precisely.
10+
11+
The **HSLA** model, like RGBA, adds an Alpha ($\alpha$) channel to control transparency.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## The HSL Model: `hsl(H, S, L)`
17+
18+
HSL defines a color using three distinct components, making it intuitive to adjust brightness or intensity without changing the core color.
19+
20+
| Component | Range | Unit | Description |
21+
| :--- | :--- | :--- | :--- |
22+
| **Hue (H)** | $0\text{ to }360$ | Degrees | The color's position on the color wheel (e.g., $0^{\circ} = \text{Red}, 120^{\circ} = \text{Green}, 240^{\circ} = \text{Blue}$). |
23+
| **Saturation (S)** | $0\%\text{ to }100\%$ | Percent | The intensity or purity of the color. $0\%$ is grayscale, $100\%$ is the purest, most vibrant color. |
24+
| **Lightness (L)** | $0\%\text{ to }100\%$ | Percent | How bright the color is. $0\%$ is absolute black, $100\%$ is absolute white, and $50\%$ is the color at its maximum intensity. |
25+
26+
### HSL Color Wheel Examples
27+
28+
| HSL Value | Color Description |
29+
| :--- | :--- |
30+
| `hsl(0, 100%, 50%)` | Pure Red (0 degrees, max saturation, medium lightness) |
31+
| `hsl(180, 50%, 50%)` | Dull Cyan (Half saturation, medium lightness) |
32+
| `hsl(0, 0%, 50%)` | Middle Gray (Zero saturation, medium lightness) |
33+
| `hsl(0, 0%, 0%)` | Black (Zero lightness) |
34+
35+
### Example
36+
37+
```css title="styles.css"
38+
/* Defines a pure, vibrant blue */
39+
.primary-color {
40+
background-color: hsl(240, 100%, 50%);
41+
}
42+
43+
/* Defines a pale, less saturated version of the same blue */
44+
.secondary-color {
45+
background-color: hsl(240, 40%, 80%);
46+
}
47+
```
48+
49+
<AdsComponent />
50+
<br />
51+
52+
## The HSLA Model: <code>hsla(H, S, L, $\alpha$)</code>
53+
54+
The **HSLA** model extends HSL by adding the **Alpha ($\alpha$) channel** (0.0 to 1.0) to control the color's opacity, exactly like in RGBA.
55+
56+
### The Advantage of HSL
57+
58+
HSL is excellent for creating color palettes or adjusting existing colors because of its intuitive structure:
59+
60+
1. **To change the color:** Only change the **Hue** value.
61+
2. **To make it duller or grayscale:** Only change the **Saturation** value (lower the percentage).
62+
3. **To make it lighter or darker:** Only change the **Lightness** value.
63+
64+
If you tried this in RGB, changing the lightness would require recalculating all three R, G, and B values.
65+
66+
### Example: Transparent Green
67+
68+
```css title="styles.css"
69+
/* Creates a vibrant green that is 60% opaque */
70+
.success-message {
71+
background-color: hsla(140, 80%, 45%, 0.6);
72+
color: #333;
73+
}
74+
```
75+
76+
### Interactive HSL/HSLA Demo
77+
78+
Use the live editor to adjust the Hue ($0^{\circ}\text{-}360^{\circ}$), Saturation ($0\%\text{-}100\%$), Lightness ($0\%\text{-}100\%$), and Alpha ($0.0\text{-}1.0$) values. See how easy it is to change from blue to red by only adjusting the Hue.
79+
80+
<CodePenEmbed
81+
title="Interactive HSL/HSLA Demo"
82+
penId="MYyEGEP"
83+
/>

0 commit comments

Comments
 (0)