色と背景の指定方法 — hex・rgb・hsl・oklchとグラデーションの使い分け

color: #2563eb;        /* 6桁：不透明 */
color: #2563eb80;      /* 8桁：透明度50% */
color: #fff;           /* 3桁：省略形（#ffffff） */

color: rgb(37, 99, 235);             /* 不透明 */
color: rgba(37, 99, 235, 0.5);       /* 透明度50%（旧記法） */
color: rgb(37 99 235 / 50%);         /* 透明度50%（新記法） */

/* 色相(0-360°) 彩度(%) 明度(%) */
color: hsl(220, 80%, 53%);            /* 不透明 */
color: hsl(220 80% 53% / 50%);        /* 透明度50% */

/* 元の色 */
color: hsl(220, 80%, 53%);
 
/* 少し暗くしたい → 明度を下げるだけ */
color: hsl(220, 80%, 40%);
 
/* 彩度を下げて落ち着いた色に → 彩度を下げるだけ */
color: hsl(220, 40%, 53%);
 
/* 同系色のバリエーション → 明度だけ変える */
--color-primary: hsl(220, 80%, 53%);
--color-primary-light: hsl(220, 80%, 70%);
--color-primary-dark: hsl(220, 80%, 35%);

color: oklch(0.55 0.2 260);              /* Lightness Chroma Hue */
color: oklch(0.55 0.2 260 / 50%);        /* 透明度付き */

/* HSL: 同じ明度50%なのに、黄色の方がずっと明るく見える */
color: hsl(60, 100%, 50%);   /* 黄色 — とても明るく見える */
color: hsl(240, 100%, 50%);  /* 青 — 暗く見える */
 
/* OKLCH: 同じLightness 0.7なら、本当に同程度の明るさに見える */
color: oklch(0.7 0.15 90);   /* 黄色系 */
color: oklch(0.7 0.15 260);  /* 青系 */

.icon-button {
  color: #2563eb;
  border: 1px solid currentColor;  /* colorと同じ#2563eb */
  fill: currentColor;              /* SVGのfillにも使える */
}
 
.icon-button:hover {
  color: #1d4ed8;
  /* border と fill も自動で変わる */
}

/* 背景色 */
.card {
  background-color: #f8fafc;
}
 
/* 要素全体の透明度（子要素も含めて透明になる） */
.overlay {
  opacity: 0.5;
}
 
/* 背景色だけ半透明にしたい場合 → 色の透明度を使う */
.overlay-bg {
  background-color: rgb(0 0 0 / 50%);
  /* テキストは不透明のまま */
}

/* 角度を指定 */
.hero {
  background-image: linear-gradient(135deg, #667eea, #764ba2);
}
 
/* 上から下（デフォルト） */
.fade {
  background-image: linear-gradient(#f0f9ff, #e0f2fe);
}
 
/* 3色以上 */
.rainbow {
  background-image: linear-gradient(90deg, #f87171, #fbbf24, #34d399);
}

.spotlight {
  background-image: radial-gradient(circle at center, #fff, #f1f5f9);
}

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero {
  background-image: url('/images/hero.jpg');
  background-size: cover;       /* 領域をすべて覆う */
  background-position: center;  /* 中央基準 */
  background-repeat: no-repeat; /* 繰り返さない */
}
 
/* ショートハンド */
.hero {
  background: url('/images/hero.jpg') center / cover no-repeat;
}

.hero-overlay {
  background: 
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)),
    url('/images/hero.jpg') center / cover no-repeat;
  color: white;
}