Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
カラー Widely available

currentColor

colorプロパティの値を他のプロパティ（border、box-shadow、SVGのfillなど）で参照できるキーワードです。テーマカラーの一貫性を保ちながら、変更箇所を最小限に抑えられます。カスタムプロパティと組み合わせることで、柔軟なカラーシステムを構築できます。

カラーキーワードテーマ設計

概要

colorプロパティの値を他のプロパティ（border、box-shadow、SVGのfillなど）で参照できるキーワードです。テーマカラーの一貫性を保ちながら、変更箇所を最小限に抑えられます。カスタムプロパティと組み合わせることで、柔軟なカラーシステムを構築できます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 4+
Firefox 1.5+

モバイル

Chrome Android 18+
Safari iOS 3.2+
Firefox Android 4+

基本構文

CSS 
.icon-button {
  color: #3b82f6;
  border: 2px solid currentColor;
  fill: currentColor;
}

実務での使いどころ

  • アイコンとテキストの色統一

    SVGアイコンのfillにcurrentColorを使用し、親要素のcolor変更だけでテキストとアイコンの色を同時に変更します。

注意点

  • currentColorはcolorプロパティ自体のデフォルト値としても使用されるため、循環参照に注意が必要です。

アクセシビリティ

  • currentColorに依存する要素のコントラスト比が、親要素のcolor変更時にも十分に保たれることを確認してください。

参考リンク