メインコンテンツへスキップ
Z

カラーコンバーター

HEX、RGB / RGBA、HSL、HSV、CMYKの間で色をリアルタイム変換できるグリッド形式のツールです。カラーサンプルのプレビューやCSSカラー名の検索も可能です。

無料 登録不要 クライアントサイド プライバシーに配慮 Updated
アルファ

プレビュー
色名:

使い方

  1. 1 HEX、RGB、HSL、HSV、CMYKのいずれかの行に色の値を入力すると、残りの4行がリアルタイムで自動的に更新されます。
  2. 2 HEXの行にはCSSカラー名(red、dodgerblue、rebeccapurpleなど)を直接貼り付けることもできます。
  3. 3 「アルファチャンネルを含める」をオンにすると、HEX-8やRGBA / HSLA / HSVA形式に拡張され、スライダーで透明度を調整できます。
  4. 4 各行のCopyボタンで、その値をクリップボードにコピーできます。

このツールを使う理由

  • 5つの形式が常に同期されているため、別々の3つのサイトを行き来してコピー&ペーストする必要がありません。
  • モダンな記法と従来の記法の両方に対応しています — rgb(255 87 51)、rgb(255, 87, 51)、rgba(255 87 51 / 0.5)のいずれも入力可能です。
  • CSSカラー名の検索は、SVG / CSS4の148キーワードすべてに対応しています。
  • 計算はすべてブラウザ内で完結するため、あなたのブランドカラーパレットがどこかに送信されることはありません。

よくある質問

HEXはアルファチャンネルに対応していますか?

はい。アルファのスイッチをオンにすると、HEXは8桁表記(#RRGGBBAA)に拡張されます。この形式はモダンブラウザやほとんどのデザインツールで扱えます。

HSLやHSVの値が丸められてしまうのはなぜですか?

見やすさのため、表示上は各チャンネルの値を整数パーセントに丸めています。内部の計算は完全な精度で保持されているので、RGBに戻したときも元のバイト値が正しく再現されます。

CMYKの色が印刷用ソフトと少し違って見えます。

ブラウザや大半のオンライン変換ツールは、簡易的なRGB↔CMYK変換式を使用しています。実際の印刷結果はICC、GRACoL、FOGRAなどのカラープロファイルに左右されるため、このツールの値はあくまで画面上での目安として使ってください。

HEXとRGBの変換だけできれば十分なのですが?

このツールは5つの形式すべてに対応していますが、素早く変換したいだけの場合は、一番上の行にHEX値を貼り付け、2番目の行のRGB値を読み取るだけで構いません。

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

カラーコンバーターは、1つの色の値を複数のカラーモデル間で相互変換するツールです。代表的なものにHEX(Web用の短縮表記)、RGB / RGBA(赤・緑・青にオプションのアルファチャンネルを加えたもの)、HSL(色相・彩度・明度)、HSV(色相・彩度・明度値)、そして印刷用のCMYK(シアン・マゼンタ・イエロー・キー)があります。このツールはあらゆる入力値を共通の内部表現に正規化した上で各形式間を変換し、結果を目で確認できるカラーサンプルのプレビューも用意しています。

機能

Five color models

Convert between HEX, RGB / RGBA, HSL, HSV, and CMYK — edit any field and the rest update live.

Swatch & named colors

A live swatch previews the result, and the 148 CSS named colors are searchable.

Free & private

Runs entirely client-side — no signup, nothing uploaded.

例

Input

#3B82F6

Output

rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%)

主な用途

  1. 1

    HEX ↔ RGB for CSS

    Convert a designer's HEX to rgb()/rgba() or HSL for stylesheets and design tokens.

  2. 2

    Print-ready CMYK

    Get an approximate CMYK breakdown of a screen color for print work.

  3. 3

    Tune with HSL/HSV

    Switch to HSL or HSV to adjust hue, saturation, and lightness intuitively.

カラーコンバーター と他の選択肢の比較

カラーコンバーター と一般的なブラウザ・デスクトップの代替ツールを比較 — 機能を一目で比較できます。
機能 Zerethon Tools 一般的なオンラインツール デスクトップアプリ
HEX / RGB / HSL / HSV / CMYK All five 2–3 All five
Alpha channel (RGBA) Yes Sometimes Yes
CSS named-color lookup Yes Rarely Sometimes
Live grid (all formats) Yes No Sometimes
Free Yes Yes Often paid
概要

Zerethon's color converter translates a single color between HEX, RGB/RGBA, HSL, HSV, and CMYK in a live grid, with a swatch preview and CSS named-color lookup. It normalizes to a common internal value and round-trips across formats per the CSS Color specification. Everything runs in your browser.

カテゴリ
クリエイター
料金
無料
プライバシー
ブラウザベース
登録
不要

References

プライバシー

明記されない限り、データがブラウザの外に送信されることはありません。カラーコンバーター は完全にクライアント側で動作します — サーバーへのアップロードなし、ログなし、入力内容のトラッキングなし。

基礎を学ぶ

Hexadecimal とは？

関連ツール

YouTubeサムネイルダウンローダー

YouTube動画のサムネイルを利用可能なすべての解像度でダウンロードできます。動画URLを貼り付けるだけです。

ツールを開く

Open Graphプレビュー

URLをSNSでシェアしたときにどう表示されるか確認できます。Facebook、Twitter、LinkedIn、Slackでのシェアカードをプレビューします。

ツールを開く

単語数・文字数カウント

単語数、文字数、文の数、段落数を瞬時にカウント。読書時間、朗読時間、頻出キーワードも同時に表示します。

ツールを開く

Lorem Ipsumジェネレーター

Lorem Ipsumのダミーテキストを段落・文・単語単位で生成します。HTMLタグで囲むオプションつき。

ツールを開く

Zerethon Social で作成・共有・成長しよう

無料登録。ポイントを獲得し、実績を集め、世界中のクリエイターとつながりましょう。

無料登録