> 変換 | プレビュー | 選択 <
// HEX、RGB、HSL、HSV、CMYK間の変換
カラープレビュー
リアルタイムでプレビュー更新。
任意形式入力
全形式が自動更新。
5つのカラー形式
HEX, RGB, HSL, HSV/HSB, CMYK対応。
// カラー形式について
カラーモデル:
加法RGB、減法CMYK、HEX表記、HSL/HSVなど。
例:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
一般的な使用例:
- >Web開発: CSS色
- >印刷: RGB→CMYK
- >UIデザイン: HSL調整
- >ブランド: 一貫した色
- >アクセシビリティ: コントラスト
>> よくある質問
Q: HEX vs RGB?
HEX and RGB represent the same color model in different notations. HEX uses hexadecimal (#FF5733) while RGB uses decimal (rgb(255, 87, 51)).
Q: HSL?
HSL = Hue, Saturation, Lightness. More intuitive for humans. CSS supports hsl() natively.
Q: CMYK?
CMYK is for print. Not all RGB colors can be reproduced in CMYK.
Q: CSS color formats?
Modern browsers support HEX, RGB, HSL, named colors, hwb(), lab(), lch(), oklch().
Q: Accessibility?
Color format does not directly affect accessibility. WCAG 2.1 requires 4.5:1 minimum contrast for normal text.
// よく使う色のHEX・RGB・HSL
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
// CSSの色表記と変換
color: #ff8000; color: #f80; /* shorthand for #ff8800 */ color: #ff800080; /* 8 digits: last two = alpha */ color: rgb(255 128 0); color: rgb(255 128 0 / 50%); color: hsl(30 100% 50%); #FF8000 -> FF=255 80=128 00=0 -> rgb(255, 128, 0)
>> その他の質問
Q: HEXからRGBへ手計算で変換するには？
A: コードを2桁ずつに分け、それぞれを16進から10進に変換します。#FF8000 → FF = 255、80 = 128、00 = 0 なので rgb(255, 128, 0) です。
Q: 短縮形（#F80）や8桁のHEXとは？
A: #F80 は #FF8800 の短縮形（各桁を2回繰り返す）です。8桁（#RRGGBBAA）の場合、末尾2桁がアルファ値（不透明度）です。
Q: 印刷と画面で色が違って見えるのはなぜですか？
A: 画面は光を加法混色（RGB）で表現し色域が広く、印刷はインクを減法混色（CMYK）で重ねます。鮮やかな緑・青・蛍光色は印刷で近似になることが多いため、色校正で確認してください。