パレットジェネレーター

A practical palette workspace, not just random colors

Color Palette Generator is useful when you need a set of colors that can move into a real design file, style guide, or CSS snippet without much cleanup. Start with the generated palette, switch the harmony strategy if the mood feels off, then lock the colors you already like before generating again.

The lock button is the small detail that makes the tool easier to use. If one blue feels right but the supporting colors do not, lock that blue and keep exploring around it instead of starting over.

A workflow that usually works

1. Pick a strategy from the dropdown, such as a cohesive random palette or a more structured color harmony.
2. Click Generate, or press Space when you are not typing in an input.
3. Lock any color you want to keep, then generate again to replace only the unlocked swatches.
4. Click a swatch to edit the color manually if you already have a brand color or a client-provided hex value.
5. Copy the palette as colors, CSS variables, or JSON, or download an image preview for sharing.

Where the export options help

Copy Colours is the quickest option when you only need the raw values. CSS Variables is better for frontend work because you can paste the result into a stylesheet and rename variables later. JSON is handy when the palette needs to travel into a design token file, a small app config, or another tool.

Each color row also shows extra context such as the color name, RGB, and OKLCH-like values. Those details are not just decorative; they help when two colors look close but behave differently in UI contrast or shade generation.