{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "colors-backgrounds",
"title": "Colors",
"description": "Learn how to apply and manipulate colors, backgrounds, and graphical fills using CSS properties.",
"difficulty": "beginner",
"lessons": [
{
"id": "colors-1",
"title": "Setting Background Colors",
"description": "Use the background-color property to fill elements with solid colors.",
"task": "Apply a light cyan background (#e0f7fa) to the element with class 'colorbox'.",
"previewHTML": "Background Demo
",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .colorbox { padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Set a background color */\n.colorbox {",
"initialCode": "",
"codeSuffix": "}",
"previewContainer": "preview-area",
"concept": {
"explanation": "Hexadecimal color codes represent RGB (Red, Green, Blue) values using base-16 counting. The format #RRGGBB uses two digits for each color channel (00-FF in hex = 0-255 in decimal). For example, #e0f7fa means red=224, green=247, blue=250. Hex is popular because it's compact—6 characters can represent 16.7 million colors. Web developers prefer hex for consistency across browsers and ease of copy-pasting from design tools.",
"diagram": "Hex Color Breakdown: #e0f7fa\n\n#e0f7fa\n ││││││\n ││└┴── Blue (fa = 250) High blue\n │└──── Green (f7 = 247) High green\n └───── Red (e0 = 224) Medium-high red\n\nResult: Light cyan (lots of green+blue)\n\nCommon formats compared:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nHex: #e0f7fa (compact)\nRGB: rgb(224, 247, 250) (readable)\nHSL: hsl(187, 71%, 93%) (intuitive)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
},
"validations": [
{ "type": "contains", "value": ".colorbox", "message": "Select .colorbox", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "background-color",
"message": "Use background-color property",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "background-color", "expected": "#e0f7fa" },
"message": "Set background-color to #e0f7fa",
"options": { "exact": true }
}
]
},
{
"id": "colors-2",
"title": "Text Color and Contrast",
"description": "Apply the color property to control text readability against backgrounds.",
"task": "Set the text color of '.colorbox' to deep blue (#01579b). Ensure good contrast.",
"previewHTML": "Color & Contrast
",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .colorbox { padding: 1rem; background: #e0f7fa; }",
"sandboxCSS": "",
"codePrefix": "/* Set text color */\n.colorbox {",
"initialCode": "",
"codeSuffix": "}",
"previewContainer": "preview-area",
"concept": {
"explanation": "Color contrast is the difference in brightness between text and background, measured as a ratio from 1:1 (invisible) to 21:1 (black on white). WCAG accessibility guidelines require at least 4.5:1 for normal text and 3:1 for large text to ensure readability for people with vision impairments. Dark blue (#01579b) on light cyan (#e0f7fa) provides excellent contrast (~8.2:1) because there's significant brightness difference. Using HSL format helps choose contrasting colors: keep the same hue but vary lightness (L) dramatically.",
"diagram": "Contrast Ratio Comparison\n\nBackground: #e0f7fa (light cyan)\n\nText Options:\n┌────────────────────────────┐\n│ #01579b (dark blue) │ 8.2:1 ✓ Excellent\n│ #0288d1 (medium blue) │ 3.8:1 ✗ Fails WCAG\n│ #b3e5fc (light blue) │ 1.2:1 ✗ Unreadable\n└────────────────────────────┘\n\nWCAG Requirements:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━\nNormal text: 4.5:1 minimum\nLarge text: 3.0:1 minimum\nAA Standard: Good for most\nAAA Standard: 7.0:1 (ideal)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━"
},
"validations": [
{ "type": "contains", "value": ".colorbox", "message": "Select .colorbox", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "color", "message": "Use the color property", "options": { "caseSensitive": false } },
{
"type": "property_value",
"value": { "property": "color", "expected": "#01579b" },
"message": "Set color to #01579b",
"options": { "exact": true }
}
]
},
{
"id": "colors-3",
"title": "CSS Gradients",
"description": "Learn to create smooth transitions between colors using linear and radial gradients.",
"task": "Apply a linear gradient background from #ff9a9e to #fad0c4 on an element with class 'gradient-box'.",
"previewHTML": "Gradient Demo
",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .gradient-box { padding: 1rem; color: white; text-align: center; }",
"sandboxCSS": "",
"codePrefix": "/* Set a linear gradient background */\n.gradient-box {",
"initialCode": "",
"codeSuffix": "}",
"previewContainer": "preview-area",
"concept": {
"explanation": "CSS gradients work by interpolating (smoothly transitioning) between color values at different positions called \"color stops\". The browser calculates hundreds of intermediate colors between your specified stops, blending RGB values proportionally. Linear gradients transition along a straight line (default: top to bottom), while radial gradients emanate from a center point. Gradients are actually generated images, which is why they use background-image instead of background-color. You can combine multiple gradients and control their direction, shape, and stop positions for complex effects.",
"diagram": "Linear Gradient Interpolation\n\nlinear-gradient(#ff9a9e, #fad0c4)\n\n 0% ┌─────────────────┐\n │ #ff9a9e (pink) │ ← Start color\n ├─────────────────┤\n 25% │ #ffb0ad │ ↓\n ├─────────────────┤ Browser\n 50% │ #ffc3b8 │ calculates\n ├─────────────────┤ intermediate\n 75% │ #ffd5c3 │ colors\n ├─────────────────┤ ↓\n100% │ #fad0c4 (peach) │ ← End color\n └─────────────────┘\n\nDirection options:\nto bottom (default), to right,\nto top, 45deg, 180deg, etc."
},
"validations": [
{ "type": "contains", "value": ".gradient-box", "message": "Select .gradient-box", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "background-image",
"message": "Use background-image property",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "linear-gradient\\(.*#ff9a9e.*,.*#fad0c4.*\\)",
"message": "Use linear-gradient from #ff9a9e to #fad0c4",
"options": { "caseSensitive": false }
}
]
},
{
"id": "colors-4",
"title": "Background Images & Repeat",
"description": "Add images as backgrounds and control repetition and positioning.",
"task": "Set a background image on '.bg-img' using a placeholder URL, center it, and prevent tiling.",
"previewHTML": "Image Background
",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .bg-img { height: 150px; display: flex; align-items: center; justify-content: center; color: white; }",
"sandboxCSS": "",
"codePrefix": "/* Set background image */\n\n.bg-img {",
"initialCode": " background-image: url('http://placekitten.com/320/320');\n background-position: center; background-repeat: no-repeat;\n ",
"codeSuffix": "}",
"previewContainer": "preview-area",
"concept": {
"explanation": "Background images layer behind content and can be combined with background colors—the color shows through transparent areas of the image or when the image doesn't cover the full element. By default, background images tile (repeat) to fill the entire element, mimicking wallpaper patterns. The background-position property uses a coordinate system where 'center' means 50% 50%, and you can use keywords (top, left), percentages, or exact pixel values. Setting background-repeat: no-repeat displays the image once, useful for logos or hero images.",
"diagram": "Background Layers (front to back)\n\n┌────────────────────────────┐\n│ ┌──────────┐ │\n│ │ Content │ │ ← Layer 4\n│ └──────────┘ │\n│ ╔════════════════════╗ │\n│ ║ background-image ║ │ ← Layer 3\n│ ║ (photo/pattern) ║ │\n│ ╚════════════════════╝ │\n│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ ← Layer 2\n│▓ background-color (solid) ▓│ (shows through\n│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ transparent areas)\n└────────────────────────────┘\n│ Parent background │ ← Layer 1\n\nRepeat options:\nrepeat (default), no-repeat,\nrepeat-x, repeat-y, space, round"
},
"validations": [
{
"type": "contains",
"value": "background-image",
"message": "Use background-image property",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "background-position: center",
"message": "Center the background image with background-position: center",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "background-repeat: no-repeat",
"message": "Prevent image tiling with background-repeat: no-repeat",
"options": { "caseSensitive": false }
}
]
}
]
}