仕組み
ネイティブ カラー入力では、sRGB 値が 6 桁の 16 進文字列として与えられます。チャンネルは RGB トリプレットの 10 進数まで解析され、CSS カスタム プロパティはスタイルシートが期待する正確な構文で書き込まれます。
- ネイティブ カラー入力を使用するため、ブラウザーがサポートしているシステム スポイトで動作します。
なぜそれが重要なのか
パレットは Figma、CSS、電子メール、そして場合によってはキャンバスに存在します。変換ステップごとに間違った形式を貼り付ける可能性があるため、HEX、RGB、およびカスタム プロパティを一緒にコピーすることで、避けられるミスの類を排除できます。
うまくいった例
#635BFF を選択すると、rgb(99, 91, 255) と CSS カスタム プロパティ --color: #635BFF が生成されます。これは、16 進コードを繰り返す代わりに、スタイルシートにドロップしてどこでも参照できます。
よくある間違い
- コントラストを確認せずに色と背景を別々に選択します。
- 状態を示すために色相のみに依存します。
- ホバーとフォーカスのバリエーションを忘れます。
実践的なヒント
最初にニュートラルスケールを選択し、次にアクセントを選択します。 1 つのアクセント カラーと 3 つのニュートラルを使用すると、大きなパレットを使用するよりも、明るいテーマと暗いテーマの間で一貫性を保つのが簡単になります。
使い方
- ツールを開きます。すべてはブラウザのタブで実行されます。
- 入力を貼り付けるか入力し、必要なアクションを選択します。
- 結果を確認し、ワンクリックでコピーします。
よくある質問
画面から色を選択できますか?
ブラウザがネイティブのスポイトをサポートしている場合は、はい。それ以外の場合は、カラー入力スウォッチを使用します。
どの形式で出力されますか?
HEX、RGB トリプレット、およびスタイルシートに貼り付けることができる CSS カスタム プロパティ。
選択した色は保存されますか?
いいえ。値はページを閉じるまでそのページ内にのみ存在します。
このツールは本当に無料ですか?
はい。アカウント、ペイウォール、使用制限はありません。 Tools App は、その背後にあるスタジオである aumenso によって資金提供されています。
入力した内容はアップロードされますか?
いいえ。ツールはブラウザのタブで実行されます。入力した内容は当社に送信されたり保存されたりすることはありません。