カラーシェードジェネレーター - 任意の色からティント・シェード・トーンを生成 オンライン
1つのベースカラーからティント、シェード、トーンを生成。CSS変数、Tailwind設定、JSON、SCSSでエクスポート — 100%クライアントサイド。
よくある質問
カラーシェードジェネレーターとは何ですか？
カラーシェードジェネレーターは、1つのベースカラーから体系的な色のバリエーションを作成するオンラインツールです。ティント（白と混ぜて明るく）、シェード（黒と混ぜて暗く）、トーン（彩度を下げてソフトに）を生成します。
このツールの使い方は？
1. HEX入力またはカラーピッカーでベースカラーを入力。2. 表示モードを選択：すべて、ティント、シェード、トーン、Tailwindスケール。3. ステップ数（5-25）を調整。4. 出力形式（HEX、RGB、HSL）を選択。5. スウォッチをクリックしてコピーするか、エクスポートオプションを使用。
カラーデータは安全ですか？
カラーデータは100%安全で、ブラウザから外に出ることはありません。すべての計算はクライアントサイドのJavaScript数学演算で完全に実行されます。
ティント、シェード、トーンの違いは？
ティントは白と混ぜた色（明るい）。シェードは黒と混ぜた色（暗い）。トーンは彩度を下げた色（落ち着いた）。この3つの操作は、コアの色相アイデンティティを維持しながらバリエーションを作る基本的な方法です。
カラーパレットジェネレーターとの違いは？
カラーパレットジェネレーターは色彩理論の関係を使って多色調和パレットを作成します。カラーシェードジェネレーターは単一色のバリエーションに焦点を当てます。複数の関連色が必要な場合はパレットジェネレーター、1色からの明度/彩度バリエーションが必要な場合はシェードジェネレーターを使用してください。
Tailwind CSSプロジェクトで使えますか？
はい。標準の50-950命名規則を使った専用Tailwindビューを提供しています。スケールをTailwind CSS設定オブジェクトとしてエクスポートできます。
ティントとシェードの割合はどう計算されますか？
ティントは各RGBチャネルを255（白）に向けて線形補間して計算します。シェードは0（黒）に向けて補間します。トーンはHSL彩度値を下げます。
コード例
// Color Shades Generator
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return null;
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0'))
.join('');
}
function generateTints(hex, steps = 10) {
const rgb = hexToRgb(hex);
if (!rgb) return [];
const tints = [];
for (let i = 1; i <= steps; i++) {
const factor = i / (steps + 1);
tints.push(rgbToHex(
rgb.r + (255 - rgb.r) * factor,
rgb.g + (255 - rgb.g) * factor,
rgb.b + (255 - rgb.b) * factor,
));
}
return tints;
}
function generateShades(hex, steps = 10) {
const rgb = hexToRgb(hex);
if (!rgb) return [];
const shades = [];
for (let i = 1; i <= steps; i++) {
const factor = 1 - i / (steps + 1);
shades.push(rgbToHex(
rgb.r * factor,
rgb.g * factor,
rgb.b * factor,
));
}
return shades;
}
// Usage
const base = '#3b82f6';
console.log('Tints:', generateTints(base, 5));
console.log('Shades:', generateShades(base, 5));