カラーコンバーター/ HEX · RGB · HSL · HSV · CMYK
HEX、RGB、HSL、HSV、CMYK の5つのカラー形式を相互変換。ライブカラーピッカーとシェードパレット付き。
HEX
シェード
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)
このツールは役に立ちましたか？
コード例
CSS / Tailwind
/* CSS custom properties */
:root {
--color-primary: #3b82f6; /* HEX */
--color-primary-rgb: 59, 130, 246; /* RGB values only */
}
/* Usage */
.button {
background: var(--color-primary);
color: hsl(210, 40%, 98%); /* HSL */
border: 1px solid rgb(59 130 246 / 30%); /* CSS 4 syntax */
}
/* Tailwind config */
// tailwind.config.js
colors: { brand: '#3b82f6' }JavaScript
// HEX → RGB
function hexToRgb(hex) {
const n = parseInt(hex.replace('#', ''), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
// RGB → HEX
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => v.toString(16).padStart(2, '0'))
.join('');
}
// npm: chroma-js (full-featured)
import chroma from 'chroma-js';
chroma('#3b82f6').rgb() // [59, 130, 246]
chroma('#3b82f6').hsl() // [0.58, 0.89, 0.60]
chroma.scale(['white','#3b82f6']).colors(6)Python
import colorsys
# HEX → RGB
hex_str = '#3b82f6'
rgb = tuple(int(hex_str[i:i+2], 16) for i in (1, 3, 5))
# (59, 130, 246)
# RGB → HSL (0-1 range)
r, g, b = (v / 255 for v in rgb)
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h*360:.0f}, {s*100:.0f}%, {l*100:.0f}%)")
# pip install colour-science
import colour
colour.sRGB_to_XYZ([0.23, 0.51, 0.96])Swift / iOS
import SwiftUI
// HEX to Color
extension Color {
init(hex: String) {
let hex = hex.trimmingCharacters(
in: .alphanumerics.inverted)
var int = UInt64()
Scanner(string: hex).scanHexInt64(&int)
let r = Double((int >> 16) & 0xFF) / 255
let g = Double((int >> 8) & 0xFF) / 255
let b = Double( int & 0xFF) / 255
self.init(red: r, green: g, blue: b)
}
}
Color(hex: "#3b82f6")よくある質問
HEX、RGB、HSL の違いは？
HEX（16進数）は Web 開発で最も一般的なカラー形式で、例えば #FF5733 のように記述します。本質的には RGB の16進数表現です。RGB は赤・緑・青の各チャンネル強度（0-255）を直接指定します。HSL は色相（Hue）・彩度（Saturation）・明度（Lightness）を使用し、人間の直感に近いため色調整がしやすいのが特徴です。
HSV と HSL の違いは？
HSV（色相・彩度・明度/Value）と HSL（色相・彩度・輝度/Lightness）はどちらも人間の視覚に即したカラーモデルです。主な違い：HSV では V=100% が最も明るい純色、S=0 で白になります。HSL では L=100% が白、L=0% が黒、L=50% が最も鮮やかな色です。Photoshop や Figma は HSB（HSV）を、CSS は HSL を使用します。
CMYK とは？なぜ Web で使われないのか？
CMYK は印刷業界のカラーモデルで、C（シアン）・M（マゼンタ）・Y（イエロー）・K（ブラック）の4色のインクによる減法混色です。Web やスクリーン表示は加法混色の RGB（光の三原色）を使用するため、CSS は CMYK をネイティブサポートしていません。デザイナーは印刷入稿前に RGB から CMYK への変換が必要です。
CSS で HEX カラーを使うには？
CSS は3つの書式をサポートします：6桁の #RRGGBB（例：#3b82f6）、3桁の省略形 #RGB（例：#38f = #3388ff）、透明度付き8桁の #RRGGBBAA（例：#3b82f680 は透明度50%）。モダンブラウザは CSS Color Level 4 の color(srgb ...) 構文もサポートしています。
カラーコントラストの計算方法は？
WCAG（ウェブコンテンツアクセシビリティガイドライン）では、本文テキストと背景のコントラスト比は最低4.5:1（AA）または7:1（AAA）が推奨されます。コントラストは相対輝度で計算します：RGB値を線形化し、(L1 + 0.05) / (L2 + 0.05) で比率を算出します。
色階（シェード）はどのように生成される？
本ツールの色階は、元の色の色相（H）と彩度（S）を固定したまま、HSL の明度（L）を変化させて6つの明暗バリエーションを生成します。Tailwind CSS のカラーパレット生成ロジックと類似しており、ブランドカラー系統の素早い構築に適しています。