[CSS: Colors] Color Keywords, RGB/RGBA, HSL/HSLA & Gradients — Documentation #87

This sub-issue covers all CSS color-related documentation, including different color notations, color models, transparency formats, and basic-to-advanced gradient usage. Contributors will explain how each color model works, when to use it, and provide practical UI examples.

This issue includes the following files:

colors
├── color-names.mdx
├── rgb.mdx
├── rgba.mdx
├── hsl.mdx
├── hsla.mdx
├── gradients.mdx

Each MDX file should cover:

• What the format/model is
• Syntax
• Examples
• Pros / Cons
• Visual comparisons
• Real-use cases (UI, buttons, backgrounds, borders)
• Accessibility notes (contrast, readability)

Tasks

Color Formats

• Document color names (CSS keywords)
• Document RGB
• Document RGBA
• Document HSL
• Document HSLA

Gradients

• Document CSS gradients

  • Linear gradients
  • Radial gradients
  • Conic gradients
  • Repeating gradients (optional)

General Tasks

• Add visual examples showing differences in color formats
• Provide examples for light/dark themes
• Add accessibility suggestions (contrast ratios, WCAG notes)
• Cross-link to Backgrounds, Typography, and Best Practices
• Ensure MDX works correctly inside Docusaurus

Suggested Structure for Each File

• Overview
• Why this color model is used
• Syntax
• Examples
• Common mistakes
• Best practices
• UI usage examples
• Tools for color picking (optional mention)
• Related links

Expected Outcome

A full-color documentation set that helps learners understand how to style UI elements effectively using CSS color systems, with practical examples and accessible color choices.