CSS <color> データ型

構文

/* 名前付きの色 */
rebeccapurple
aliceblue

/* RGB 16 進値 */
#f09
#ff0099

/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* Lab (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* OkLCh (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* 相対的な CSS 色 */
/* HSL 色相の変更 */
hsl(from red 240deg s l)
/* HWB アルファチャネルの変更 */
hwb(from green h w b / 0.5)
/* LCH 輝度の変更 */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

<color> は以下のいずれかの方法で定義することができます。

• キーワード: <named-color> （blue や pink など）、<system-color>、currentColor
• 16 進記法: <hex-color> （#ff0000 など）
• <color-function> として、色空間の引数を関数記法を使用して:
  • sRGB 色空間: hsl(), hwb(), rgb()
  • CIELAB 色空間: lab(), lch()
  • Oklab 色空間: oklab(), oklch()
  • その他の色空間: color(), device-cmyk()
• 相対色の構文を用いると、既存の色に基づく新しい色を出力することができます。上記の色関数はいずれも、原色の前に from キーワードが先行し、その後に新しい出力色のためのチャンネル値の定義を続けることができます。
• 2 色の混合: color-mix()
• 色を指定することで、返される対照色を得たい場合: contrast-color().
• 2 つの色の指定。 1 つ目の色は明るいカラースキームに、 2 つ目は暗いカラースキームに使用: light-dark()

currentColor キーワード

currentColor キーワードは、要素の color プロパティの値を表します。これで color の値をプロパティが既定で受け取らなくても利用することができます。

currentColor が color プロパティの値として使用された場合、 color プロパティが継承した値が使用されます。

<div class="container">
  この文字列の色は青です。
  <div class="child"></div>
  このブロックは青い境界線で囲まれています。
</div>

.container {
  color: blue;
  border: 1px dashed currentColor;
}
.child {
  background: currentColor;
  height: 9px;
}

色成分の欠落

CSS 色関数の各成分（古いカンマ区切り文字を使用するものを除く）は、キーワード none を指定することで、欠落成分として指定することができます。

色補間における欠落成分を明示的に指定することは、一部の色成分は補間したいが他の色成分は補間したくないという用途に有益です。ほかはすべて、欠落した成分は適切な単位で値がゼロになります（0、0%、0deg など）。例えば、次の例は補間以外で使用しても等価な色です。

/* これらは等価 */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* これらは等価 */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);

補間

色の補間はグラデーション、トランジション、アニメーションで発生します。

<color> 値を補完する場合、まずは色が指定された色空間へ変換され、その計算値のそれぞれの成分が直線状に補間され、補間の速度はトランジションやアニメーションではイージング関数で定められます。 補間色空間の既定値は Oklab ですが、一部の色関連の関数記法では <color-interpolation-method> で上書きできます。

成分が欠落した補間

同じ色空間での色の補間

補間色空間内に正確に収まる色を補間するときは、一方の色から欠落している部品は、他の色から持っ ている同じ成分の値に置き換えられます。 例えば、 次の 2 つの表現は等価です。

color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))

異なる色空間からの色の補間: 類似成分

補間される色が補間色空間にない場合は、以下の表に記述されているように、同じカテゴリーの類似成分に基づいて、その欠落した成分が変換後の色に変換されます。

例

• color(xyz 0.2 0.1 0.6) における X (0.2) は rgb(50% 70% 30%) における R (50%) の類似です。
• hsl(0deg 100% 80%) における H (0deg) は oklch(80% 0.1 140) における H (140) の類似です。

補間色空間として OkLCh を使用し、下記の 2 色を例とします。

lch(80% 30 none)
color(display-p3 0.7 0.5 none)

前処理の手順は次の通りです。

1. 両方の色で欠けている成分をゼロ値で置き換えます。

   css

   lch(80% 30 0)
   color(display-p3 0.7 0.5 0)
   

2. 両方の色を補間色空間に変換します。

   css

   oklch(83.915% 0.0902 0.28)
   oklch(63.612% 0.1522 78.748)
   

