Menu
Coddy logo textTools
日本語

カラーコンバーター

HEX、RGB、HSL、OKLCH をライブプレビューで変換。

最終更新

プリセット
プレビュー有効な色
Aa
値値をクリックでコピー
  • HEX#B18CFF
  • RGBrgb(177, 140, 255)
  • HSLhsl(259, 100%, 77%)
  • OKLCHoklch(72.2% 0.165 296.9)
コントラスト (WCAG)
2.60:1
8.06:1
ティント & シェード

カラーコンバーターとは？

カラーコンバーターは、HEX・RGB・HSL・OKLCHといった主要なフォーマットで指定した色を、他のすべての表記に変換して並べて見せてくれるツールです。ブランドカラーを揃えたいとき、CSSカスタムプロパティをデバッグしたいとき、ライト／ダークモードのパレットを比較したいとき、アクセシビリティのコントラストを確認したいとき——デザイナーやフロントエンド開発者が日常的に使う道具です。

CSSにはいくつかのカラーモデルがあり、それぞれに得意分野があります。HEXとRGBは赤・緑・青の光の量で色を表現します。HSLは色相・彩度・明度に分かれていて直感的。そしてOKLCHは「数値の変化量と人間が感じる変化量がほぼ一致する」知覚的に均一なモデルで、ティントやシェード、アクセシブルなパレット生成にとくに向いています。

アクセシビリティを決めるのは色そのものではなく「コントラスト」です。WCAGはテキストと背景のコントラスト比を定義していて、本文サイズなら最低4.5:1、大きな見出しなら3:1が目安。優れたカラーツールはこの2つの数値を色の横に表示してくれるので、うっかりアクセシブルでないUIをリリースしてしまう事故を防げます。

カラー変換で身につくこと

  • HEXは結局のところRGBの省略表記です。#ff8800はrgb(255, 136, 0)とまったく同じ色。
  • HSLは*色相*（どの色か）、*彩度*（どれくらい鮮やかか）、*明度*（どれくらい明るいか）に分かれます。R/G/Bを直接いじるよりも、ひとつの軸だけ動かせるぶん圧倒的に直感的。
  • OKLCHは知覚的に均一です。OKLCHのLを10%動かせば、色相が何であってもほぼ同じだけ明るさが変わって見えます。HSLではこうはいきません。

色を変換してチェックする手順

  1. 色を入力する

    HEX・RGB・HSL・OKLCHのいずれかの値を貼り付けるか、スポイトやネイティブのカラーピッカーから直接拾います。

  2. 全フォーマットをまとめて確認

    同じ色がサポート対象のすべての形式で表示されます。各値をクリックすればクリップボードにコピーされます。

  3. HSLやOKLCHのスライダーで微調整

    明度スライダーを動かせばティント（明るく）やシェード（暗く）を作れます。視覚的に等間隔のステップが欲しいときはOKLCHの明度を使うのがコツ。

  4. テキストカラーとのコントラストをチェック

    コントラストパネルが、白背景・黒背景それぞれに対するWCAG比を表示します。本文なら4.5以上、大きな見出しなら3以上が目安。

  5. 値をCSSにコピペ

    プロジェクトに合った形式を選びましょう。デザイントークンならHEX、モダンなパレット設計ならOKLCH、calc()で操作したいならHSL、というのが定番です。

CSSカラー形式 早見表

実務でよく出くわす5つの形式を、同じ色（オレンジ）の例で並べました。<color>の網羅的なリファレンスはMDNの<color>ページが決定版です。

形式構文例（オレンジ）
HEX#RRGGBB または #RGB#ff8800
HEX + アルファ#RRGGBBAA#ff880080（透過50%）
rgb()赤・緑・青を0〜255で指定rgb(255 136 0)
rgb() + アルファモダンなスラッシュ構文rgb(255 136 0 / 0.5)
hsl()色相0〜360°、彩度0〜100%、明度0〜100%hsl(32 100% 50%)
oklch()明度0〜100%、彩度（chroma）、色相oklch(74% 0.18 50)
名前付き色CSSの定義済みカラー名（全147色）darkorange

試してみたい変換例

ブランドカラーのHEXを変換する

同じ色を4つの形式で
color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

4つの宣言はすべてまったく同じ青になります。デザイントークンとしてどれを採用するかは、後からどう調整したいかでほぼ決まります。

OKLCHでティントを生成する

ブランドカラー + 4段階のティント
--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

色相（268）と彩度を固定して明度だけ動かすと、各段階の差が*見た目にも*等間隔なパレットが作れます。HSLだとこの均一さは保証されません。

アルファで透過を加える

透過50%
background: rgb(108 140 255 / 0.5);background: #6c8cff80;

/ 0.5はモダンCSSでアルファを指定する書き方。HEXの場合は末尾に2桁のアルファバイトを足します（80がだいたい50%に相当）。

色の変換でやりがちなミス

  • HSLの明度を色相をまたいで比較してしまう。hsl(60 100% 50%)（黄）とhsl(240 100% 50%)（青）はLが同じでも、見た目の明るさはまったく違います。視覚的な比較にはOKLCHを使いましょう。
  • 3桁HEX（#abc）が6桁形式（#aabbcc）の省略表記であることを忘れがち。
  • rgba(...)を使ってしまい、モダンなrgb(... / alpha)構文を使わない。どちらも動きますが、スラッシュ構文が現行仕様で、ツール上の見やすさも上です。

カラーコンバーター FAQ

HEXからRGBへの変換はどうやる？
HEX値を2桁ずつ（#RR、GG、BB）に分けて、それぞれを16進数から10進数に変換します。あるいは、値をカラーコンバーターに貼り付ければRGBの結果がその場で表示されます。
HSLとOKLCHは何が違う？
HSLは扱いやすくサポートも広いですが、知覚的には均一ではなく、Lが同じでも見た目の明るさが揃いません。OKLCHは知覚的に均一なので、ティントやシェード、アクセシブルなパレットを一貫した間隔で作るのに向いています。
OKLCHは何の略？
OKLCHは Oklab Lightness, Chroma, Hue（明度・彩度・色相）の略です。ベースとなっているOklab色空間は、知覚的に均一であるよう設計されており、数値の小さな変化が視覚的にも小さな変化として現れます。
アクセシビリティ向けにコントラストをチェックするには？
テキストと背景のWCAGコントラスト比を計算します。WCAG AAでは通常テキストで4.5:1以上、大きなテキスト（18pt以上、または14pt以上の太字）で3:1以上が必要です。コントラストを表示してくれるカラーコンバーターを使えば計算の手間が省けます。
CSSではHEX・RGB・HSL・OKLCHのどれを使うべき？
チームが慣れているものでOKです。HEXはどこでも通じる定番、OKLCHはデザインシステムを組むときのモダンな選択肢、HSLは色相や明度を計算で動かしたいときに便利です。ブラウザのサポートはどれも十分に揃っています。

詳しく見る

その他の開発者ツール

CSS グラデーションジェネレーター

ライブコード出力付きで CSS グラデーションをビジュアルに設計。

Coddyでコードを学ぼう

始める