Build a theme from an image
Start with a photo or logo, develop its colors into a palette, and create numbered steps for your primary color.
Choose a tool for your design task
A palette combines colors for different roles; a scale creates light and dark versions of one color. Contrast checks and color vision simulations answer different questions, so use both when color carries meaning.
Review accessible color choices
Convert a handoff value, test the actual text/background pair, and review whether labels and charts rely on hue alone.
Style a card or overlay
Create the background, shape the corners, and add depth. Copy each CSS result into the same component and review the combined effect.