auto-claude: 4.1 - Explain color theory basics, color formats (hex, rgb, hsl), and why different formats exist

lessons/03-colors.json

@@ -17,6 +17,10 @@
 			"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 <kbd>.colorbox</kbd>", "options": { "caseSensitive": false } },
 				{
@@ -45,6 +49,10 @@
 			"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 <kbd>.colorbox</kbd>", "options": { "caseSensitive": false } },
 				{ "type": "contains", "value": "color", "message": "Use the <kbd>color</kbd> property", "options": { "caseSensitive": false } },
@@ -68,6 +76,10 @@
 			"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 <kbd>.gradient-box</kbd>", "options": { "caseSensitive": false } },
 				{
@@ -96,6 +108,10 @@
 			"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",