Css color functions - v0 by Vercel

Let's just keep only the "primary color scale" example and get rid of the semantic, neutral colors and interactive states

256d ago

This simplified example focuses purely on generating a primary color scale using the color-mix() function. You can adjust the base color and see how it generates a complete 11-step color palette from light tints (mixing with white) to dark shades (mixing with black). Each swatch shows the exact CSS being applied and can be clicked to copy the value.

256d ago

no need for this input - let's just have the color picker input

Input

256d ago

lets "highlight" the 500 shade (the un-modified color) and make it a bit clearer how we are shading with white in 50-400 and black in 600-950.

lets also add 2 new color pickers for setting the "white tint" and "black tint" colors to make the example more fun

256d ago

Let's just keep only the "primary color scale" example and get rid of the semantic, neutral colors and interactive states

256d ago

no need for this input - let's just have the color picker input

Input

256d ago

lets "highlight" the 500 shade (the un-modified color) and make it a bit clearer how we are shading with white in 50-400 and black in 600-950.

lets also add 2 new color pickers for setting the "white tint" and "black tint" colors to make the example more fun

256d ago