Color Converter (HEX / RGB / HSL / OKLCH)

How to Use the Color Converter

This free online color converter translates any color between HEX, RGB, HSL, and OKLCH. Type a color in any of the four formats — #6366f1, rgb(99, 102, 241), hsl(239, 84%, 67%), or oklch(0.585 0.204 277.1) — and all four CSS strings appear instantly, together with a large color swatch. Each value can be copied with one click and pasted straight into your stylesheet.

Features

• Bidirectional conversion between HEX, RGB, HSL, and OKLCH (CSS Color Level 4)
• Accurate OKLab math using Björn Ottosson's published sRGB ↔ OKLab matrices
• Out-of-gamut detection: OKLCH colors outside sRGB are clipped and clearly flagged
• One-click copy of ready-to-use CSS color strings
• Runs 100% in your browser — colors are never sent to a server

What is OKLCH?

OKLCH is the cylindrical form of OKLab, a perceptually uniform color space published by Björn Ottosson in 2020. It describes a color with three components: L (perceived lightness, 0–1), C (chroma, how colorful it is), and H (hue angle in degrees). Because L matches human perception, two colors with the same OKLCH lightness actually look equally bright — something HSL cannot guarantee.

OKLCH vs HSL: Perceptual Uniformity

HSL is a geometric remapping of the RGB cube. Its "lightness" is computed from channel min/max values, so hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) share L = 50% yet look wildly different: their OKLCH lightness values are 0.968 and 0.452. With OKLCH you can rotate the hue while keeping L and C fixed and get a palette whose steps stay visually consistent — the reason Tailwind CSS v4 rebuilt its default palette in OKLCH.

Browser Support (CSS Color 4)

The oklch() function ships in Safari 15.4+ (2022), Chrome/Edge 111+ (2023), and Firefox 113+ (2023). As of 2026 every modern browser supports it, so OKLCH is safe to use in production without a fallback for evergreen-browser audiences.

Color Converterの使い方

