Create harmonious and accessible color ramps following the TailwindCSS scale.
All shades are guaranteed to meet WCAG 2.1 AA and AAA accessibility standards.
Default Ramp Mode:LightDark
Light Mode Ramp
Dark Mode Ramp
Copied to clipboard!
Description
The Color Ramp Generator is a web-based tool designed to create harmonious and accessible color ramps following the TailwindCSS scale. Supports HEX, RGB, and color name inputs. base color. It follows 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 a consistent and accessible set of color shades for their design projects.
Features
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.
Live Color Preview: See a preview of your input base color instantly.
Predefined Color Swatches: Quickly select from a range of common colors.
Dynamic Ramp Generation: Automatically generates 11-shade ramps for both Light and Dark modes.
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.
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 Uniqueness: Implements logic to guarantee that all generated colors across both ramps are unique.
Dark Mode Logic: Includes specific adjustments for the dark mode ramp to ensure proper lightness progression (e.g., the 950 shade is the lightest, and the 100 shade is adjusted relative to the 50 and 200 shades).
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.
Every single color passes 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.
Did you find a color that doesn't pass accessibility? Please let me know ASAP: [email protected] - All I need is the base color you used.
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.
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.