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

currentColor

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

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.currentcolor
1
12
1.5
4
18
3.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

border to inheritance

CSS border to inheritance demo.

プレビュー全画面表示

SVG Fill to inheritance

CSS SVG fill to inheritance demo.

プレビュー全画面表示

Box-shadow to inheritance

CSS Box-shadow to inheritance demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク