Color Lab

/* CSS has 140+ named color keywords.
   Great for quick prototypes, worse for
   production where a design system is better. */

.btn    { background: tomato; }
.badge  { background: goldenrod; }
.heart  { color:      crimson; }
.ocean  { background: steelblue; }
.velvet { background: rebeccapurple; }

/* Fun fact: "rebeccapurple" was added to honor
   web-dev educator Eric Meyer's daughter Rebecca. */

/* HSL makes scale generation a one-liner:
   keep hue + saturation, step lightness */

.tint-95  { background: hsl(330 81% 95%); }
.tint-85  { background: hsl(330 81% 85%); }
.base-55  { background: hsl(330 81% 55%); } /* base */
.shade-25 { background: hsl(330 81% 25%); }

/* Even smarter: use CSS custom properties */
:root {
  --hue: 330;
  --sat: 81%;
}

.shade {
  background: hsl(var(--hue) var(--sat) var(--l, 55%));
}
.shade--soft { --l: 85%; }
.shade--deep { --l: 25%; }

/* color-mix() — blend two colors in a given space */
.purple {
  background: color-mix(in srgb, #ec4899, #3b82f6);
}

/* Weight each color with a percentage */
.mostly-pink {
  background: color-mix(in srgb, #ec4899 80%, #3b82f6);
}

/* Add alpha by mixing with transparent */
.ghost {
  background: color-mix(in srgb, #ec4899 20%, transparent);
}

/* Lighten / darken by mixing with white / black */
.lighter { background: color-mix(in srgb, #ec4899 60%, white); }
.darker  { background: color-mix(in srgb, #ec4899 60%, black); }

/* rgba() for simple alpha — still widely supported */
.overlay {
  background: rgba(0, 0, 0, 0.5); /* 50% black */
}

/* Linear — direction as angle or keyword */
.g1 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }

/* Multi-stop — any number of colors */
.g2 { background: linear-gradient(90deg, #06b6d4, #10b981, #facc15); }

/* Radial — circle or ellipse, positioned anywhere */
.g3 { background: radial-gradient(circle, #ec4899, #1e1b4b); }

/* Offset radial + base color for a glow */
.g4 {
  background:
    radial-gradient(circle at 30% 30%, #f59e0b, transparent 60%),
    #1e1b4b;
}

/* Conic — sweeps around a center point */
.g5 {
  background: conic-gradient(from 0deg, #ec4899, #8b5cf6, #3b82f6, #10b981, #f59e0b, #ec4899);
}

/* Animated — shift background-position on an oversized gradient */
.g6 {
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6, #06b6d4, #ec4899);
  background-size: 300% 300%;
  animation: gradFlow 6s linear infinite;
}

@keyframes gradFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* WCAG 2.1 minimums (AA):
   - Normal body text:  4.5 : 1
   - Large text (18pt+): 3 : 1
   - UI components:     3 : 1

   AAA is the stricter target:
   - Normal body text:  7 : 1
   - Large text:        4.5 : 1        */

/* Common pitfalls to avoid: */

/* ❌ Light gray text on white — hard to read */
.bad { color: #aaa; background: #fff; }

/* ✅ Darker gray passes AA on white */
.good { color: #555; background: #fff; }

/* ❌ Pure yellow on white — never has enough contrast */
.avoid { color: #ffd700; background: #fff; }

/* ✅ Yellow on dark background — lots of contrast */
.yellow-ok { color: #ffd700; background: #111; }

/* Don't rely on color alone — add icons, text,
   or patterns so colorblind users aren't lost.  */

/* Good palettes have clear roles:
   - background / surface
   - primary (buttons, links)
   - secondary / accent
   - text
   - muted / border

   Store them as CSS custom properties: */

:root {
  --bg:         #0a0a14;
  --surface:    #1e1b4b;
  --primary:    #8b5cf6;
  --accent:     #f59e0b;
  --text:       #f5f5f7;
  --text-muted: #9ca3af;
  --border:     rgba(255,255,255,.08);
}

/* Inspiration: coolors.co, huemint.com, tailwindcss.com/docs/colors */

/* Gradient text — background-clip: text */
.grad-text {
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tinted image — gradient overlay + image, stacked */
.tint-img {
  background:
    linear-gradient(135deg, rgba(236,72,153,.55), rgba(59,130,246,.55)),
    url('photo.jpg') center/cover;
}

/* Neon glow — multiple layered text-shadows */
.glow {
  color: #fff;
  text-shadow:
    0 0 8px #ec4899,
    0 0 20px #ec4899,
    0 0 40px #ec4899;
}

/* The same trick works for box-shadow too — see Box Lab */

/* Draw a color wheel with a single conic-gradient */
.wheel {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    hsl(0 90% 55%), hsl(60 90% 55%), hsl(120 90% 55%),
    hsl(180 90% 55%), hsl(240 90% 55%), hsl(300 90% 55%),
    hsl(0 90% 55%)
  );
}

/* Use HSL hue math to pick related colors:
   base + 180°       = complementary
   base ± 30°        = analogous
   base + 120°, 240° = triadic
   base + 150°, 210° = split-complementary */

:root { --base: 220; } /* blue */
.base  { background: hsl(var(--base) 80% 55%); }
.comp  { background: hsl(calc(var(--base) + 180) 80% 55%); }
.ana1  { background: hsl(calc(var(--base) - 30) 80% 55%); }
.ana2  { background: hsl(calc(var(--base) + 30) 80% 55%); }