About
what is it?
A color play and preview app.
client
Personal.
duration
Work in progress.
roles
Visual design, research and development.
website
Project Overview
Komorebi color play is a web-based app that empowers users to explore and create harmonious color schemes inspired by the work of Japanese artist and color researcher Sanzo Wada (1883-1967). The application allows users to select a base color, generate palettes, and convert colors to various standards while providing extensive color data and accessibility features.
Name
“Komorebi” (木漏れ日) is a Japanese word that translates to “sunlight filtering through trees” or more poetically, “the dappled sunlight that filters through the leaves of trees.” The term originates from combining two kanji characters:
- 木 (ki) – which means “tree” or “wood”
- 滲れ日 (moreribi) – a combination of three characters:
- 滲れ (morere) meaning “drip” or “seep through”
- 日 (bi) meaning “sun” or “day”
So, when combined, 木漏れ日 (komorebi) describes the visual phenomenon of sunlight passing through the leaves and branches of trees, casting dappled shadows and patterns on the ground below. This natural and fleeting interplay of light and shadow is often associated with serenity, beauty, and a sense of transience in Japanese culture.
The name “Komorebi” was chosen for the color play app to evoke feelings of harmony, subtlety, and natural inspiration – qualities that the application aims to embody through its intuitive design and exploration of color combinations.
Design Goals
- Intuitive Color Selection & Generation
- Simplify the process of picking and generating color palettes.
Provide clear visualization of generated colors in different harmony types (complementary, analogous, triad, etc.). - Provide clear visualization of generated colors in different harmony types (complementary, analogous, triad, etc.).
2. Extensive Color Data & Conversion
- Display key color properties like luminosity, relative luminance, and contrast ratio.
- Convert selected colors to various standards (HEX, RGB, RAL, HUE, CMYK, HSL, HSB, LAB, HKS, COPIC, IKEA, PANTONE).
3. Accessibility & Visual Impairment Simulation
- Enable users to switch between light and dark themes.
- Simulate visual disabilities (colorblindness, low vision) for accessibility testing.
4. Custom Palette Visualization & Component Preview
- Allow users to create custom palettes from generated colors.
- Preview custom palettes on various design components with a dedicated vizualizer tool.
Design Process
- Research & Inspiration
- Studied Sanzo Wada’s “A Dictionary of Color Combinations” for color harmonies and nomenclature inspiration.
- Investigated existing color palette generators to identify gaps and opportunities.
2. Information Architecture (IA) & User Flow
- Defined key sections and features: Main Canvas, Color History, Vizualizer, Theme Changer, Display Options, Vision Simulation Tool.
- Created user flows for common tasks, such as generating a new palette or simulating visual impairments.
3. Wireframes & Prototyping
- Sketched low-fidelity wireframes to establish layout and functionality.
- Iterated on wireframes based on usability testing feedback, focusing on intuitive color selection and generation.
4. UI Design & Visual Style
- Developed a design language defined by a mixture of my personal design vision and minimalist Japanese design aesthetics.
- Created high-fidelity mockups with consistent typography, color, and spacing throughout the application.
5. Interaction Design & Prototyping
- Designed interactive elements, such as tooltips, modals, and animations, to enhance usability and delight.
- Built an interactive prototype using Figma to test design decisions and gather user feedback.
UI/UX Features & Components
A. Main Canvas
- Color selection area with base color picker and harmony type selector.
- Generated palette display with color swatches in various harmony types (complementary, analogous, triad, tetrad, square, etc.).
- Color data panel displaying key properties like luminosity, relative luminance, contrast ratio, and conversions to various color standards.
B. Color History
- LocalStorage-based color history list to revisit previously generated palettes.
- Easy access to past projects and inspiration.
C. Vizualizer Tool
- Panel sliding in from the right side for adding colors from generated palettes to create custom color sets.
- Component preview area for visualizing custom palettes on various design elements (buttons, cards, typography). Note: This feature is not yet completed and requires extensive bug fixing.
D. Theme Changer & Display Options
- Light-dark theme changer with automatic contrast adjustment for accessibility.
- Display options menu to enable/disable color name, HEX, RGB, HSL, and contrast ratio display for each color in the app.
E. Vision Simulation Tool
- Slider-based simulation of visual disabilities (colorblindness, low vision) to aid in accessibility testing.
- Real-time color visualization updates to reflect simulated impairments.
F. Color Picker & Eye Dropper Tools
- Integrated color picker and eye dropper tools for accurate color selection.
- Quickly replace the main base color using generated colors for faster visualization and testing.
UI/UX Features & Components
Komorebi’s design system is built upon a consistent grid, typography, color, and spacing hierarchy. The application uses Sanzo Wada’s original color names as a base and extends them with modifiers to describe variations:
- “Nibi” (dull) for low saturation colors
- “Azayaka” (vivid) for high saturation colors
- “Kurai” (dark) for low lightness colors
- “Usui” (light) for medium-low lightness colors
- “Akarui” (bright) for high lightness colors
Conclusion
Komorebi is a comprehensive and intuitive color play app. By offering extensive color data, accessibility features, and a user-friendly interface, Komorebi empowers users to explore, generate, and test color palettes with ease. The application’s modular design allows for continuous improvement and expansion, with plans to complete the Vizualizer tool and integrate additional features based on user feedback.
Future improvements
- Complete the Vizualizer tool functionality.
- Fixing bugs, especially on mobile devices.
- Proper branding.
- Integrate a color mixing palette for manual color tweaking.
- Expand color conversion standards (e.g., add NCS, RYB).
- Implement a sharing feature for generated palettes.
- Enhance accessibility by following WCAG guidelines more strictly.
Links
komorebi


