Color Palette Generator: Shades, Tints & Harmonies

Tints, shades, and the 50-900 scale

A tint is a color mixed with white; a shade is a color mixed with black. This generator builds ten steps from one base color. Your color sits at 500. Steps 50 to 400 mix it progressively toward white, from 90 percent white at 50 down to 20 percent at 400. Steps 600 to 900 mix it toward black, ending at 65 percent darker at 900.

The naming follows the convention used by Tailwind CSS and Material Design, so the output drops straight into a design system. Use 50 and 100 for tinted backgrounds and table stripes, 200 and 300 for borders and disabled states, 500 and 600 for buttons and primary actions, and 700 to 900 for text and hover states on light backgrounds.

Color harmonies from the color wheel

The harmony palettes rotate the hue of your base color while keeping its saturation and lightness. Complementary pairs the color with its opposite, 180 degrees away: teal with coral, blue with orange. It gives maximum contrast and works best as one dominant color with the complement as a small accent.

Analogous uses neighbors 30 degrees either side. It is calm and cohesive, common in nature photography and wellness brands. Triadic uses three hues 120 degrees apart for a vibrant, balanced look that is easy to overdo. Split complementary takes the two colors beside the complement (150 and 210 degrees), keeping contrast with less tension. Tetradic uses four hues 90 degrees apart; it is the hardest to balance, so let one color dominate.

Worked example: building a brand palette

Start with a teal of #0F766E as the primary. The 50-900 scale gives you #E7F1F1 for a soft background at 50, the base at 500, and #0C615A at 600 for a hover state. For an accent, the complementary hue lands on a deep red at 355 degrees; lighten it in the converter for a coral that pops against teal. Use it only for calls to action and highlights.

Add a neutral gray scale for body text and surfaces; most interfaces are 80 percent neutral. Then set semantic colors for success, warning, and error, adjusted so they don't clash with your primary. A complete product palette is usually one primary scale, one neutral scale, one accent, and three semantic colors.

The 60-30-10 rule

Interior designers use a simple ratio that transfers well to screens: about 60 percent of the space in a dominant color, 30 percent in a secondary color, and 10 percent in an accent. On a website the 60 is usually a white or light neutral background, the 30 is your primary in navigation, headers, and cards, and the 10 is the accent on buttons and links.

The rule prevents the most common palette mistake: using every color at equal weight, which makes nothing stand out. If everything is highlighted, nothing is.

Accessibility check

A good-looking palette can still fail users. Text needs a contrast ratio of at least 4.5:1 against its background under WCAG AA, and 3:1 for large text and interface components. In a typical 50-900 scale, only the 700 to 900 steps are dark enough for body text on white, and only 50 to 200 are light enough for text on a dark background.

Mid-range steps like 400 and 500 often land near 3:1 on white: fine for large headings and icons, not for paragraphs. Paste pairs into the color contrast checker before committing. Also avoid pairing red and green as the only difference between states, since that is the most common form of color blindness.

Exporting your palette

Click any swatch to copy its HEX code, or copy the full scale as CSS custom properties (--color-50 through --color-900) and rename them to match your project. Press Random to explore new starting points; the random generator stays in a mid-saturation, mid-lightness range that produces usable brand colors. Everything runs in your browser.