PAWLETTE
A smart color grade generator
Palette Creation
The website allows users to create a color palette starting from a selected base color. This base color can be chosen using a color picker or by entering a HEX code. Harmonious shades are automatically generated, and the palette size can be set between 5 and 15 colors.
Brightness and Contrast Adjustment
Sliders let users adjust brightness and contrast levels of the palette. These changes impact the lighter and darker shades derived from the base color. Updates are applied in real-time for instant feedback.
Color Mixing and Blending
The site includes a “Colorize” feature to blend colors smoothly. Users can mix hues and add shadow or light accents with adjustable targets and intensities for each area.
Smart Color Naming
A built-in color database matches generated colors to known names. This ensures clear identification and helps organize colors with meaningful labels.
Preview with Color Bars
Generated colors are displayed as interactive bars. Each bar shows its HEX code, color name, and a percentage match to known colors, providing visual clarity for evaluation.
CSS Code Generation
The website creates CSS code for the finalized palette. The code includes custom variables with descriptive comments, ready for seamless integration into design projects.
Pure Color Mode
The Pure Color mode ensures that the displayed colors are true to their calculated values. When activated, this feature highlights the exact colors from the database that most closely match the generated palette. It helps maintain accuracy and consistency, especially when precise color representation is essential.
Responsive Design
The website is fully responsive, offering a seamless and user-friendly experience on any device, from desktops to smartphones.
DUPLICATS
Analyzes color data from JSON files, detecting duplicates, RGB-hex errors, and similar names. It streamlines color management with an intuitive interface and clear results, perfect for designers and developers.
File Loading and Validation
Users can upload JSON files containing color data. The app verifies the file format and validates the structure of the color entries, ensuring each has a name, a hexadecimal (hex) value, and RGB values.
Duplicate Detection
It identifies duplicate color names and hex codes within the uploaded file, displaying them clearly with counts and visual indicators like colored circles.
Error Correction
The app checks for mismatches between RGB and hex values, listing any discrepancies so they can be corrected.
Similarity Analysis
Using the Jaro-Winkler distance algorithm, it detects similar color names, helping users identify and address potential redundancies.
Progress Tracking
A dynamic progress bar provides real-time feedback during processing, ensuring users know how far along the app is.
Interactive UI
Users can expand or collapse sections to view detailed results, such as duplicates or errors, with a clean and visually intuitive interface.
Output Summary
After processing, the app generates a summary with total counts of colors, duplicates, and errors, enabling efficient decision-making for color design.
Responsive Design
The website is fully responsive, offering a seamless and user-friendly experience on any device, from desktops to smartphones.
CMYKATZE
Helps designers manage color palettes by comparing JSON files, spotting differences, and resolving conflicts. It merges palettes, removes duplicates, ensures consistency, and offers visual previews with a downloadable file for easy use.
Comparison of Color Files
Analyze two JSON color files to identify differences in color values (Hex/RGB) or names.
Conflict Resolution
Detect and highlight colors with identical names but different values, or matching Hex values with differing names.
Merging of Color Palettes
Combine colors from both files into a single unified file, intelligently resolving duplicates and conflicts.
Reference-Based Prioritization
Select one file as the reference to determine which color definitions take precedence during the merge.
Result Visualization
Display the results in an intuitive, color-coded format with visual previews, and generate a downloadable, cleaned file.
Validation of Color Data
Ensure consistency and accuracy by verifying Hex values and corresponding RGB data.
The Process
The goal was to code independently for the first time, with the support of AI, and to create a versatile and meaningful app that genuinely helps in designing corporate identities. Everything was implemented using vanilla JavaScript, CSS, and HTML. The core application is the Color Grade Generator. To provide a large and robust database of color names for the app, two additional tools were developed to ensure the database is stable, versatile, and reliable.
