Color Theming Made Easy: The Razorpay's Checkout Story
summary
Razorpay Checkout V2 auto-generates a full UI palette from a single primary HSL hue, producing tints, shades, on-colors (contrast-chosen black/white per WCAG-style rules) and illustration layers (shadow, midtone, highlight, accent). Implementation converts input HEX→HSL, computes variants, injects them as root CSS variables via a Helmet style tag and exposes them to Tailwind classes; runtime theme switches change only variables so theming updates instantly. Demo shows the system applied across inputs, CTAs and illustrations and it works in production checkout layouts.
AI-written summary · about
chapters (9)
- 0:00Introduction to Razorpay
- 3:14Checkout V2 evolution
- 6:09Understanding HSL colors
- 8:21Demo setup and code walkthrough
- 11:52Building the theme palette
- 16:07Generating on colors
- 24:24Theming illustrations
- 27:53Accessibility and contrast
- 28:59Key takeaways and demo link
related talks
28mTheming with Design Tokens
19mWhen colour theory meets technology
28mBuilding the Dark Mode of Your Dreams with Color Science
20mProgrammable colors: bridging design and code
25mPractical Color Theory for People Who Code
19mOn the Road to the World's Best Branding
53mPractical Color Theory for People Who Code
43mRethinking Colors in Design Systems: A CSS Approach to Idiomatic Design