カラーパレット・グラデーション作成

1つのベースカラーから配色を作ったり、ランダムなパレットを生成したり、グラデーションを作ってCSSでコピーしたりPNG画像で保存したりできます。デザイン、プレゼンテーション、Webページの色選びに使えます。

使い方

1. 「パレット」で「ベースカラー」を選び、「配色」を選びます。気に入ったら「この配色をパレットに使う」を押します。
2. 「生成（Space）」を押すと新しい色になります。残したい色をロックしてから、もう一度生成します。
3. 「HEXリストをコピー」、「CSS変数をコピー」、「画像として保存」で色を取り出し、「パレットを保存」で後で使うために保存します。
4. 「グラデーション」で「種類」、「角度」、「カラーストップ」を設定し、CSSのコードをコピーするか「PNGを保存」を押します。

計算方法と補足

• 配色はHSLの色相環で色相を回転させて作ります。補色は180°、類似色は±30°、トライアドは120°、スプリットコンプリメンタリーは150°と210°、テトラードは90°ずつです。
• コントラストの評価はWCAG 2.2に従います。AAには4.5:1、AAAには7:1、大きな文字には3:1が必要です。
• 「色覚シミュレーション」はMachadoら（2009）に基づく近似です。変わるのは画面上の色だけで、コピーや保存する値は変わりません。
• 保存したパレットは最大40個まで、この端末のこのブラウザに保存されます。

よくある質問

補色の調べ方は？

補色は色相環でちょうど反対側、180°離れた色です。「配色」を「補色」にすると表示され、色見本をタップするとHEX値をコピーできます。

CSSのグラデーションを作るには？

「グラデーション」でバーをタップしてストップを追加し、色と位置を設定します。CSSのボックスにコードが表示され、そのままコピーできます。

グラデーションの中間の色がくすんで見えるのはなぜ？

「補間の色空間」をOKLCHにしてください。中間の色が鮮やかに保たれ、CSSには古いブラウザ向けの代替の行も加わります。

この色の上で文字が読みやすいかどうかを知るには？

各色には、白と黒のうち読みやすいほうの文字色でのコントラスト比と評価が表示されます。比は(L1 + 0.05) ÷ (L2 + 0.05)で、L1とL2は明るいほうと暗いほうの色の相対輝度です。