# color

> テキストの色を指定するプロパティです。色名、16進数（#000000）、RGB、RGBA、HSL、HSLAなど様々な色形式で指定可能です。currentColorキーワードで親要素の色を継承することもできます。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/color/

## 構文

```css
color: <color>
```

## Tailwindでは

- `text-gray-900` → color: パレットのgray-900
- `text-white` → color: #fff
- `text-red-500/50` → color: red-500を50%の透明度で
- 一般形: `text-{color}-{shade}（/nで透明度）`
- 任意値: `text-[#b0413e]`
- 補足: v4の標準パレットはOKLCHで定義されている。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 16進数カラーコードで青色を指定

```css
color: #3b82f6;
```

### 例2: RGB値で同じ青色を指定

```css
color: rgb(59, 130, 246);
```

### 例3: HSL値で同じ青色を指定

```css
color: hsl(217, 91%, 60%);
```

## TIPS

CSS変数と組み合わせるとテーマ切り替えが簡単になる。

## AIがよく間違えるポイント

AIが見落としがちなのはcurrentColorの活用です。SVGアイコンやborderにcurrentColorを指定しておけば、colorを変えるだけで一括追従します。またリンク色をcolorで上書きする際、:visited/:hover等の状態まで面倒を見ない生成コードが多いので、状態込みで依頼すると質が上がります。

## AIへの依頼文例

- アイコン・ボーダー・テキストが1箇所のcolor変更で全て追従するボタンを、currentColorで設計して

## 関連プロパティ

- [background-color](https://www.css-dictionary.com/property/background-color.md)
- [border](https://www.css-dictionary.com/property/border.md)
- [color-mix](https://www.css-dictionary.com/property/color-mix.md)