カラーコード変換
HEX・RGB・HSL・HSV・OKLCH・CMYK のカラーコードを相互に変換します。文字と背景のコントラスト比（WCAG）も確かめられます。
1. 色を入れる
カラーコードを貼り付けるか、左の四角を押して色を選びます。
例: #FF6B35、rgb(255, 107, 53)、hsl(16, 100%, 60%)、C0 M58 Y79 K0、tomato
2. 変換の結果
右のボタンで、そのままCSSに貼れる形でコピーできます。
- HEX
- —
- RGB
- —
- HSL
- —
- HSV (HSB)
- —
- OKLCH
- —
- CMYK（目安）
- —
- CSS の色の名前
- —
3. コントラスト比を確かめる
文字と背景の色の組み合わせが読みやすいかを、WCAG（ウェブのアクセシビリティの基準）で確かめます。
入れた色を使うところ
上で色を入れると、ここに見本が出ます。
コントラスト比
—
- 通常の文字 AA4.5 : 1 以上—
- 通常の文字 AAA7 : 1 以上—
- 大きな文字 AA3 : 1 以上—
- 大きな文字 AAA4.5 : 1 以上—
大きな文字は、18pt（24px）以上、または太字で 14pt（約 18.7px）以上の文字です。
変換はこの端末の中で行われ、入れた色はどこにも送られません。
CMYK は、印刷の色の設定（ICC プロファイル）を使わない計算の目安です。印刷所に入稿するときは、デザインのソフトで確かめてください。
役に立ったら、シェアしてもらえるとうれしいです
使い方
1. カラーコードを入れる
「カラーコード」の欄に、変換したい色のコード（例: #FF6B35）を入れます。入れたそばから、下の「変換の結果」に RGB・HSL・HSV・OKLCH・CMYK と、CSS の色の名前が出ます。
左の「カラーコード」の欄に、変換したい色のコード（例: #FF6B35）を入れます。入れたそばから、右の「変換の結果」に RGB・HSL・HSV・OKLCH・CMYK と、CSS の色の名前が出ます。
2. 色を選んで入れる
「カラーコード」の欄の左の、色の四角をタップします。色を選ぶ画面が開き、選んだ色のコードが欄に入って、結果も変わります。
「カラーコード」の欄の左の、色の四角を押します。色を選ぶ画面が開き、選んだ色のコードが欄に入って、結果も変わります。
3. 結果をコピーする
「変換の結果」の「RGB」の右のボタンをタップすると、rgb(…) の形でコピーします。下の「結果をまとめてコピー」をタップすると、すべての書き方を1行ずつコピーします。
「変換の結果」の「RGB」の右のボタンを押すと、rgb(…) の形でコピーします。下の「結果をまとめてコピー」を押すと、すべての書き方を1行ずつコピーします。
4. コントラスト比を確かめる
下の「コントラスト比を確かめる」で、「背景の色」の右の「黒」をタップします。黒い背景の上の文字の見本と、コントラスト比、通常の文字・大きな文字が AA・AAA の基準を満たすかが出ます。
下の「コントラスト比を確かめる」で、「背景の色」の右の「黒」を押します。黒い背景の上の文字の見本と、コントラスト比、通常の文字・大きな文字が AA・AAA の基準を満たすかが出ます。
こんなときにおすすめ
デザインの色を CSS に書きたい
デザインのソフトでコピーした HEX を貼ると、rgb() や hsl()、新しい oklch() の書き方がすぐに出ます。
ウェブ制作・アプリ開発の人
文字の色が読みやすいか確かめたい
文字と背景の色を入れるだけで、コントラスト比と WCAG の AA・AAA を満たすかがわかります。
アクセシビリティを気にするデザイナー
画面の色を、印刷の CMYK の目安にしたい
チラシや名刺を作るときに、ウェブの色が CMYK でどのくらいになるかの見当をつけられます。
印刷物を作る人
ブランドの色を、いろいろな形式でまとめたい
「結果をまとめてコピー」で、HEX から CMYK までを一度にコピーして、資料やガイドラインに貼れます。
広報・ブランドの担当者
使う前に知っておきたいこと
- CMYK は計算の目安です。印刷所の色の設定（ICC プロファイル）に合わせた正確な値は、デザインのソフトで確かめてください。
- 画像から色を取り出したいときは、画像から色を抽出を使ってください。
- DIC・PANTONE などの特色の番号や、マンセル値には変換できません。
カラーコードの書き方の違い
画面の色は、光の三原色（赤・緑・青）の強さで表します。HEX（#FF6B35）と RGB（rgb(255, 107, 53)）は同じものを 16 進数と 10 進数で書いたもので、HSL と HSV は、それを「色合い・鮮やかさ・明るさ」に置きかえて、人が色を調整しやすくした書き方です。OKLCH は、人の目の感じ方に近い明るさで表すので、明るさをそろえた配色を作りやすく、新しい CSS で使われ始めています。
CMYK は、印刷のインク（シアン・マゼンタ・イエロー・黒）の量です。画面の色は光、印刷はインクなので、同じ色を完全には出せません。このツールの CMYK は、よく使われる計算式で出した目安です。コントラスト比は、文字と背景の明るさの差を 1〜21 で表したもので、WCAG では通常の文字で 4.5 以上（AA）、7 以上（AAA）が基準です。
よくある質問
カラーコードの変換とコントラスト比で、気になりやすいことをまとめました。
入れた色は、どこかに送られますか？
送られません。変換もコントラスト比の計算も、お使いの端末のブラウザの中だけで行われます。
どんな書き方で入れられますか？
#FF6B35・#F63 のような HEX（# なしも可）、rgb()・rgba()、hsl()・hsla()、hsv()・hsb()、oklch()、cmyk()・「C0 M58 Y79 K0」、tomato のような CSS の色の名前を読み取ります。「255, 107, 53」のような数だけなら RGB として読みます。全角の文字でもかまいません。
透明度（アルファ）のある色も変換できますか？
できます。#FF6B3580 のような 8 桁の HEX や、rgba(255, 107, 53, 0.5) を入れると、HEX は 8 桁、RGB・HSL・OKLCH には不透明度を付けて出します。HSV と CMYK には不透明度の書き方がないので、色だけを出します。
HSL に変換して戻すと、値が 1 ずれるのはなぜですか？
HSL・HSV は、ほかのサイトやデザインのソフトと同じく、整数に丸めて出しています。丸めた値から戻すと、RGB が 1〜2 ずれることがあります。正確な値が必要なときは、HEX か RGB を使ってください。
CMYK の値は、印刷にそのまま使えますか？
目安として使ってください。実際の印刷の色は、紙やインク、印刷所の色の設定（ICC プロファイル）で変わります。このツールの値は、設定を使わない一般的な計算式で出しています。入稿の前に、デザインのソフトや印刷所で確かめてください。
OKLCH とは何ですか？
明るさ（L）・鮮やかさ（C）・色合い（H）で色を表す書き方で、人の目の感じ方に近いのが特長です。明るさの数をそろえれば、色合いが違っても同じくらいの明るさに見えます。新しいブラウザの CSS で oklch() として使えます。
OKLCH で入れた色が、少し変わってしまいます。
OKLCH は、ふつうの画面（sRGB）では出せない鮮やかな色も書けます。そのような色は、明るさと色合いはそのままに、出せるところまで鮮やかさを下げた色にします。このときは入力欄の下にお知らせが出ます。
コントラスト比の AA・AAA とは何ですか？
ウェブのアクセシビリティの基準（WCAG 2）の達成の度合いです。通常の文字は 4.5 以上で AA、7 以上で AAA、大きな文字（18pt 以上、または太字で 14pt 以上）は 3 以上で AA、4.5 以上で AAA です。
コントラスト比が 4.49 なのに、4.5 と表示されないのはなぜですか？
基準にわずかに届かない組み合わせを「合格」に見せないよう、小数点以下 2 桁で切り捨てて表示し、その値で判定しています。
無料で使えますか？
無料です。登録も不要で、広告もありません。
ほかのツール
- 消費税計算（税込⇔税抜）
金額を入れるだけで、税抜・消費税・税込をすぐに計算します。10%と8%（軽減税率）、端数の処理も選べます。
- 年齢計算・年齢早見表
生年月日を選ぶだけで、満年齢・数え年・学年・干支がわかります。生まれ年ごとの年齢早見表つき。
- 日付計算（◯日後・◯日前）
基準の日から◯日後・◯日前・◯営業日後の日付と曜日を、すぐに出します。土日と祝日を飛ばして数えることもできます。
- 時間計算（勤務時間の合計）
出勤・退勤・休憩から働いた時間を出して合計します。時間の足し算・引き算や、小数の時間への換算もできます。
- 割り勘計算
合計と人数を入れるだけで、1人あたりの金額がすぐに出ます。100円単位の切り上げ、上司は多めなどの傾斜、幹事の端数の調整もできます。
- Unix時間変換（エポック秒 ⇔ 日時）
Unix時間（エポック秒・ミリ秒）を日本時間・UTC の日時に、日時を Unix時間に、すぐに変換します。