ガイド
実務デザインでHEX・RGB・HSLを使い分けるタイミング
作業内容に合う形式を選び、デザインと実装の連携をスムーズにします。
HEX・RGB・HSLは同じ色の表現方法です。どれが優れているかより、用途に合うかで選びましょう。
Use HEX for fast copy-and-paste workflows
HEX is compact and common in UI handoff notes.
It works well when you mostly pick a fixed color and move on.
Use RGB when channels matter
RGB is useful when you need clear red/green/blue channel values.
It is also convenient when working with alpha transparency in rgba() patterns.
Use HSL when adjusting color behavior
HSL makes it easier to tweak hue, saturation, and lightness separately.
This is helpful when creating hover states or theme variants.
Avoid format mixing without a rule
Define a simple team convention so specs remain readable and consistent.
- Design documentation default format
- Development default format
- When conversion is required
Always verify the final rendered color
Even if the numbers match, context can change perception.
Check the color in actual UI before final approval.
Where format choice matters
- Writing CSS quickly during implementation.
- Adjusting lightness and saturation in design iteration.
- Copying values between design files and code.
Use the format that reduces friction
Most teams use multiple formats. What matters is choosing the one that makes each step clearer and easier to maintain.