From color inspiration to a usable website palette

Start with a brand image or a photograph whose mood fits the project. Image Color Picker helps you sample one specific spot, while Image Color Palette Extractor groups image colors into a small palette. An extracted palette reflects the picture; it does not decide which swatch should become your button or body text.

For a café website, a warm photo might suggest a cream background, a coffee brown accent, and a muted green. Assign those roles before adding more colors. If there is no image or brand color, start with the random palette tool and keep one promising swatch.

The five-color palette generator lets you keep individual colors locked while regenerating the others. Choose a harmony mode to explore related or contrasting hues. In the current order, the first locked slot supplies the anchor for newly generated colors; other locked slots keep their values, even if they do not fit that harmony.

Lock a brand color first, then compare a few backgrounds and accents around it. Reordering locked swatches changes which one is the anchor. If all five are locked, unlock a slot before asking for a different result. Harmony is a direction for exploration, not a readability check.

1. Keep the most important color and lock its slot.
2. Choose a harmony and regenerate only the unlocked colors.
3. Give each retained color a role: background, surface, text, accent, or decoration.

Color Variations Generator starts from one base color and produces tints, shades, and transparency variations. Use those to explore a pale card surface or a darker button state without introducing an unrelated hue. It also shows black and white contrast ratios against the base color; that is a quick comparison, not a complete text-color search.

An alpha variation depends on the color behind it. Test the composited result in your actual layout. Use Color Converter when your design file and CSS need different color formats, and record the final values rather than relying on the swatch’s appearance on one screen.

Readable Text Color suggests foreground colors for the solid background you enter. Its targets are AA normal text at 4.5:1, AAA normal text at 7:1, and AA large text at 3:1. Check the ratio of an existing pair with Color Contrast Checker. A 3:1 result is for AA large text, not ordinary body copy.

For a product description, use the normal-text target and preview real copy in the intended font. Treat a passing ratio as one part of accessibility; it does not certify an entire page. Links, focus indicators, error messages, and interactive states still need their own checks. The W3C references below explain the contrast criteria.

Random Gradient Generator creates a two- or three-color CSS linear gradient. Edit the colors and angle until the transition suits the header or section, then copy the CSS or download it. Try a restrained pair first; a third stop is useful when you need a deliberate middle color.

A text color that passes against one solid swatch can fail elsewhere on a gradient. Check the background behind every part of the text in the final layout, including narrow mobile views. When that is difficult to keep consistent, put the copy on a solid panel and leave the gradient as surrounding decoration.

Use Color Palette Preview to see five colors as page background, surface, text, primary action, and text on the primary action. A set of attractive swatches can behave very differently in those roles. Compare the sample content and button, then edit the role colors where needed.

In the 5-Color Palette Generator, use the explicit preview action to carry the current five colors into the preview in this order: background, surface, text, primary, and on-primary text. Opening the preview through an ordinary link does not transfer the generator palette. The preview action passes the colors within the current browser tab, without putting them in the URL.

Copy the CSS custom properties from the preview and assign them to the matching roles in your own stylesheet. Check body text, button text, hover, focus, and any other actual background combinations before publishing.

Keep a short palette record with the role, final color value, and tested text/background pair. For example, distinguish “page background” from “primary action” rather than saving a row of unlabeled HEX codes. Save the gradient CSS separately so the angle and color order survive the handoff.

Before publishing, review the real page with long text, hover and focus states, and both light and dark appearances where supported. Changing a background or adding opacity can invalidate an earlier contrast check. Recheck the final pair whenever either color changes.