Native Palette

Below is a comprehensive showcase of every standard CSS named color, seamlessly transformed into a fully shaded native palette via Maple's OKLCH tone system. Rather than shipping tens of kilobytes of static CSS, each row dynamically generates 11 distinct tones—ranging from 50 to 950—entirely on the fly.

Beyond the native standards, this interactive playground provides:

• Custom Palettes: Build your own palette from scratch by adding new base colors.
• Shared Palettes: Browse shared palettes directly via URL, or generate a link to share your own.
• Global Tuning: Fine-tune CSS variables for all colors simultaneously.
• Base Color Reference: The small dot beside each name shows the browser's native rendering of that base color. Note that, in Maple's color system bg-blue is not equal to bg-blue-500. To learn more about the difference, see Adaptive Tone Normalization section.
• Match Markers: The top-right marker on a swatch indicates that swatch is the closest mathematical match to the base color.