3. 変換された色の成分が、対応する元の色の欠落した成分と類似している場合は、欠落した成分としてリセットします。

   css

   oklch(83.915% 0.0902 none)
   oklch(63.612% 0.1522 78.748)
   

4. 欠落している部品は、他の変換された色の同じ部品で置き換えます。

   css

   oklch(83.915% 0.0902 78.748)
   oklch(63.612% 0.1522 78.748)
   

アクセシビリティ

色を見分けることが難しい人がいます。 WCAG 2.2 勧告では、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは色と色のコントラストをご覧ください。

形式文法

<color> = 
  <color-base>        |
  currentColor        |
  <system-color>      |
  <contrast-color()>  |
  <device-cmyk()>     |
  <light-dark-color>  

<color-base> = 
  <hex-color>       |
  <color-function>  |
  <named-color>     |
  <color-mix()>     |
  transparent       

<system-color> = 
  AccentColor         |
  AccentColorText     |
  ActiveText          |
  ButtonBorder        |
  ButtonFace          |
  ButtonText          |
  Canvas              |
  CanvasText          |
  Field               |
  FieldText           |
  GrayText            |
  Highlight           |
  HighlightText       |
  LinkText            |
  Mark                |
  MarkText            |
  SelectedItem        |
  SelectedItemText    |
  VisitedText         |
  <deprecated-color>  

