色を選んで、コードをコピーして、作業に戻る
カラーピッカー、グラデーション作成、画像スポイトが1ページに。アカウントもインストールも待ち時間も不要で、選んだ色を HEX・RGB・HSL・HSV でコピーできます。
カラーコード
#0F37FFrgb(15, 55, 255)hsl(230°, 100%, 52.94%)hsv(230°, 94.12%, 100%)cmyk(94.12%, 78.43%, 0%, 0%)xyz(19.61, 10.05, 95.5)lab(37.93, 62.96, -98.45)lch(37.93, 116.86, 302.6°)トレンドカラー
トレンドカラーをすべて見るできること
スポイト
アップロードした画像から、またブラウザーが対応していれば画面上の任意の場所から色を取得できます。ファイルをページに落として、ピクセルをクリックするだけです。
フォーマット変換
HEX・RGB・HSL・HSV・CMYK・XYZ・LAB・LCH を即座に切り替え、どの値もそのまま CSS やデザインツールへコピーできます。
グラデーション作成
バー上でストップを追加・移動し、線形と放射状を切り替え、角度と不透明度を整えて、仕上がった CSS をコピーできます。
カラー履歴
作成した色とグラデーションはブラウザー内に残るので、後から戻ることも別のプロジェクトで再利用することもできます。
配色とバリエーション
各カラーページにティント・シェードと6種類の配色があり、どれもワンクリックでグラデーションに変換できます。
無料でプライバシーに配慮
有料の壁はなく、何を選んだかを追跡することもありません。アップロードした画像はブラウザー内で読み取られ、どこにも送信されません。
こんな方に
- デザイナーとプロダクトチーム
- UI やブランドパレットを検討し、組み合わせを試し、グラデーションの CSS をそのままコピーする場面で。
- イラストレーションと絵画
- 写真や絵画からスポイトで色を拾い、なめらかな陰影を設計する場面で。
- フロントエンド開発
- プロジェクト全体で一貫した色の値を用意し、既存デザインから値を読み取る場面で。
- アクセシビリティの確認
- 色を複数のモデルで見比べ、コントラスト比が必要な基準を超えるまで調整する場面で。
使い方
- 1
色を選ぶ
彩度フィールドの任意の場所をクリックし、色相とアルファのスライダーで整えます。HEX・RGB・HSV はその場で更新されます。
- 2
画像から取得する
画像をページにドラッグするかファイルを選び、取りたいピクセルをクリックします。コードはすぐに表示されます。
- 3
グラデーションを作る
バーをクリックしてストップを追加し、位置までドラッグします。線形と放射状を切り替え、角度を決めます。
- 4
コピーして使う
値または CSS 宣言をまるごとコピーできます。選んだものは自動的に履歴へ保存されます。
よくある質問
邪魔をしない小さな道具
もとは社内用のツールでした。重いデザインアプリを開かずに、色をつまんで、調整して、すぐ次に進みたかったのです。あえて1ページ、あえて軽量、そしてこれからも無料です。
ブラウザー拡張機能
見ているページから直接色を取りたい場合は、Chrome と Edge の拡張機能をどうぞ。ツールバーにスポイトを追加し、独自の履歴を保存し、ワンクリックでこのツールを開けます。