CSS Colors Cheatsheet

Color Formats

/* Hex */
color: #6c63ff;          /* 6-digit hex */
color: #6c63ffcc;        /* 8-digit: last 2 = alpha (cc = 80%) */
color: #6cf;             /* 3-digit shorthand = #66ccff */

/* RGB */
color: rgb(108, 99, 255);
color: rgba(108, 99, 255, 0.8);
color: rgb(108 99 255 / 80%);  /* Modern space-separated syntax */

/* HSL — most intuitive for design */
color: hsl(245deg 100% 69%);
color: hsl(245 100% 69% / 80%);
/* hsl( hue° saturation% lightness% ) */

/* OKLCH — recommended for 2026 (perceptually uniform) */
color: oklch(60% 0.18 290);
/* oklch( lightness% chroma hue° ) */
/* Lightness 0-100%, Chroma 0-0.4 (0=gray, 0.4=max vibrant), Hue 0-360 */

/* Color keywords */
color: transparent;  color: currentColor;
color: white;        color: black;

---

OKLCH vs HSL — When to Use Which

	HSL	OKLCH
Browser support	100%	93%+
Perceptually uniform	❌ Yellow at 50% ≠ Blue at 50%	✅ Equal lightness = equal visual weight
Good for dark mode	❌	✅
Good for accessibility contrast	❌	✅
Can use in AI prompts	✅ (AI knows HSL)	✅ (modern AI knows OKLCH)

---

Color Token System (Copy-Paste)

:root {
  /* Primary brand — OKLCH recommended */
  --color-primary:       oklch(60% 0.18 290);
  --color-primary-dark:  oklch(52% 0.20 290);
  --color-primary-light: oklch(70% 0.14 290);

  /* Semantic colors */
  --color-success: oklch(65% 0.18 150);
  --color-danger:  oklch(60% 0.22 25);
  --color-warning: oklch(75% 0.17 85);
  --color-info:    oklch(60% 0.15 230);

  /* Neutral scale (dark mode default) */
  --color-bg:            oklch(12% 0.01 260);
  --color-surface:       oklch(17% 0.015 260);
  --color-surface-2:     oklch(22% 0.015 260);
  --color-border:        oklch(30% 0.02 260);
  --color-text:          oklch(92% 0.01 260);
  --color-text-muted:    oklch(65% 0.015 260);
  --color-text-subtle:   oklch(45% 0.01 260);
}

---

color-mix() — Blend Two Colors

/* color-mix(in colorspace, color1 pct, color2 pct) */

color: color-mix(in oklch, var(--color-primary) 80%, white);
/* → primary at 80% + white at 20% → tinted primary */

color: color-mix(in oklch, var(--color-primary) 20%, var(--color-bg));
/* → subtle primary tint on background color */

/* Opacity equivalent */
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
/* → 10% opacity primary */

/* Dark/light variants without separate variables */
--hover-bg: color-mix(in oklch, var(--color-primary) 15%, var(--color-surface));

---

Relative Colors (Modern — Chrome 119+)

/* from keyword: derive a color from an existing one */
color: oklch(from var(--color-primary) calc(l + 0.15) c h);
/* → same hue and chroma, but 15% lighter */

color: oklch(from var(--color-primary) l c calc(h + 180));
/* → complementary color (opposite on color wheel) */

background: oklch(from var(--color-primary) 95% 0.02 h);
/* → very light tint — same hue as primary */

---

Gradients — Quick Reference

/* Linear */
background: linear-gradient(135deg, #6c63ff, #a855f7);
background: linear-gradient(to right, #6c63ff 30%, transparent);
background: linear-gradient(#6c63ff 0%, #a855f7 50%, #06b6d4 100%);

/* Radial */
background: radial-gradient(circle at center, #6c63ff, transparent);
background: radial-gradient(ellipse at 30% 50%, #6c63ff 20%, #0f0f0f);

/* Conic */
background: conic-gradient(from 180deg, #6c63ff, #a855f7, #06b6d4, #6c63ff);
/* Progress ring */
background: conic-gradient(var(--color-primary) 75%, var(--color-border) 0%);

/* Multi-layer backgrounds */
background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),  /* Overlay */
  url('hero.jpg') center / cover no-repeat;             /* Image */

/* Gradient text */
.c-gradient-text {
  background: linear-gradient(135deg, #6c63ff, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

---

Dark Mode Color Patterns

/* Strategy 1: @media prefers-color-scheme */
:root { --color-bg: #ffffff; --color-text: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  :root { --color-bg: #0f0f0f; --color-text: #f0f0f0; }
}

/* Strategy 2: data-theme attribute */
:root[data-theme="light"] { --color-bg: #ffffff; }
:root[data-theme="dark"]  { --color-bg: #0f0f0f; }

/* Strategy 3: .dark class (Tailwind-style / JavaScript) */
.dark { --color-bg: #0f0f0f; --color-text: #f0f0f0; }

---

opacity vs Alpha Channel

	opacity	Alpha in color (rgba, oklch .../ 0.5)
Affects children	✅ Yes	❌ No
GPU-accelerated (animate)	✅ Yes	✅ Yes
Inheritable	❌ No	N/A
Stacking context	✅ Creates one	❌ No
Use for	Fade in/out entire element	Background transparency only

/* Correct: element fade animation */
.c-overlay { opacity: 0; transition: opacity 0.3s; }
.c-overlay.is-active { opacity: 1; }

/* Correct: transparent background but solid text */
.c-glass { background: rgba(255, 255, 255, 0.1); } /* Text stays solid */
/* NOT: { opacity: 0.1; } ← This would make text 10% opacity too */