Site Tools

カラー変換・カラーピッカー

Ad Space
HEX#6366f1
RGBrgb(99, 102, 241)
RGBArgba(99, 102, 241, 1)
HSLhsl(239, 84%, 67%)
HSLAhsla(239, 84%, 67%, 1)
HSVhsv(239, 59%, 95%)
OKLCHoklch(0.5854 0.2041 277.12)

カラーパレット

補色
類似色
三色配色

コントラストチェック(WCAG)

サンプルテキスト
17.74コントラスト比
通常 AA
通常 AAA
大 AA
大 AAA
Ad Space

カラー変換ツールは、デザイナーとフロントエンド開発者のための総合ツールです。HEX・RGB・RGBA・HSL・HSLA・HSV/HSB・モダンな OKLCH など一般的な形式で色を貼り付けるか、ビジュアルで選ぶと、他のすべての形式がワンクリックのコピーボタン付きで即座に更新されます。変換に加えて、ベースカラーから調和の取れたパレット(補色・類似色・三色配色)を生成し、WCAG コントラストチェッカーも備えているため、どの背景でもテキストが読みやすいかを確認できます。すべてブラウザ内で動作し、高速・安全で、いつでも使えます。

カラー変換ツールの使い方

  1. カラーピッカーを使うか、値(例: #6366f1 や rgb(99,102,241))を入力します。
  2. リストの各形式を確認し、コピーボタンでコピーします。
  3. 生成されたパレットを確認し、コントラストチェッカーで背景に対するテキストを検証します。

メリットと活用例

  • 公式を覚えずに、HEX・RGB・HSL・HSV・OKLCH を即座に相互変換できます。
  • 通常・大きな文字の WCAG AA/AAA コントラストを確認し、アクセシブルな UI を作れます。
  • 補色・類似色・三色配色のパレットを生成し、デザイン作業を高速化できます。

FAQ

対応する色形式は?

HEX・RGB・RGBA・HSL・HSLA・HSV/HSB・OKLCH です。いずれかを貼り付けるか、ビジュアルピッカーを使うと、他のすべてが即座に更新されます。

OKLCH とは?

OKLCH は CSS が対応する、知覚的に均一なモダンな色空間です。HSL より明度や彩度の調整が自然に見えます。

コントラストチェックの仕組みは?

2色の WCAG コントラスト比を計算し、通常・大きな文字で AA と AAA を満たすかを表示します。