Slop Colors ガイド

Slop Colorsの使い方

Slop Colorsは、1つのページで使える色の選択ツール、パレット作成ツール、コントラスト確認ツールです。画像とパレットはブラウザーの中で読み込まれ、アップロードされることはありません。

Slop Colors を開く

ページの構成

上部には現在の色が、HEX、RGB、HSL、OKLCH、CMYKの値とともに表示され、それぞれにコピーボタンがあります。その下に、画像から色を選ぶ、パレット、この色から作る、コントラスト確認の4つのカードがあります。

右側のパネルには、色の項目、この色から作るもの、画像から見つける色の数、書き出しがあります。スマホでは、下から開くシートになります。「設定」をタップすると開きます。

画像から色を選ぶ

1. 画像をページにドロップするか、「画像を開く…」をクリックします。
2. 画像の上に重ねてクリックすると色を選べます。虫眼鏡が、その点の下のピクセルを表示します。
3. 矢印キーで1ピクセルずつ動かし、Enterキーでその色をパレットに追加します。
4. 「すべてパレットに追加」をクリックすると、画像の主な色を残せます。

ヒント： ChromeとEdgeでは、「画面から色を選ぶ」で画面上のどこからでも色を選べます。

パレットを作る

1. 「この色を追加」をクリックして、現在の色を追加します。
2. パネルで「調和」と「スケール」を選び、行の下の「パレットとして使う」を選びます。
3. パレットの各色の下で、‹と›で色を移動し、✎で名前を付け、×で削除します。

コントラストを確認する

文字の色と背景を入力するか、パネルの「文字色に使う」と「背景に使う」を使ってください。比率とWCAGのレベルがすぐに表示されます。「文字色を修正」を選ぶと、AAを満たす最も近い色が見つかります。

書き出して保存する

1. パレットに名前を付け、「書き出し」の「形式」を選びます。
2. 「パレットをダウンロード」、「コードをコピー」、「Slop Driveに保存…」をクリックします。「開く先…」を選ぶと、別のアプリにファイルを渡せます。
3. 保存したパレットを開き直すには、.gpl、.ase、.json、.cssのファイルをページにドロップしてください。