入力欄に HEX(#6366f1)・RGB(rgb(99, 102, 241))・HSL(hsl(239, 84%, 67%))・OKLCH(oklch(0.585 0.204 277.1))のいずれかの形式で色を入力すると、4形式すべてに即時変換されます。各行の「コピー」ボタンで CSS にそのまま貼り付けられる文字列を取得できます。OKLCH の L は 0-1 の数値または %、C の % 表記は CSS Color 4 の定義どおり 100% = 0.4 として解釈します。

既存のColor Pickerがマウスで色を選ぶツールであるのに対し、本ページは「すでに持っている色コードを別形式へ正確に変換する」ことに特化しています。特に OKLCH との相互変換は、sRGB → リニア RGB → LMS → OKLab という多段の行列計算が必要で手計算は現実的でないため、変換ツールの利用が前提になります。

OKLCHとは何か — HSLとの違いとCSS Color 4

知覚均等性: HSLの「明度50%」は明るさが揃わない

HSL は RGB 立方体を幾何学的に変換しただけの色空間で、L(Lightness)は RGB チャンネルの最大値・最小値から機械的に算出されます。そのため同じ L=50% でも、黄色hsl(60, 100%, 50%) と青 hsl(240, 100%, 50%)では見た目の明るさがまったく違います(OKLCH の L に換算すると 0.968 と 0.452)。OKLCH の L は人間の視覚特性に基づいて設計されており、L を固定したまま色相 H を回転させても知覚上の明るさが揃います。ボタンの色違いバリエーションや、明度ステップが等間隔なカラースケールの設計では、この性質が決定的に効きます。

CSS Color 4 と oklch() のブラウザ対応状況

oklch() は CSS Color Module Level 4 で定義された色関数で、Safari 15.4(2022年3月)、Chrome/Edge 111(2023年3月)、Firefox 113(2023年5月)から実装されています。2026年現在、全モダンブラウザが対応済みで、Tailwind CSS v4 もデフォルトパレットを OKLCH で定義しています。レガシーブラウザ対応が必要な場合のみ、@supports (color: oklch(0 0 0)) でフォールバックを書きます。

sRGB色域外の扱い

OKLCH は sRGB より広い色域(Display P3 など)の色も数値として表現できます。クロマ C を大きくすると sRGB で物理的に再現できない色になるため、本ツールでは「sRGB 色域外(クリップ表示)」バッジを表示し、RGB 各チャンネルを 0-255 に収めた近似色をスワッチに描画します。ブラウザの実装ではより高度な色域マッピングが行われる場合があり、クリップ結果と完全には一致しないことがあります。

実務での活用例

1. デザイントークンのOKLCH移行

既存のブランドカラーが HEX で管理されている場合、まず本ツールで OKLCH に変換し、L と C を固定して H だけを変えれば、明るさの揃ったセカンダリカラーを機械的に増やせます。Tailwind CSS v4 のカスタムテーマ(@theme)に OKLCH 値をそのまま貼り付けられます。

2. ダークモード用の明度調整

HSL で L を上下させると色相によって彩度の見え方が崩れますが、OKLCH なら L だけを変えて(例: 0.585 → 0.75)知覚的に「同じ色のまま明るくした」ダークモード用カラーを作れます。変換結果の HEX を既存のデザインシステムに書き戻す、という往復にも対応しています。

3. コードレビューでの色コード照合

プルリクエストに oklch(0.7 0.12 230) のような値が出てきたとき、どんな色か即座に確認できます。スワッチ表示と HEX 変換で、デザインカンプの色指定(HEX)と実装(OKLCH)が一致しているかを目視と数値の両方で照合できます。

よくあるエラーと対処 / Common Errors and Fixes

色形式の入力でつまずきやすいポイントをまとめました。

Common pitfalls when entering color values, and how to fix them.

言語別コード例 / Code Examples by Language

同等の変換をコードで行う最小サンプルです。

Minimal snippets to perform the same conversions in code.

JavaScript (HEX → RGB → HSL)

// HEX → RGB
const hexToRgb = (hex) => {
  const s = hex.replace("#", "");
  const n = parseInt(s.length === 3 ? [...s].map(c => c + c).join("") : s, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

// RGB → HSL (h: 0-360, s/l: 0-100)
const rgbToHsl = (r, g, b) => {
  [r, g, b] = [r / 255, g / 255, b / 255];
  const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
  const l = (max + min) / 2;
  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
  let h = 0;
  if (d !== 0) {
    if (max === r) h = ((g - b) / d) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h = (h * 60 + 360) % 360;
  }
  return { h, s: s * 100, l: l * 100 };
};

CSS (oklch をそのまま使う / フォールバック)

:root {
  /* OKLCH: L(知覚明度) C(クロマ) H(色相角) */
  --brand: oklch(0.585 0.204 277.1); /* = #6366f1 */
}

/* レガシーブラウザ向けフォールバックが必要な場合のみ */
.button {
  background: #6366f1;
  background: oklch(0.585 0.204 277.1);
}

/* L だけ上げて「同じ色のまま明るく」 */
.button:hover {
  background: oklch(0.65 0.204 277.1);
}

Python (HSL 変換は colorsys、OKLCH は手実装)

import colorsys

# RGB(0-255) → HSL ※ colorsys は HLS 順・0-1 スケールなので注意
r, g, b = 99, 102, 241
h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")

# OKLCH は標準ライブラリに無い。Ottosson の行列を実装するか
# coloraide 等のライブラリを使う:
#   from coloraide import Color
#   Color("#6366f1").convert("oklch")

Go (HEX → RGB)

package main

import "fmt"

func hexToRGB(hex string) (r, g, b uint8, err error) {
	_, err = fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return
}

func main() {
	r, g, b, _ := hexToRGB("#6366f1")
	fmt.Printf("rgb(%d, %d, %d)\n", r, g, b) // rgb(99, 102, 241)
}

Before / After 実例 / Before & After

例1: HEX を4形式に展開 / Expand a HEX color into all formats

#6366f1

↓

HEX:   #6366f1
RGB:   rgb(99, 102, 241)
HSL:   hsl(239, 84%, 67%)
OKLCH: oklch(0.585 0.204 277.1)

例2: HSL の L=50% は明るさが揃わない / Same HSL lightness, different perceived brightness

hsl(60, 100%, 50%)   → oklch(0.968 0.211 109.8)  /* 黄: 知覚明度 0.968 */
hsl(240, 100%, 50%)  → oklch(0.452 0.313 264.1)  /* 青: 知覚明度 0.452 */

HSL 上は同じ「50%」でも、OKLCH の L で見ると2倍以上明るさが違う。

Both are "50% lightness" in HSL, yet their perceived lightness differs by more than 2x.

例3: sRGB 色域外の OKLCH をクリップ / Clipping an out-of-gamut OKLCH color

oklch(0.7 0.35 150)   /* C=0.35 の鮮やかな緑。sRGB では再現不可 */

↓

rgb(0, 209, 0) / #00d100   ← 警告バッジ「sRGB 色域外(クリップ表示)」付き

Why browser-only? / なぜブラウザ完結か

Color values look harmless, but in practice they are often part of confidential work: unreleased brand palettes, design tokens for a product that has not shipped, or client-specific theme files. Pasting them into a server-side converter quietly discloses that material to a third party. This tool performs every step of the conversion — sRGB transfer functions, the LMS and OKLab matrices, gamut checks — in JavaScript inside your browser. No network request is made when you type or copy a color, and the page works offline once loaded. You can verify this yourself: open DevTools, switch to the Network tab, convert a few colors, and watch the tab stay empty. For teams under NDA or working on pre-launch rebrands, browser-only processing is not a nice-to-have but a requirement.

色コードは一見すると機密性が低そうですが、未発表ブランドのカラーパレットやリリース前プロダクトのデザイントークンなど、NDA 対象の情報であることが珍しくありません。本ツールは sRGB ⇔ OKLab の行列計算を含むすべての変換をブラウザ内の JavaScript で実行し、ネットワーク送信は一切行いません。DevTools の Network タブが空のままであることで、誰でも検証できます。