The Color Ramp is a tool designed to create harmonious and accessible color ramps in less than 5 seconds, no bullshit.
The ramps follow the TailwindCSS 11-shade scale (50-950) and ensures that all generated colors meet at least WCAG 2.1 AA accessibility standards against their appropriate text color (black or white).
This tool is ideal for designers and developers looking to quickly generate harmonious, consistent, and accessible Light and Dark mode ramps for their design projects.
Why did I create this tool?
When working on various design systems, I need to create Light and Dark mode ramps using base/brand colors.
After using countless color palette/ramp generators, both online and Figma plugins, they all fell short one way or another.
Some tools, albeit powerful, were convoluted to use. Others didn't provide a way to create Dark Mode ramps, either because they were built to create a Light Mode ramp only, or because they flipped the Light Mode ramp to create a Dark Mode ramp. Obviously, dark mode shades are not the same as light mode shades.
Plus, the ramps generated by some of these tools didn't account for WCAG 2.1 AA accessibility standards at all either.
So, with the help of AI, my knowledge of HTML and CSS, and my design experience, I decided to code my own ramp generator tool 😊.
Features
Accessibility Focus: Each shade displays its WCAG 2.1 contrast ratio compliance (AAA, AA, or Fail) against a determined black or white text color.
Contrast Ratios: Displays the calculated contrast ratio.
Color Input: Enter a base color using HEX, RGB, or standard HTML color names.
HEX (with and without #). For example: #001D38 or 001D38.
RGB (without the % but with the spaces). For example: 0 29 56
Standard HTML color names. For example: red, green, blue, etc.
Color Uniqueness: Implements logic to guarantee that all generated colors across both ramps are unique.
Lightest Light and Darkest Dark: In both ramps, this tool accounts for the lightest light shade possible without being completely white, and the darkest dark shade possible without being completely black. This ensures all shades across the ramps, retain their hue derived from the base color.
Live Color Preview: See a preview of your input base color instantly.
TailwindCSS Scale: Shades are labeled according to the TailwindCSS numeric scale (50, 100, …, 900, 950).
Color Value Display: Shows HEX and HSL values for each generated shade.
Copy to Clipboard: Click on any HEX or HSL value to copy it to your clipboard. A toast notification confirms the action.
Key Accessibility Considerations
Contrast Ratios: The primary goal is to generate colors that meet WCAG AA (4.5:1) or AAA (7:1) contrast ratios where appropriate. The tool dynamically determines if black or white text should be used for each shade and adjusts the shade to meet at least 4.5:1 against that text.
All Colors Pass Accessibility: The tool implements logic to ensure that all generated colors across both ramps meet at least WCAG AA (4.5:1) contrast ratios against black or white text.
Report a Color that Doesn't Pass Accessibility: Use the provided form to report it. Note: The color reporting form will only become visible if a color doesn't pass accessibility.
Why That Background?
It's a representation of the "Fabric of Design".
Like a fabric in the wind, design it's always changing, always evolving, always adapting.
The pointer/cursor effect is a representation of the designer. We move all over the morphing fabric of design creating and generating ideas, while always staying in motion learning new skills, improving current ones, and sharing our knowledge with others.
Core Technologies & Libraries
HTML5: For the basic structure of the application.
CSS3: For styling the application. All styles are custom-written.
JavaScript (ES6+): For all the client-side application logic, including color manipulation, ramp generation, UI updates, and event handling.
TinyColor2: A JavaScript library used extensively on the client-side for color parsing, conversion, manipulation (lighten, darken, saturate, etc.), and contrast ratio calculations.
Node.js: Powers the backend development server.
Chokidar: A file system watcher used by the development server for tasks like automatic browser reloading on file changes.
WebSocket (ws library): Enables the live-reload functionality in the development server.
Three.js: A 3D graphics library used to create the interactive animated background.
Windsurf: An AI-powered IDE application that helps with code completion, refactoring, and other development tasks.
Updates
v0.3:
Implemented URL parameters for the color used for easier sharing. Regardless of the color space used (HEX, RGB, or color name), the URL parameter will always use the HEX value.
Enhanced the accessibility of the Default Ramp Mode toggle switch.
Improved text formatting across the page.
Fixed some responsiveness display issues.
Added a brand icon to the header, the footer, and a favicon.
v0.2:
Added a reporting system for accessibility failures, including a new contact modal.
Dynamically populate some fields on the color reporting modal for quick submission.
Standardized the design and behavior of all modals for a consistent user experience.
Conducted a major code cleanup by removing the outdated refresh timestamp feature, color failing test scripts, and other unused code.
v0.1: Initial release.
What is Default Ramp Mode?
Think of the "Default Ramp Mode" as your main color direction.
Your Base Color: When you set a default (Light or Dark) ramp, that ramp is based on your exact chosen color (base color). You'll see a small circle on that color swatch for easy identification.
Smart Harmony: The other ramp (the non-default one) is based on a slightly tweaked version of your base color. This subtle difference in your Light and Dark themes ensures that they are different enough to look great together, while still feeling connected to your base color.
Regardless of the base color you choose, the ramps will always be harmonious and accessible.
Color Ramp