🎨 色の変換 — HEX・RGB・HSL

🎯 カラーパレット

🕐 最近の色

即時変換

HEX、RGB、HSL 形式の間でリアルタイムに変換します。任意の形式を入力すると、他の 2 つが即座に取得されます。

ビジュアルピッカー

内蔵のカラーピッカーにより、大きなライブプレビュー見本を使用して直感的に色を選択できます。

カラーパレット

補色、類似色、三和色、分割補色スキームを自動生成します。

ワンクリックコピー

ワンクリックであらゆるカラーフォーマットをクリップボードにコピーします。素早く簡単に使用できます。

色の履歴

最近使用した色を自動的に保存して、すぐにアクセスして再利用できるようにします。

完全にオフライン

すべての処理はブラウザ内で行われます。インターネットやデータのアップロードは必要ありません。

関連記事

カラーモデルの説明: RGB、HSL、HEX

RGB、HSL、HEX、その他のカラー モデルの原理と違いについて詳しく説明します。デザイン内の色を正確に制御するために、さまざまな色空間がどのように機能するかを理解します。

初心者ガイド (英語)

デザイナーのための色彩理論の基礎

色彩理論はデザインの基礎です。イッテン カラー ホイールから現代のカラー システムまで、すべてのデザイナーが必要とする重要な色の知識と実践的なパレット テクニックをマスターします。

設計理論 (英語)

アクセシブルなカラー コントラスト ガイド: WCAG 基準への準拠

WCAG のカラー コントラスト標準と、視覚障害を持つユーザーを含むすべてのユーザーにとって Web サイトをフレンドリーにするアクセシブルなカラー パレットの選択方法について学びます。

アクセシビリティ (英語)

ブランディングにおける色彩心理学: 色でストーリーを伝える

色が異なれば、感情的な反応も異なります。色彩心理学がブランド デザインにどのように適用されるかを学び、ブランド アイデンティティを最もよく伝える色の選択を学びましょう。

ブランディング (英語)

よくある質問

HEX、RGB、HSL の違いは何ですか?
HEX は、Web CSS で一般的に使用される 16 進数のカラー コード (例: #FF5733) です。 RGB は、赤、緑、青の値 (0 ~ 255) を使用して色を表します。 HSL は色相、彩度、明度を使用するため、より直感的に色を調整できます。
補色とは何ですか?
補色は、カラー ホイール上で 180° 離れた位置にある 2 つの色です。視覚的に強いコントラストを生み出し、デザイン内で目立つ必要がある要素によく使用されます。
適切な配色を選択するにはどうすればよいですか?
パレットジェネレーターを使用してください。類似スキームは調和がとれていて繊細で、相補スキームは強いコントラストを提供し、三項スキームは豊かでありながらバランスのとれた色の多様性を提供します。設計目標に基づいて選択してください。
カラー履歴はどのくらいの期間保存されますか?
カラー履歴はブラウザのローカルストレージに保存されます。この情報は、手動でクリアするかブラウザのデータをクリアするまで存続します。
透明度(アルファ)を​​サポートしていますか?
現在、標準の HEX (6 桁)、RGB、および HSL 形式をサポートしています。アルファ透明度の場合、HEX に 2 桁を手動で追加するか (#FF573380 など)、または rgba() 形式を使用できます。
HEX を RGB および HSL に変換するにはどうすればよいですか?

有効な色の値を HEX 入力に入力します。このツールには、対応する RGB 値と HSL 値が表示され、スタイルシートにコピーできます。

コードの変換中に色をプレビューできますか?

はい。カラー プレビューは入力された値で更新されます。他のサポートされている形式を読み取りまたはコピーするときに色を比較するのに役立ちます。