Turn one HEX color into reusable CSS variables

Begin with the color you already have

A project often starts with one brand color rather than an empty canvas. Enter that HEX value in the palette generator. Three- and six-digit values are accepted, with or without the #. The first swatch keeps the normalized seed, so generating variations does not quietly replace the color you came to use. Try #2563eb with the example above.

Choose shades or a complementary direction

Shades keep the palette close to the seed, using lighter and darker variations. Complementary mode brings in an opposite hue alongside tints and darker colors. Neutral seeds stay neutral. These are practical starting points for a small interface, not a rule that every generated color belongs in the same component. Lock useful swatches and generate another variation when you want to keep part of the set.

Inspect a real text and background pair

The preview uses the palette on a small card and button. It displays contrast for the particular foreground/background pairs it uses. Changing a swatch can change those ratios. A reported pair does not certify every combination, hover state, font size or component in your application. Check the actual text and background combinations that you ship.

Copy the colors once and reuse them

Copy CSS variables produces a :root block containing --color-brand, --color-surface, --color-accent, --color-soft, --color-strong and --color-deep. Paste the block into your stylesheet or download the generated .css file. Refer to a variable rather than repeating a HEX literal, so a later palette edit has one place to change.

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-soft);
}

.button {
  background: var(--color-brand);
  /* Choose and check a foreground against your actual brand color. */
}

Take it into your project

Use the generated variables in one component first. Inspect normal, focused, hovered and disabled states, then expand the palette only when those roles are useful. The generator keeps processing in the browser. Its example link selects a public fixture and does not put your entered color in the URL.

• Keep the seed as the first swatch.
• Lock colors you want to retain before regenerating.
• Copy the whole CSS block or download it as a stylesheet.
• Check the actual component states and color pairs before release.