Can I type a hex code instead of using the colour picker?

Yes. The fields under the swatches and next to the gradient and preview pickers accept a hex code with or without the #, in three or six digits. A three-digit code such as #0af is expanded to #00aaff.

How are the harmony palettes calculated?

From the first colour, converted to HSL. Complementary is the opposite hue, 180 degrees away. Analogous moves 15 and 30 degrees either side. Triadic takes the hues 120 and 240 degrees away. Monochromatic keeps the hue and changes lightness and saturation.

Does it save my palette if I reload the page?

No. The palette lives in the tab, and a reload starts again from the default five colours. Export it as JSON or as CSS variables if you want to keep it.

Can I get the colours from a photo or a website?

No. The app does not read images, has no eyedropper for other windows and does not inspect a URL. You pick the colours or type their codes.

What do the contrast numbers mean?

They are the WCAG contrast ratio between the text colour and the background used in the preview, from 1:1 to 21:1. Normal text needs 4.5:1 for AA and large text 3:1. The app chooses white or dark text for the best ratio and reports the result; it is a guide for this sample, not a full audit of your site.

Which files can I export?

The five palette colours as JSON, as CSS variables or as a PNG swatch. The gradient as CSS, as SVG or as PNG. Each export opens in a window with Copy and Download.

Does it work without a connection?

Creating and exporting need no connection: everything happens in your browser. The page loads its styles from a CDN, so the first visit needs one and a reload without a connection may look unstyled.

Color Palette Generator with UI Preview

Create Your Palette

Click a code to copy it. You can also type or paste one: 3 or 6 digits, with or without #.

Harmony Options

Export Options

Create Your Gradient

Gradient Colors

Start Color

End Color

Intermediate Colors

Gradient Type

Direction

Export Gradient

Preview Settings

Select Colors

Primary Color

Secondary Color

Background Options

Background Type

Background Color

UI Preview

Sample Heading

This is a sample paragraph to demonstrate how your color palette looks in a real UI context.

Card Title

Card content goes here. This shows how your colors work in contained elements.

Input Label

Checkbox option

Contrast in this preview

Body text on the background —

Label on the primary button —

WCAG AA needs 4.5:1 for normal text and 3:1 for large text.