A tint lightens a color by mixing it with white; a shade darkens it by mixing with black. Together they form the scale every design system needs for backgrounds, borders and text hierarchy.
Set your base color and step count, then click any swatch to copy its HEX. Use the SCSS export to build variables for a whole palette in one go.
Frequently Asked Questions
Q: What is the difference between a tint and a shade?
What is the difference between a tint and a shade? A tint adds white to the base color (lighter), a shade adds black (darker). Both keep the same hue.
Q: How many steps should I use?
How many steps should I use? 5–10 steps per side covers most design needs; 20 steps total is ideal for charts and data visualization.
Q: How do I use the SCSS export?
How do I use the SCSS export? Copy the block into your .scss file and reference variables like $tint-2 or $shade-1 anywhere in your styles.
Q: What is the 60-30-10 color rule?
What is the 60-30-10 color rule? Use 60% of a neutral, 30% of a secondary color and 10% of an accent — your base color often plays the 10% accent role.
Q: Can I copy a single color?
Can I copy a single color? Yes — click any swatch in the grid or the canvas strip and its HEX is copied instantly.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.