CSS Color Formats 日本語ガイド

Browsers accept several CSS color syntaxes. Knowing which your support matrix allows prevents silent fallbacks.

Hex in CSS

.brand {
  color: #2563eb;
  border-color: #2563eb80; /* 8-digit hex with alpha in modern browsers */
}

Lowercase hex is a common style guide choice; browsers treat #ABC and #abc the same.

Functional rgb() and hsl()

Legacy comma syntax:

background: rgba(37, 99, 235, 0.12);

Modern space-separated syntax (CSS Color Level 4):

background: rgb(37 99 235 / 0.12);
color: hsl(221 83% 53%);

Autoprefixers and minifiers may normalize formats—keep source tokens consistent in your design system repo.

Named colors and keywords

transparent, currentColor, and the long list of named colors (tomato, rebeccapurple) compile quickly in prototypes. Production themes should prefer tokens over random named colors to avoid drift.

currentColor inheritance

color: currentColor lets icons and borders follow text color—useful for buttons that change state without duplicating hex values.

Modern spaces: oklch and color-mix

Newer CSS supports perceptually uniform spaces:

--accent: oklch(58% 0.22 264);
--hover: color-mix(in oklch, var(--accent) 85%, black);

Adoption depends on your browser targets. Fallback stacks often keep sRGB hex first, then @supports blocks for wide-gamut themes.

Email and PDF constraints

Many HTML email clients strip hsl() and variables. Export inline hex for templates even if the web app uses CSS variables internally.

Key takeaway

Pick one authoring format for tokens, generate platform-specific outputs at build time, and document which surfaces require hex-only fallbacks.