HEX vs RGB explained
Use the right color format at the right stage: HEX for tokens, RGB for calculations, and HSL for fast exploration.
Quick summary
HEX is the cleanest format for static tokens and handoff.
RGB is best when code needs math, alpha, or blending.
HSL is easiest for designers when exploring hue and saturation changes.
1. Use HEX for stable tokens
HEX is compact, familiar, and easy to scan in design libraries and CSS tokens.
- It keeps token tables concise and easy to copy.
- It works well for canonical design-system values.
- It is usually the cleanest display format in documentation.
2. Use RGB when code needs control
RGB becomes more useful when the implementation needs calculations rather than static display.
- It is easier to generate transparency and overlay effects.
- It supports blending, chart adjustments, and programmatic theming.
- It is the most practical format when engineering is manipulating channels.
3. Use HSL for quick exploration
HSL makes experimentation easier because hue, saturation, and lightness are separated.
- Designers can adjust mood without guessing channel math.
- Tone shifts become more intuitive during palette ideation.
- It is especially helpful while building ramps and state colors.
- Locking the whole workflow to one format out of habit.
- Hardcoding values in components instead of aliasing tokens.
- Treating format conversion as a manual afterthought.
- Store canonical tokens in a format your team can read quickly.
- Expose alternate formats in docs if engineering benefits from them.
- Keep format conversion in tooling, not in ad hoc handoff messages.
- Use token aliases so themes can swap values safely.
Use this with ColorLab tools
References
Next reads
Design System Guide
Color palette for design systems
Build a design system palette that translates into tokens, scales across products, and keeps future components easier to maintain.
Read nextGradient Design Guide
How to use gradients in modern web design
Use gradients in modern web design without turning the interface into a trend demo or hurting readability.
Read nextPricing UX Guide
Pricing page color palette ideas
Use pricing page color systems that help plans compare clearly, keep trust high, and highlight the right plan without pressure tactics.
Read nextProduct UX Guide
Onboarding screen color strategy
Use color in onboarding screens to create warmth, focus, and trust without overwhelming first-time users.
Read next