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

どれも色相環に基づいています。類似色は隣り合う色で、落ち着いた印象になります。補色は反対側にある色で、コントラストが生まれます。分裂補色、トライアド、テトラードは色相環上に色を均等に配置し、より生き生きとしたパレットになります。同系色は1つの色相の明るい色と暗い色を使います。

色の下にある鍵のアイコンを選ぶと、その色が固定されます。新しいパレットを作成しても、固定した色は同じ位置に残り、それに合う新しい色が選ばれます。

パレットは、人間の視覚に合わせて設計された色空間「OKLCH」で作られています。この色空間で色相を回すと明るさと鮮やかさが揃うため、ほかの色と並べたときに1色だけ明るすぎたりくすんだりしません。

CSSの書き出しをコピーしてスタイルシートに貼り付けると、どこでも使える --color-1 のような変数になります。JSONの書き出しには、すべての色がHEX、RGB、OKLCHで記載されているので、デザイントークンやスクリプトに使えます。

はい。色そのものに所有者はいません。ここで作ったパレットは、個人でも商用でも自由にお使いいただけます。