<contrast-color()> = 
  contrast-color( [ [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast>? ] | [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast> , <color># ] ] )  

<device-cmyk()> = 
  <legacy-device-cmyk-syntax>  |
  <modern-device-cmyk-syntax>  

<light-dark-color> = 
  light-dark( <color> , <color> )  

<color-function> = 
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <ictcp()>      |
  <jzazbz()>     |
  <jzczhz()>     |
  <alpha()>      |
  <color()>      |
  <hdr-color()>  

<named-color> = 
  aliceblue             |
  antiquewhite          |
  aqua                  |
  aquamarine            |
  azure                 |
  beige                 |
  bisque                |
  black                 |
  blanchedalmond        |
  blue                  |
  blueviolet            |
  brown                 |
  burlywood             |
  cadetblue             |
  chartreuse            |
  chocolate             |
  coral                 |
  cornflowerblue        |
  cornsilk              |
  crimson               |
  cyan                  |
  darkblue              |
  darkcyan              |
  darkgoldenrod         |
  darkgray              |
  darkgreen             |
  darkgrey              |
  darkkhaki             |
  darkmagenta           |
  darkolivegreen        |
  darkorange            |
  darkorchid            |
  darkred               |
  darksalmon            |
  darkseagreen          |
  darkslateblue         |
  darkslategray         |
  darkslategrey         |
  darkturquoise         |
  darkviolet            |
  deeppink              |
  deepskyblue           |
  dimgray               |
  dimgrey               |
  dodgerblue            |
  firebrick             |
  floralwhite           |
  forestgreen           |
  fuchsia               |
  gainsboro             |
  ghostwhite            |
  gold                  |
  goldenrod             |
  gray                  |
  green                 |
  greenyellow           |
  grey                  |
  honeydew              |
  hotpink               |
  indianred             |
  indigo                |
  ivory                 |
  khaki                 |
  lavender              |
  lavenderblush         |
  lawngreen             |
  lemonchiffon          |
  lightblue             |
  lightcoral            |
  lightcyan             |
  lightgoldenrodyellow  |
  lightgray             |
  lightgreen            |
  lightgrey             |
  lightpink             |
  lightsalmon           |
  lightseagreen         |
  lightskyblue          |
  lightslategray        |
  lightslategrey        |
  lightsteelblue        |
  lightyellow           |
  lime                  |
  limegreen             |
  linen                 |
  magenta               |
  maroon                |
  mediumaquamarine      |
  mediumblue            |
  mediumorchid          |
  mediumpurple          |
  mediumseagreen        |
  mediumslateblue       |
  mediumspringgreen     |
  mediumturquoise       |
  mediumvioletred       |
  midnightblue          |
  mintcream             |
  mistyrose             |
  moccasin              |
  navajowhite           |
  navy                  |
  oldlace               |
  olive                 |
  olivedrab             |
  orange                |
  orangered             |
  orchid                |
  palegoldenrod         |
  palegreen             |
  paleturquoise         |
  palevioletred         |
  papayawhip            |
  peachpuff             |
  peru                  |
  pink                  |
  plum                  |
  powderblue            |
  purple                |
  rebeccapurple         |
  red                   |
  rosybrown             |
  royalblue             |
  saddlebrown           |
  salmon                |
  sandybrown            |
  seagreen              |
  seashell              |
  sienna                |
  silver                |
  skyblue               |
  slateblue             |
  slategray             |
  slategrey             |
  snow                  |
  springgreen           |
  steelblue             |
  tan                   |
  teal                  |
  thistle               |
  tomato                |
  turquoise             |
  violet                |
  wheat                 |
  white                 |
  whitesmoke            |
  yellow                |
  yellowgreen           |
  transparent           

<color-mix()> = 
  color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )  

<deprecated-color> = 
  ActiveBorder         |
  ActiveCaption        |
  AppWorkspace         |
  Background           |
  ButtonHighlight      |
  ButtonShadow         |
  CaptionText          |
  InactiveBorder       |
  InactiveCaption      |
  InactiveCaptionText  |
  InfoBackground       |
  InfoText             |
  Menu                 |
  MenuText             |
  Scrollbar            |
  ThreeDDarkShadow     |
  ThreeDFace           |
  ThreeDHighlight      |
  ThreeDLightShadow    |
  ThreeDShadow         |
  Window               |
  WindowFrame          |
  WindowText           

<target-contrast> = 
  <wcag2>  

<legacy-device-cmyk-syntax> = 
  device-cmyk( <number>#{4} )  

<modern-device-cmyk-syntax> = 
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )  

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<rgba()> = 
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>  

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<hsla()> = 
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>  

<hwb()> = 
  hwb( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<ictcp()> = 
  ictcp( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzazbz()> = 
  jzazbz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzczhz()> = 
  jzczhz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha()> = 
  alpha( [ from <color> ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<hdr-color()> = 
  color-hdr( [ <color> && <number [0,∞]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<wcag2> = 
  wcag2                                           |
  wcag2( [ <number> | [ aa | aaa ] && large? ] )  

<cmyk-component> = 
  <number>      |
  <percentage>  |
  none          

<alpha-value> = 
  <number>      |
  <percentage>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

<modern-rgba-syntax> = 
  rgba( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsla-syntax> = 
  hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<colorspace-params> = 
  <custom-params>          |
  <predefined-rgb-params>  |
  <xyz-params>             

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<predefined-rgb> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  rec2100-pq         |
  rec2100-hlg        |
  rec2100-linear     

例

色の値のテスター

この例では、 <div> とテキスト入力を用意しています。入力欄に有効な色を入力すると、 <div> にその色が採用され、色の値をテストすることができます。

HTML

<div></div>
<hr />
<label for="color">有効な色の値を入力してください:</label>
<input type="text" id="color" />

div {
  height: 200px;
  width: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Invalid color value";
  }
});

結果

彩度最高の色

この例では、 sRGB 色空間で彩度が最高の sRGB 色を表示させています。

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}

結果

さまざまな明度の赤

この例では、 sRGB 色空間で様々な明度の赤を表示しています。

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}

div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}

結果

様々な彩度の赤

この例では、 sRGB 色空間でさまざまな彩度の赤を表示させています。

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}

結果

仕様書

ブラウザーの互換性

関連情報

• opacity: 要素レベルで透明度を定義するプロパティ
• <hue>: 色を色相の角度で表すデータ型
• color, background-color, border-color, box-shadow, outline-color, text-shadow: <color> を使用する共通のプロパティ
• color() 関数
• CSS を使った HTML の要素への色の適用
• 相対色の使用
• New functions, gradients, and hues in CSS colors (Level 4) (MDN blog, 2023)