ガイド
HEX・RGB・HSLの違いと使い分け
CSSやデザイン作業で実用的な色形式を選ぶためのガイドです。
3つの形式は同じ色を別の見方で表します。用途で選ぶのが最適です。
HEX is compact and familiar
HEX values are short and common in frontend workflows.
They are easy to copy, but not always intuitive for manual tweaking.
RGB is explicit for screen channels
RGB shows red, green, and blue channel values directly.
It is useful when teams discuss channel-level adjustments.
HSL is practical for tuning
HSL makes hue, saturation, and lightness easier to reason about.
It is often the fastest format for creating variants like hover or muted states.
- Use HEX for quick copy-paste.
- Use RGB for channel clarity.
- Use HSL for controlled adjustments.
Choose one default, not one forever
Set a team default format to reduce inconsistency.
Switch formats when debugging or design tasks require it.
Common decisions
- Writing CSS quickly.
- Sharing colors with teammates.
- Adjusting lightness or saturation.
Use the format that speeds your work
Keep a preferred format for consistency, but convert when a task needs better control.