色彩アトリエ · Irodori 彩り
無料カラーピッカー：画像から色を即座に抽出。
画像をアップロード、貼り付け、URL 入力して HEX・RGB・HSL・OKLCH・Lab・CMYK を取得。登録は不要です。
すべてブラウザ内で動作。アップロードも登録も不要。
ライブワークベンチ
どんな色からでも始められる
画像をドロップするか値を入力。すべての形式がその場で更新されます。
一色、多言語
同じ色を6つの形式で読む
CSS には HEX、画面には RGB、配色には HSL、印刷には CMYK、知覚設計には OKLCH と Lab。すべて端末内で計算します。
アジアの伝統色
すでに名前を持つ色
日本・中国・韓国・ベトナムに加え、タイの七彩、チベット、インド、モンゴル、インドネシアのバティックまで。原語名・読み・正確な HEX をそのままに。
実在するシステム
実際に使うパレットに合わせて
6つのデザインシステム。すべて公式ファイルから取得し、近似はしていません。
Material Design トーン
89
Material Web v0.192 · md-ref-palette
Tailwind CSS パレット
286
Tailwind CSS v4 · theme.css
UnoCSS パレット
264
UnoCSS preset-mini · Tailwind v3 + Windi
Panda CSS トークン
242
Panda CSS · @pandacss/preset-panda
Vanilla Extract テーマ
3
vanilla-extract · createTheme docs example
StyleX トークン
6
StyleX · defineVars docs example
Bootstrap パレット
29
Bootstrap v5.3.8 · _variables.scss
Ant Design パレット
130
Ant Design · @ant-design/colors 7.2.1
Open Color
130
Open Color 1.9.1 · open-color.js
Chakra UI パレット
100
Chakra UI · @chakra-ui/theme 3.4.1
Radix Colors
360
Radix Colors 3.0.0 · light scales
Fluent UI ブランドカラー
64
Fluent UI · @fluentui/tokens brandColors
Primer パレット
20
Primer · @primer/primitives 11.10.0 light
Polaris パレット
192
Shopify Polaris · polaris-tokens 9.4.2
すべてのツール
アクセシビリティ
コントラストも配色の判断
公開前に WCAG 比を確認し、4種類の色覚をシミュレーション。
WCAG 2.2AA 4.5:1AAA 7:121:1
よくある質問
画像から色を取るには？
画像をアップロード、クリップボードから貼り付け、または URL を入力し、画像上をクリックすると HEX・RGB・HSL・OKLCH・Lab・CMYK が表示されます。
HEX カラーコードとは？
HEX カラーコードは赤・緑・青の各チャンネルを 6 桁の 16 進数で表す値です（例：#FF5733）。CSS、デザインツール、ブランドガイドで最も一般的な形式です。
このピッカーは無料ですか？
はい。本サイトのツールはすべて無料で、登録も不要です。画像はブラウザ内でのみ処理され、サーバーへ送信されません。
対応している色形式は？
HEX・RGB・HSL・OKLCH・Lab・LCH・CMYK・XYZ・LUV・HWB に対応し、WCAG コントラストと色覚シミュレーションも利用できます。
色を自分のデザインに使えますか？
はい。色の値自体に権利はありません。コピーして CSS、UI、印刷、イラストに利用できます。
次のパレットは、ここから。
無料、プライベート、高速。登録不要。
カラーピッカーを開く