Color Formats & Technical Guides
HEX, RGB, HSL, CSS colors and design tokens explained.
These guides cover how colors are written in code. Start with HEX, RGB and HSL, then learn transparency, modern CSS color functions such as OKLCH and color-mix(), gradients, theming with CSS custom properties, and how design tokens keep a color system consistent.
Guides
- Color Formats & Technical GuidesHEX vs RGB vs HSL: Color Codes ExplainedHow HEX, RGB and HSL color codes work, when to use each one, how to convert between them, and how to add transparency.7 min readBeginnerRead the full guide
- Color Formats & Technical GuidesAlpha, Transparency and Opacity in CSS ColorsHow alpha works in HEX, rgb() and hsl(), how it differs from the opacity property, how see-through colors blend, and how to check their contrast.7 min readIntermediateRead the full guide
- Color Formats & Technical GuidesModern CSS Color Functions: OKLCH, color-mix() and MoreA practical tour of CSS color functions, from rgb() and hsl() to oklch(), color(), color-mix() and relative colors, with browser support as of November 2026.6 min readIntermediateRead the full guide
- Color Formats & Technical GuidesCSS Gradients: Linear, Radial and Conic, Without the Muddy MiddleHow to write linear, radial and conic CSS gradients, use color stops and hard stops, avoid gray dead zones, and keep text on a gradient readable.6 min readIntermediateRead the full guide
- Color Formats & Technical GuidesCSS Custom Properties for Colors and ThemesHow to store palette colors as CSS variables, name them well, add fallbacks, and build light and dark themes with prefers-color-scheme and light-dark().5 min readIntermediateRead the full guide
- Color Formats & Technical GuidesDesign Tokens and Color Systems: From Palette to CodeHow primitive, semantic and component color tokens fit together, how to build scales and themes with contrast built in, and how to share tokens with code.6 min readIntermediateRead the full guide