A Technical Dive into the Development, Challenges, and Solutions Behind HanaTones
Before we begin, I want to give a quick shoutout to @franciscolunadev82 for collaborating with me on this project. Thanks for your amazing contributions — this project wouldn't have been the same without you!
Managing colors for web projects often feels like a juggling act. As developers, we’ve all faced the inefficiencies: jumping between tools to generate tones, manually converting formats, or wrestling with accessibility checks. HanaTones was born to solve these issues, not just for designers but for developers like us.
This article isn’t a marketing pitch—it’s a behind-the-scenes look at the technical journey, challenges, and solutions we tackled while building HanaTones, a platform designed to streamline color management and empower creative workflows.
🚀 The Idea: Simplifying Color Management
The inspiration for HanaTones came from a problem many developers face:
- Spending hours copying HEX values across design tools and IDEs.
- Creating project-specific themes manually.
- Checking accessibility as a last-minute task instead of making it part of the workflow.
We wanted to create a developer-friendly tool that integrates seamlessly into modern frameworks like Tailwind CSS while offering robust features like contrast checks, theme management, and multi-format exports.
🛠️ Tech Stack: Building HanaTones
Frontend
We chose Next.js for its ability to handle server-side rendering (SSR) and static site generation (SSG). This gave us the flexibility to optimize for performance and user experience.
Key Features Implemented on the Frontend:
- Dynamic theme Rendering: Built using React Context and Zustand for state management to enable real-time updates.
- Color Generation Algorithms: Implemented custom logic in TypeScript to shades and tones programmatically.
Backend
We opted for Supabase for managing project data, authentication, and real-time updates.
- Database Structure: We normalized the data to store themes, user settings, and accessibility reports as relational tables for optimal querying.
- API Layer: Leveraged Supabase’s built-in API, call handling and utilized our own API routes for the service’s needs.
- A Type-safe API: Thanks to Supabase capabilities and its seamless integration with Typescript, we were able to create reliable and fully type-safe server actions and services.
State Management
We chose Zustand over heavier libraries like Redux because of its simplicity and ease of use in managing local UI states. The lightweight nature of Zustand ensures a fast, snappy user experience.
🔍 Challenges Faced and How We Solved Them
1. Generating Consistent Tones and Shades
Problem:
Many libraries (like chroma.js) generate colors but lack consistency when applied to larger themes.
Solution:
We created a custom algorithm using LAB color space to generate visually consistent shades and tints. LAB ensures uniformity across all tones, even with highly saturated colors.
2. Seamless Tailwind CSS Integration
Problem:
Exporting themes as Tailwind CSS classes required dynamic class generation with multiple fallback scenarios for missing color stops.
Solution:
We built a utility that dynamically creates configuration files (tailwind.config.js) based on user-defined themes. The files are generated in real-time and can be downloaded directly from the platform.
3. Accessibility Compliance
Problem:
Many tools treat accessibility checks as optional or secondary, but we wanted it to be a core feature.
Solution:
We integrated a contrast ratio analyzer using WCAG guidelines. The platform automatically flags color combinations that fail to meet the required AA or AAA standards, offering suggestions for improvement under reviews given to the themes.
🎨 The Core Features: Built for Developers
Here’s a breakdown of the features developers will appreciate:
1. Project Management
Organize your color palettes on a per-project basis to ensure seamless collaboration and consistency across teams.
- Assign unique palettes to each project.
- Keep all colors, tones, and configurations tied to a specific workspace.
- Easily switch between projects without losing track of design-specific palettes.
2. Theme Creation
Build comprehensive themes tailored to your projects with just a few clicks.
- Define primary, secondary, and accent colors for light and dark modes.
- Add custom tones and shades to expand your palette for UI flexibility.
- Save and manage multiple themes for different projects or clients.
3. Easy Theme Exports
Export your palettes effortlessly to integrate them into your codebase.
- Automatically generate CSS variables from your themes.
- Simplify the implementation of consistent colors across your project.
- Minimize the risk of errors from manual color assignment.
4. Accessibility Checker
Ensure your designs are inclusive and accessible to all users with built-in accessibility tools.
- Analyze contrast ratios for compliance with WCAG standards.
- Highlight problematic color combinations and suggest fixes in real-time.
- Create designs that work for everyone, including those with visual impairments.
5. Theme Reviews
Receive feedback on your color palette choices with an innovative review system.
- Grade your themes based on accessibility, contrast, and usability.
- Get insights into where your color scheme excels or needs improvement.
- Make informed decisions to optimize your designs for end-users.
6. Contrast Checker
Take the guesswork out of designing accessible UI elements.
- Quickly check the contrast between any two colors.
- Visualize contrast levels for various text sizes and weights.
- Guarantee readability across your application.
7. Gradient Maker
Create stunning gradients that elevate your designs in minutes.
- Generate linear, radial, or custom gradients with our own system.
- Adjust stops, angles, and colors for a polished finish.
- Export gradients for lots of different use cases.
8. Color Blindness Simulator
Design with inclusivity in mind by simulating how users with color blindness will experience your palettes.
- Test your colors against common types of color vision deficiencies, including protanopia, deuteranopia, and tritanopia. The simulator supports 8 different types of color blindness to simulate colors with.
- Identify potential accessibility challenges early in the design process.
- Make your designs more user-friendly for diverse audiences.
🌐 From Concept to Reality: Lessons Learned
1. Always Optimize for the End-User
The initial beta of HanaTones was overly complex, requiring users to manually input HEX values for tone generation. Feedback showed that simplicity was key. We introduced drag-and-drop interactions to streamline the process for users.
2. Balancing Functionality with Performance
Adding features like accessibility checks and dynamic exports introduced latency issues. We resolved this, and many other related issues by optimizing our pages for increased performance, both for loading speeds and interactivity with the UI. Another thing we did to combat the errors and provide a smooth operation sequence for the user is implementing asynchronous loading states and fallbacks, which proved to be essential in many different actions we created throughout the development of the HanaTones project.
3. Embrace Suggestions by Other Users
Many of our key features came from developers who faced challenges with TailwindCSS and CSS Variables. We initially thought developing these solutions was impossible, but with the right libraries and tools, we made it happen. Your feedback drives our improvements!
🔮 What’s Next for HanaTones?
We’re constantly evolving HanaTones to meet the needs of modern developers. Our roadmap includes:
- Dark Mode & Theming: Customize the UI to fit your workflow.
- Custom Algorithms: Allow users to define their own tone-generation rules.
- Marketplace for themes: Share and download theme created by the community.
✍️ Closing Thoughts
Building HanaTones has been a rewarding challenge, blending creativity and technical problem-solving. It’s more than a color tool; it’s a developer’s companion, designed to save time, reduce frustration, and enable better collaboration.
Whether you’re a solo developer or part of a design team, we hope HanaTones becomes a valuable part of your workflow.
Ready to streamline your design process? Head over to www.hanatones.com and start creating something amazing! Thanks for reading and we hope you’ve learned something new here!
Top comments (1)
It has been an absolute pleasure collaborating on this project! I hope you guys find Hanatones intuitive and highly useful. We worked diligently to create a tool that meets the needs of modern color management, and your feedback and insights are greatly appreciated!