#ffffffと#fffはどっちを書くべきか

CSSで色を指定するとき、白なら #ffffff と #fff の2つの書き方があります。

結論から言うと、「基本は #fff でいい」です。

ただし、なんとなく短いからという理由だけで選ぶのは危険です。

ちゃんと仕組みと使い分けを理解しておくべきです。

⸻

そもそも何が違うのか

この2つは完全に同じ色です。

 • #ffffff

 • #fff

これは省略記法かどうかの違いだけで、内部的には

 • #ffffff = R:ff / G:ff / B:ff

 • #fff = #ffffff を3桁に省略したもの

つまり

 • #abc → #aabbcc

というルールで展開されます。

⸻

じゃあなぜ6桁が存在するのか

ここを理解してないと判断をミスります。

3桁にできるのは「各値が同じペアのときだけ」です。

例：

 • #ffffff → OK（ff ff ff）

 • #000000 → OK（00 00 00）

でも

 • #f0f0f0 → NG（f0 は分解できない）

つまり、全部の色が省略できるわけではない。

⸻

実務での結論

1. 省略できるなら #fff を使う

無駄に長く書く意味はない。

 • 可読性：変わらない

 • パフォーマンス：微差だが短い方が良い

 • 書く量：減る

なので基本はこれでOK。

⸻

2. チーム開発ならルールに従え

ここを無視するのは素人。

プロジェクトによっては

 • 「必ず6桁で統一」

 • 「3桁OK」

などルールがあります。

理由はシンプルで、コードの一貫性のため。

あなた一人の最適より、チーム全体の統一が優先。

⸻

3. デザインツールとの整合性を見る

Figmaなどは基本6桁で吐きます。

 • デザイン → #ffffff

 • コード → #fff

ここがズレると

 • 比較しづらい

 • コピペ効率が落ちる

なので、デザイナーとの連携があるなら6桁に寄せる判断も普通にアリ。

⸻

よくある勘違い

「短い方が正義」

→ 半分正しいけど浅い

本質は「短いかどうか」じゃなくて

 • 再現性

 • 可読性

 • チームルール

⸻

「全部3桁にすべき」

→ 無理

そもそもできない色がある時点で破綻する。

⸻

結論

 • 単体開発 → #fffでいい

 • チーム開発 → ルールに従え

 • デザイン連携あり → 6桁も検討

⸻

最後に

こういう細かい話を軽く扱う人は多いですが、

積み重なるとコードの質に直結します。

「なんとなく短いから」ではなく、

状況に応じて判断できるようにしておくことが重要です。