カラーパレットジェネレーター

このツールの使い方

1. 1

   Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.

2. 2

   Watch the six scheme rows update instantly as you change the base color.

3. 3

   Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.

カラーパレットジェネレーターとは何ですか？

よくある活用例

• Picking a primary plus accent color for a website by reading the complementary pair off your brand color.

• Building a calm, unified UI background-and-card scheme from the analogous row.

• Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.

• Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.

• Exploring logo or illustration color combinations before committing in Figma or Illustrator.

• Quickly grabbing hex codes for a CSS variable set without leaving the browser.

よくある質問