カラーピッカー

このツールについて

色を視覚的に選択し、HEX、RGB、HSL形式間で変換します。CSSやデザインツールですぐ使える値をコピーできます。

カラーピッカー — HEX, RGB, HSLは、色を視覚的に選択したり派生色を計算したりして、CSS やデザインシステムで使いやすい形式で表示します。HEX、RGB、HSL は同じ色を異なる座標で表したものです。

UI モック、デザイントークン、CSS 変数、配色を素早く確認してコピーしたいときに役立ちます。

使い方

1. 基準色を選択するか HEX 値を入力します。
2. 計算された色値またはパレットを確認します。
3. 必要な HEX、RGB、HSL、CSS 値をコピーします。
4. 実際の背景と文字でコントラストとアクセシビリティも確認します。

例

関連ツールと概念

• MDN CSS color values
• カラーパレット生成 — 調和とテーマ
• CSS単位変換 — px, rem, em & pt