カラーコンバーターとは?
カラー変換ツールは、デザイナーとフロントエンド開発者のための総合ツールです。HEX・RGB・RGBA・HSL・HSLA・HSV/HSB・モダンな OKLCH など一般的な形式で色を貼り付けるか、ビジュアルで選ぶと、他のすべての形式がワンクリックのコピーボタン付きで即座に更新されます。変換に加えて、ベースカラーから調和の取れたパレット（補色・類似色・三色配色）を生成し、WCAG コントラストチェッカーも備えているため、どの背景でもテキストが読みやすいかを確認できます。すべてブラウザ内で動作し、高速・安全で、いつでも使えます。
画面の色は数値で定義されますが、その数値は HEX（#ff6b35）・RGB（255, 107, 53）・HSL（18°, 100%, 60%）など複数のフォーマットで書けます。各フォーマットは使う場面が違います。ウェブデザイナーは CSS で HEX を使い、フロントエンド開発者は明度を調整するために HSL を選び、グラフィックツールは多くの場合 RGB を出力します。
使い方
- カラーピッカーを使うか、値（例: #6366f1 や rgb(99,102,241)）を入力します。
- リストの各形式を確認し、コピーボタンでコピーします。
- 生成されたパレットを確認し、コントラストチェッカーで背景に対するテキストを検証します。
使用例
- デザイナーから受け取った HEX のブランドカラーを HSL に変換して CSS で明度や彩度を調整する。
- グラフィックツールの RGB 値を CSS で使える HEX 文字列に変換する。
- コード用にフォーマット間を切り替えながら色の見た目を確認する。
- 同じ色が異なるモデルでどう表現されるかを見ながら色彩理論を学ぶ。
カラー変換の仕組み
HEX は単に RGB を16進数で書いたものです。#ff6b35 は R=255、G=107、B=53 を意味します。HEX から RGB への変換は16進数から10進数へのデコードで、RGB から HSL への変換は数式に従います。
ツールは色のライブプレビューを表示するため、変換が正しいかどうか一目で確認できます。
メリット
- 公式を覚えずに、HEX・RGB・HSL・HSV・OKLCH を即座に相互変換できます。
- 通常・大きな文字の WCAG AA/AAA コントラストを確認し、アクセシブルな UI を作れます。
- 補色・類似色・三色配色のパレットを生成し、デザイン作業を高速化できます。
Conversão de Cores Instantânea e Local (JA)
Conversões de formato de cor são computadas usando algoritmos JavaScript no seu navegador. Os valores de cor que você insere nunca são transmitidos aos nossos servidores — toda a conversão fica na sua máquina. (JA)