カラーコンバーター - HEX, RGB, HSL, HSV 変換 オンライン
HEX、RGB、HSL、HSV形式間で色を変換。カラーピッカーで視覚的に選択、CSSカラーコードをコピー — 無料カラーコード変換器。
よくある質問
カラーコンバーターとは何ですか?
カラーコンバーターは、HEX、RGB、HSL、HSV、CMYKなどの異なるフォーマット間で色の値を変換するツールです。各フォーマットは色を異なる方法で表現します:HEXは16進数表記(#FF5733)、RGBは赤-緑-青の値(rgb(255, 87, 51))、HSLは色相-彩度-明度(hsl(14, 100%, 60%))、CMYKは印刷用です。このツールは、Web開発、デザイン、アクセシビリティ作業のためのシームレスな変換を可能にします。
HEX、RGB、HSLの違いは何ですか?
HEXは、CSSやデザインツールで一般的に使用されるコンパクトな6桁の16進数フォーマット(#RRGGBB)です。RGB(赤、緑、青)は各チャンネルに0-255の10進数値を使用し、プログラムによる操作に直感的です。HSL(色相、彩度、明度)はより人間に優しいです:色相は色(0-360度)、彩度は強度(0-100%)、明度は明るさ(0-100%)です。コンパクトな表記にはHEX、計算にはRGB、色のプロパティを視覚的に調整する場合はHSLを使用してください。
HSVとHSLの違いは何ですか?
HSV(色相、彩度、明度)とHSL(色相、彩度、輝度)はどちらも同じ色相コンポーネント(0-360度)を使用しますが、明るさの表現方法が異なります。HSVでは、最大Value(V=100%)は純粋な色を与えますが、HSLでは、最大Lightness(L=100%)は常に白になります。HSVは、絵の具の混合により直感的にマッピングされるため、グラフィックデザイナーやカラーピッカーに好まれます。HSLは、明度の調整で予測可能なティントとシェードが作成されるため、CSSに適しています。
WCAGコントラスト比とは何ですか?なぜ重要ですか?
WCAG(ウェブコンテンツアクセシビリティガイドライン)コントラスト比は、前景色と背景色の間の輝度の差を測定します。比率は1:1(コントラストなし)から21:1(白地に黒)までの範囲です。アクセシビリティ準拠のために、通常のテキストは4.5:1(AA)または7:1(AAA)が必要で、大きなテキスト(18px以上の太字または24px以上)は3:1(AA)または4.5:1(AAA)が必要です。適切なコントラストは、視覚障害のあるユーザーやさまざまな照明条件でコンテンツが読めることを保証します。
カラーハーモニーとは何ですか?どのように使用しますか?
カラーハーモニーは、カラーホイール上の位置に基づいて美的に心地よい色の組み合わせです。補色は互いに反対側にあり(例:青とオレンジ)、高いコントラストを作成します。類似色は隣接しており(例:青、青緑、緑)、調和のとれたデザインを作成します。三色配色は三角形を形成し(例:赤、黄、青)、バランスの取れた多様性を提供します。強調には補色を、まとまりのあるデザインには類似色を、鮮やかなインターフェースには三色配色を使用してください。
このカラーコンバーターは安全でプライバシーは保護されていますか?
はい。このツールはクライアントサイドのJavaScriptを使用して100%ブラウザで実行されます。色のデータ、パレット、またはデザイン情報がサーバーに送信されることはありません。すべての変換、コントラスト計算、パレット生成はデバイス上でローカルに行われます。これにより、機密性の高いブランドカラー、クライアントプロジェクト、または機密性の高いデザイン作業を安全に行うことができます。
コード例
// HEX to RGB
const hexToRgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
// RGB to HSL
const rgbToHsl = (r, g, b) => {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) { h = s = 0; }
else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
};
console.log(hexToRgb('#FF5733')); // { r: 255, g: 87, b: 51 }
console.log(rgbToHsl(255, 87, 51)); // { h: 11, s: 100, l: 60 }