diff --git a/docs/css/colors/color-names.mdx b/docs/css/colors/color-names.mdx
index e345ed2..b089087 100644
--- a/docs/css/colors/color-names.mdx
+++ b/docs/css/colors/color-names.mdx
@@ -1 +1,85 @@
-
\ No newline at end of file
+---
+title: "CSS Color Keywords (Names)"
+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."
+keywords: [CSS color names, color keywords, web safe colors, named colors, color values, CodeHarborHub]
+tags: [CSS color names, color keywords, web safe colors, named colors, color values]
+sidebar_label: Color Keywords
+---
+
+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).
+
+Using color keywords is convenient for quick styling, prototyping, and when you need basic, well-known colors.
+
+
+
+
+## The Syntax
+
+To use a color keyword, you simply provide the name as the value for properties like `color` or `background-color`.
+
+```css title="styles.css"
+/* Sets the background to a light cyan color */
+.header-box {
+ background-color: aquamarine;
+}
+
+/* Sets the text color to dark blue */
+.title {
+ color: darkblue;
+}
+```
+
+## Standard and Extended Color Names
+
+CSS supports two main groups of color names:
+
+### 1. The 16 Basic VGA Colors
+
+Historically, CSS adopted the original 16 colors from the standard VGA palette. These are guaranteed to be recognized by every browser and system.
+
+| Color Name | HEX Code | Example |
+| :--- | :--- | :--- |
+| `black` | `#000000` | Black |
+| `white` | `#FFFFFF` | White |
+| `red` | `#FF0000` | Red |
+| `blue` | `#0000FF` | Blue |
+| `lime` | `#00FF00` | Lime |
+| `yellow` | `#FFFF00` | Yellow |
+| `gray` | `#808080` | Gray |
+| `fuchsia` | `#FF00FF` | Fuchsia |
+| ...and 8 others | | |
+
+### 2. Extended Color Keywords (Over 140 Names)
+
+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`).
+
+| Example Name | HEX Code | Color Example |
+| :--- | :--- | :--- |
+| `skyblue` | `#87CEEB` | Sky Blue |
+| `gold` | `#FFD700` | Gold |
+| `rebeccapurple` | `#663399` | Rebecca Purple |
+| `peru` | `#CD853F` | Peru |
+
+:::info New Keyword: `rebeccapurple`
+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.
+:::
+
+
+
+
+## Limitations of Color Keywords
+
+While convenient, color keywords are rarely used for full design systems due to these limitations:
+
+1. **Limited Selection:** You are restricted to the 140+ predefined names. You cannot create a precise shade like "50% lighter than dark blue."
+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).
+3. **Ambiguity:** Naming conventions can be confusing (e.g., is `darkred` darker than `maroon`?).
+
+### Interactive Color Keyword Demo
+
+Use the live editor to test different color names and see their immediate effect. Try replacing the current keyword with `tomato`, `dodgerblue`, or `goldenrod`.
+
+
\ No newline at end of file
diff --git a/docs/css/colors/gradients.mdx b/docs/css/colors/gradients.mdx
index e345ed2..00a8349 100644
--- a/docs/css/colors/gradients.mdx
+++ b/docs/css/colors/gradients.mdx
@@ -1 +1,200 @@
-
\ No newline at end of file
+---
+title: CSS Gradients
+description: "Learn how to use CSS gradients (linear and radial) to create smooth transitions between two or more colors without relying on image files."
+keywords: [CSS gradients, linear-gradient, radial-gradient, color-stop, background-image, web design effects, CodeHarborHub]
+tags: [CSS gradients, linear-gradient, radial-gradient, color-stop, background-image, web design effects]
+sidebar_label: Gradients
+---
+
+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.
+
+Gradients are defined using two main functions: `linear-gradient()` and `radial-gradient()`.
+
+
+
+
+## 1. `linear-gradient()`: Straight-Line Transitions
+
+A linear gradient transitions colors along a straight line.
+
+### Basic Syntax
+
+The function requires a direction or angle, followed by at least two color stops.
+
+```css title="styles.css"
+selector {
+ background-image: linear-gradient(direction/angle, color-stop-1, color-stop-2, ...);
+}
+```
+
+### Defining Direction
+
+You can specify the direction using keywords or an angle:
+
+ * **Keywords:** `to top`, `to bottom` (default), `to left`, `to right`.
+ * **Diagonal Keywords:** `to top left`, `to bottom right`.
+ * **Angle:** Specified in degrees (`deg`). $0^{\circ}$ is up, $90^{\circ}$ is right, $180^{\circ}$ is down.
+
+### Example
+
+
+
+
+```css
+.box-gradient {
+ background-image: linear-gradient(to bottom, #1976d2, #d32f2f);
+ height: '100px',
+ borderRadius: '5px'
+}
+```
+
+
+
+
+```html
+
+```
+
+
+
+
+
+
+
+
+
+
+
+## 2. `radial-gradient()`: Circular Transitions
+
+A radial gradient transitions colors outward from a central point.
+
+### Basic Syntax
+
+The function requires a shape (optional), a position (optional), and at least two color stops.
+
+```css title="styles.css"
+selector {
+ background-image: radial-gradient(shape size at position, color-stop-1, color-stop-2, ...);
+}
+```
+
+ * **Shape:** `circle` or `ellipse` (default).
+ * **Position:** Uses keywords like `at center` (default), `at top left`, or coordinates (`at 20% 80%`).
+
+### Example
+
+
+
+
+```css
+.box-gradient {
+ /* Starts at the center, circle shape, transitions from yellow to green */
+ background-image: radial-gradient(circle at center, #ffeb3b, #4caf50);
+}
+```
+
+
+
+
+```html
+
+```
+
+
+
+
+
+
+
+
+## Color Stops and Transparency
+
+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 (`%`).
+
+### Example: Hard Stop
+
+To create a sharp, striped transition (not smooth), set two colors to stop at the same point.
+
+```css title="styles.css"
+/* Color stops at 50% for both red and blue, creating a sharp line */
+background-image: linear-gradient(to right, red 50%, blue 50%);
+```
+
+### Using Transparency (RGBA/HSLA)
+
+Gradients work perfectly with transparent color values, allowing the background underneath to show through.
+
+
+
+```css
+/* Fades from solid blue to a transparent blue */
+.box {
+ background-image: linear-gradient(to right, #2196f3, rgba(33, 150, 243, 0));
+}
+```
+
+
+```html
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Advanced Features and Tips
+
+:::tip Use Angle for Predictability
+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`).
+:::
+
+### Repeating Gradients
+
+CSS provides two specialized functions to create seamless patterns:
+
+ * `repeating-linear-gradient()`
+ * `repeating-radial-gradient()`
+
+These functions take the same arguments as their standard counterparts, but they repeat the color-stop pattern infinitely.
+
+```css title="styles.css"
+/* Creates a repeating stripe pattern */
+background-image: repeating-linear-gradient(
+ 45deg,
+ #f06292, /* Pink */
+ #f06292 10px,
+ #ffcdd2 10px, /* Lighter Pink */
+ #ffcdd2 20px
+);
+```
+
+### Performance Note
+
+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.
+
+## Interactive Gradient Demo
+
+Experiment with different directions, angles, and color stops in the live editor.
+
+
\ No newline at end of file
diff --git a/docs/css/colors/hsl.mdx b/docs/css/colors/hsl.mdx
index e345ed2..87c9db3 100644
--- a/docs/css/colors/hsl.mdx
+++ b/docs/css/colors/hsl.mdx
@@ -1 +1,83 @@
-
\ No newline at end of file
+---
+title: "HSL and HSLA Colors"
+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."
+keywords: [CSS HSL, CSS HSLA, Hue Saturation Lightness, Alpha channel, color perception, color values, CodeHarborHub]
+tags: [CSS HSL, CSS HSLA, Hue Saturation Lightness, Alpha channel, color perception, color values]
+sidebar_label: "HSL and HSLA"
+---
+
+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.
+
+The **HSLA** model, like RGBA, adds an Alpha ($\alpha$) channel to control transparency.
+
+
+
+
+## The HSL Model: `hsl(H, S, L)`
+
+HSL defines a color using three distinct components, making it intuitive to adjust brightness or intensity without changing the core color.
+
+| Component | Range | Unit | Description |
+| :--- | :--- | :--- | :--- |
+| **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}$). |
+| **Saturation (S)** | $0\%\text{ to }100\%$ | Percent | The intensity or purity of the color. $0\%$ is grayscale, $100\%$ is the purest, most vibrant color. |
+| **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. |
+
+### HSL Color Wheel Examples
+
+| HSL Value | Color Description |
+| :--- | :--- |
+| `hsl(0, 100%, 50%)` | Pure Red (0 degrees, max saturation, medium lightness) |
+| `hsl(180, 50%, 50%)` | Dull Cyan (Half saturation, medium lightness) |
+| `hsl(0, 0%, 50%)` | Middle Gray (Zero saturation, medium lightness) |
+| `hsl(0, 0%, 0%)` | Black (Zero lightness) |
+
+### Example
+
+```css title="styles.css"
+/* Defines a pure, vibrant blue */
+.primary-color {
+ background-color: hsl(240, 100%, 50%);
+}
+
+/* Defines a pale, less saturated version of the same blue */
+.secondary-color {
+ background-color: hsl(240, 40%, 80%);
+}
+```
+
+
+
+
+## The HSLA Model: hsla(H, S, L, $\alpha$)
+
+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.
+
+### The Advantage of HSL
+
+HSL is excellent for creating color palettes or adjusting existing colors because of its intuitive structure:
+
+1. **To change the color:** Only change the **Hue** value.
+2. **To make it duller or grayscale:** Only change the **Saturation** value (lower the percentage).
+3. **To make it lighter or darker:** Only change the **Lightness** value.
+
+If you tried this in RGB, changing the lightness would require recalculating all three R, G, and B values.
+
+### Example: Transparent Green
+
+```css title="styles.css"
+/* Creates a vibrant green that is 60% opaque */
+.success-message {
+ background-color: hsla(140, 80%, 45%, 0.6);
+ color: #333;
+}
+```
+
+### Interactive HSL/HSLA Demo
+
+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.
+
+
\ No newline at end of file
diff --git a/docs/css/colors/hsla.mdx b/docs/css/colors/hsla.mdx
index e345ed2..0ce0507 100644
--- a/docs/css/colors/hsla.mdx
+++ b/docs/css/colors/hsla.mdx
@@ -1 +1,80 @@
-
\ No newline at end of file
+---
+title: "HSLA and the Alpha Channel"
+description: "Explore the HSLA color model, focusing on the Alpha (α) channel to control transparency, and understand its advantages over RGBA for intuitive color manipulation."
+keywords: [CSS HSLA, Alpha channel, HSL transparency, opacity, color adjustment, color values, CodeHarborHub]
+tags: [CSS HSLA, Alpha channel, HSL transparency, opacity, color adjustment, color values]
+sidebar_label: "HSLA (Alpha)"
+---
+
+The **HSLA** (Hue, Saturation, Lightness, **Alpha**) color model is the HSL model augmented with the **Alpha ($\alpha$) channel**. It is the preferred method for defining colors with transparency when using the human-intuitive HSL system.
+
+The Alpha channel controls the **opacity** or transparency of the defined color, allowing underlying elements or backgrounds to show through.
+
+
+
+
+## The Alpha Channel Syntax
+
+The HSLA function takes four values: the three HSL components, and the final Alpha value.
+
+### The Syntax
+
+```css title="styles.css"
+/* hsla(Hue, Saturation, Lightness, Alpha) */
+selector {
+ color: hsla(H, S, L, α);
+}
+```
+
+ * **H, S, L:** The standard HSL values (Hue $0^{\circ}\text{-}360^{\circ}$, Saturation $0\%\text{-}100\%$, Lightness $0\%\text{-}100\%$).
+ * **Alpha ($\alpha$):** A decimal number from **0.0 to 1.0** that defines the opacity.
+
+### The Alpha Scale Review
+
+| Alpha Value | Opacity | Effect |
+| :--- | :--- | :--- |
+| **1.0** | 100% | Fully opaque (solid color). |
+| **0.5** | 50% | Half transparent. |
+| **0.0** | 0% | Fully transparent (invisible). |
+
+## The HSLA Advantage Over RGBA
+
+While RGBA and HSLA can produce the exact same final color on screen, HSLA offers significant advantages when developing color schemes, especially when you need different shades or transparency levels:
+
+| Feature | HSLA | RGBA |
+| :--- | :--- | :--- |
+| **Adjusting Lightness** | Change only the **L** value (easy to lighten/darken). | Requires recalculating all three R, G, and B values (complex). |
+| **Adjusting Saturation** | Change only the **S** value (easy to dull/vibrancy). | Requires recalculating all three R, G, and B values (complex). |
+| **Creating Tints** | Simply increasing the **L** value creates a lighter tint. | No easy formula; R, G, B values must be individually increased toward 255. |
+
+
+
+
+### Example: Intuitive Color Adjustment
+
+Imagine your brand color is a blue defined by `hsla(220, 100%, 50%, 1)`.
+
+To create a **lighter, semi-transparent background** for a highlight box, you simply increase the Lightness and decrease the Alpha:
+
+```css title="styles.css"
+/* Brand Blue: Fully saturated, 50% lightness, 100% opaque */
+.primary-text {
+ color: hsla(220, 100%, 50%, 1);
+}
+
+/* Light Blue Background: Same hue, less saturation, more lightness, 20% opaque */
+.highlight-box {
+ background-color: hsla(220, 40%, 85%, 0.2);
+}
+```
+
+You maintain the brand's core **Hue ($220^{\circ}$)** across the entire design without guessing numerical values.
+
+### Interactive HSLA Demo
+
+Use the live editor to adjust the Lightness ($L$) and Alpha ($\alpha$) values. Notice how easily you can make the background paler and more transparent without changing the underlying color's hue (the first number).
+
+
\ No newline at end of file
diff --git a/docs/css/colors/rgb.mdx b/docs/css/colors/rgb.mdx
index e345ed2..7e38282 100644
--- a/docs/css/colors/rgb.mdx
+++ b/docs/css/colors/rgb.mdx
@@ -1 +1,96 @@
-
\ No newline at end of file
+---
+title: "RGB and RGBA Colors"
+description: "Learn how to use the RGB (Red, Green, Blue) and RGBA color models in CSS to define colors using numerical intensity values, and how the Alpha channel controls transparency."
+keywords: [CSS RGB, CSS RGBA, Red Green Blue, Alpha channel, color intensity, opacity, color values, CodeHarborHub]
+tags: [CSS RGB, CSS RGBA, Red Green Blue, Alpha channel, color intensity, opacity, color values]
+sidebar_label: RGB and RGBA
+---
+
+The **RGB** (Red, Green, Blue) color model is based on the way electronic screens (like your monitor or phone) display color. It works by mixing varying intensities of three primary light colors: **Red**, **Green**, and **Blue**.
+
+The **RGBA** model extends this by adding an **Alpha ($\alpha$)** value, which controls the color's transparency or opacity.
+
+
+
+
+## The RGB Model: `rgb(R, G, B)`
+
+In the RGB model, the intensity of each color channel is defined using an integer from **0 to 255**.
+
+* **0** means zero light (no color).
+* **255** means maximum light intensity (full color).
+
+### RGB Values
+
+| Color | Red Value | Green Value | Blue Value | Result |
+| :--- | :--- | :--- | :--- | :--- |
+| **Black** | 0 | 0 | 0 | `rgb(0, 0, 0)` |
+| **White** | 255 | 255 | 255 | `rgb(255, 255, 255)` |
+| **Red** | 255 | 0 | 0 | `rgb(255, 0, 0)` |
+| **Purple** | 128 | 0 | 128 | `rgb(128, 0, 128)` |
+
+### Example
+
+```css title="styles.css"
+/* Sets the background to a bright orange */
+.btn-primary {
+ background-color: rgb(255, 165, 0);
+}
+
+/* Sets the text to a standard gray */
+.caption {
+ color: rgb(102, 102, 102);
+}
+```
+
+## The RGBA Model: rgba(R, G, B, $\alpha$)
+
+The **RGBA** (Red, Green, Blue, Alpha) model adds a fourth parameter, **Alpha ($\alpha$)**, which is used to define the opacity of the color.
+
+The Alpha value is a decimal number between **0.0** and **1.0**:
+
+ * **1.0** = Fully opaque (100% visible, no transparency).
+ * **0.5** = 50% transparency.
+ * **0.0** = Fully transparent (invisible).
+
+:::tip RGBA vs. Opacity
+Using **RGBA** on a color is generally preferred over using the separate CSS `opacity` property on an element. The `opacity` property makes the *entire element* (text, background, borders, and children) transparent, whereas RGBA only makes the *specified color* transparent.
+:::
+
+
+
+
+### Example: Transparent Overlay
+
+```css title="styles.css"
+/* Creates a black overlay that is 40% transparent */
+.overlay {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+/* Creates a semi-transparent white text */
+.hint-text {
+ color: rgba(255, 255, 255, 0.75);
+}
+```
+
+## RGB/RGBA vs. HEX
+
+RGB/RGBA and HEX codes are essentially two different notations for the exact same color values.
+
+| Feature | HEX Code | RGB/RGBA |
+| :--- | :--- | :--- |
+| **Basic Color** | `#FF0000` | `rgb(255, 0, 0)` |
+| **Opacity ($\alpha$)** | Requires 8 digits (e.g., `#FF000080`) | **Directly supported** in `rgba()` |
+| **Intuition** | Less intuitive; requires memorization of hexadecimal pairs. | More intuitive; uses decimal numbers 0–255. |
+
+The main reason to use **RGBA** is to define a color with transparency directly, a task not natively supported by the six-digit HEX format.
+
+### Interactive RGB/RGBA Demo
+
+Use the live editor to adjust the RGB values (0-255) and the Alpha value (0.0-1.0) to see how the color and transparency change.
+
+
\ No newline at end of file
diff --git a/docs/css/colors/rgba.mdx b/docs/css/colors/rgba.mdx
index e345ed2..7e86084 100644
--- a/docs/css/colors/rgba.mdx
+++ b/docs/css/colors/rgba.mdx
@@ -1 +1,86 @@
-
\ No newline at end of file
+---
+title: "RGBA and the Alpha Channel"
+description: "Explore the RGBA color model, focusing on the Alpha (α) channel, which controls the opacity (transparency) of a color, allowing backgrounds to show through."
+keywords: [CSS RGBA, Alpha channel, opacity, transparency, color, RGB, color values, CodeHarborHub]
+tags: [CSS RGBA, Alpha channel, opacity, transparency, color, RGB, color values]
+sidebar_label: "RGBA (Alpha)"
+---
+
+The **RGBA** (Red, Green, Blue, **Alpha**) color model is an extension of the basic RGB model. It introduces the **Alpha ($\alpha$) channel**, which is dedicated solely to controlling the **opacity** or transparency of a color.
+
+This property is essential when you want a color (like a background or text color) to be partially see-through, allowing underlying content or images to show through.
+
+
+
+
+## The Alpha Channel Syntax
+
+The RGBA function takes four values: three for the color and one for the alpha channel.
+
+### The Syntax
+
+```css title="styles.css"
+/* rgba(Red, Green, Blue, Alpha) */
+selector {
+ color: rgba(R, G, B, α);
+}
+```
+
+ * **R, G, B:** Integers from **0 to 255** that define the color (the same as standard RGB).
+ * **Alpha ($\alpha$):** A decimal number from **0.0 to 1.0** that defines the opacity.
+
+### The Alpha Scale
+
+| Alpha Value | Opacity | Description |
+| :--- | :--- | :--- |
+| **1.0** | 100% | Fully opaque (solid color, no transparency). |
+| **0.5** | 50% | Half transparent. |
+| **0.25** | 25% | Mostly transparent. |
+| **0.0** | 0% | Fully transparent (invisible). |
+
+
+## Practical Use: Overlays and Contrast
+
+RGBA is most commonly used for background colors, creating subtle overlays that enhance contrast without fully obscuring the content underneath.
+
+### Example: Semi-Transparent Black Overlay
+
+To darken an image for better text readability, you can place an overlay `div` on top of it and set its background using a transparent black.
+
+```css title="styles.css"
+/* Creates a black background that is 50% transparent */
+.overlay {
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 20px;
+}
+
+/* White text for contrast */
+.overlay p {
+ color: white;
+}
+```
+
+In this example, the background of the overlay is transparent, but the white text on top remains fully opaque (1.0).
+
+
+
+
+## RGBA vs. The `opacity` Property
+
+This is a key concept to understand in CSS layout.
+
+| Property | Target | Effect | Best Use Case |
+| :--- | :--- | :--- | :--- |
+| **`rgba()`** | The **color value** itself. | Makes *only* the color transparent. Text and other child elements remain fully solid. | Creating semi-transparent backgrounds or text colors. |
+| **`opacity`** | The **entire element**. | Makes the *entire element* (background, text, border, and all nested children) transparent. | Fading out an entire modal or image. |
+
+If you use `opacity: 0.5;` on a parent `div`, the text inside will also be 50% transparent, which often reduces readability. Using `background-color: rgba(0, 0, 0, 0.5);` only affects the background, leaving the text sharp and readable.
+
+### Interactive RGBA Demo
+
+Use the live editor to adjust the Alpha value (the last number in the `background-color` property). Notice how the light-gray body background becomes more or less visible as you change the transparency.
+
+
\ No newline at end of file