File indexing completed on 2026-04-18 07:40:34
0001 <!DOCTYPE html>
0002 <html lang="en">
0003 <head>
0004 <meta charset="UTF-8">
0005 <meta name="viewport" content="width=device-width, initial-scale=1.0">
0006 <title>Color Palette</title>
0007 <style>
0008 * { box-sizing: border-box; margin: 0; padding: 0; }
0009 body {
0010 font-family: 'Segoe UI', system-ui, sans-serif;
0011 background: #1a1a2e;
0012 color: #eee;
0013 padding: 2rem;
0014 }
0015 h1 { margin-bottom: 1rem; color: #fff; }
0016 h2 { margin: 2rem 0 1rem; color: #aaa; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; }
0017 .palette { display: flex; flex-wrap: wrap; gap: 1rem; }
0018 .color-card {
0019 width: 140px;
0020 border-radius: 8px;
0021 overflow: hidden;
0022 background: #2a2a4a;
0023 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
0024 }
0025 .color-swatch { height: 80px; }
0026 .color-info { padding: 0.75rem; font-size: 0.75rem; }
0027 .color-name { font-weight: 600; margin-bottom: 0.25rem; color: #fff; }
0028 .color-hex { color: #888; font-family: monospace; }
0029 pre {
0030 background: #2a2a4a;
0031 padding: 1.5rem;
0032 border-radius: 8px;
0033 overflow-x: auto;
0034 font-size: 0.85rem;
0035 line-height: 1.6;
0036 margin-bottom: 2rem;
0037 }
0038 .comment { color: #6a9955; }
0039 .const { color: #569cd6; }
0040 .name { color: #9cdcfe; }
0041 .hex { color: #ce9178; }
0042 </style>
0043 </head>
0044 <body>
0045 <h1>Color Palette</h1>
0046
0047 <h2>JavaScript/TypeScript Variables</h2>
0048 <pre id="code"></pre>
0049
0050 <h2>Cool Colors (Light/Pastel)</h2>
0051 <div class="palette" id="cool-palette"></div>
0052
0053 <h2>Medium Colors (Moderate Saturation)</h2>
0054 <div class="palette" id="medium-palette"></div>
0055
0056 <h2>Warm Colors (Saturated/Heavy)</h2>
0057 <div class="palette" id="warm-palette"></div>
0058
0059 <h2>Metallic Colors</h2>
0060 <div class="palette" id="metallic-palette"></div>
0061
0062 <h2>All Colors Sorted by Hue</h2>
0063 <div class="palette" id="all-palette"></div>
0064
0065 <script>
0066 // ============================================================
0067 // COOL COLORS (Light/Pastel)
0068 // ============================================================
0069 const GRAY_50 = 0xFAFAFA; // Almost white
0070 const GRAY_100 = 0xF5F5F5; // Very light gray
0071 const BLUE_GRAY_50 = 0xECEFF1; // Very light blue-gray
0072 const INDIGO_50 = 0xE8EAF6; // Extremely light indigo
0073 const BLUE_WHITE = 0xF5F9FF; // Custom ultra-light blue-white
0074 const LIGHT_BLUE_50 = 0xE1F5FE; // Extremely light blue
0075 const BLUE_200 = 0x90CAF9; // Light blue with more saturation
0076 const CYAN_50 = 0xE0F7FA; // Extremely light cyan
0077 const GREEN_100 = 0xC8E6C9; // Light green
0078 const YELLOW_100 = 0xFFF9C4; // Very light yellow
0079 const AMBER_50 = 0xFFF8E1; // Extremely light amber/peach
0080 const ORANGE_100 = 0xFFE0B2; // Very light warm orange/peach
0081 const PURPLE_50 = 0xF3E5F5; // Extremely light purple
0082 const RED_50 = 0xFFEBEE; // Extremely light red/pink
0083 const PINK_50 = 0xFCE4EC; // Extremely light pink
0084 const BROWN_50 = 0xEFEBE9; // Extremely light brown/cream
0085 const TAN_LIGHT = 0xE6D5C3; // Light tan/beige
0086
0087 // ============================================================
0088 // MEDIUM COLORS (Moderate Saturation - Between Cool and Warm)
0089 // ============================================================
0090 const GRAY_300 = 0xE0E0E0; // Light-medium gray
0091 const BLUE_GRAY_200 = 0xB0BEC5; // Light-medium blue-gray
0092 const INDIGO_100 = 0xC5CAE9; // Light indigo
0093 const BLUE_300 = 0x64B5F6; // Medium-light blue
0094 const LIGHT_BLUE_200 = 0x81D4FA; // Medium-light cyan-blue
0095 const CYAN_200 = 0x80DEEA; // Medium-light cyan
0096 const TEAL_200 = 0x80CBC4; // Medium-light teal
0097 const GREEN_200 = 0xA5D6A7; // Medium-light green
0098 const YELLOW_200 = 0xFFF59D; // Medium-light yellow
0099 const AMBER_200 = 0xFFE082; // Medium-light amber
0100 const ORANGE_200 = 0xFFCC80; // Medium-light orange
0101 const DEEP_ORANGE_200 = 0xFFAB91; // Medium-light deep orange
0102 const PURPLE_100 = 0xE1BEE7; // Light purple
0103 const RED_100 = 0xFFCDD2; // Very light red
0104 const PINK_100 = 0xF8BBD0; // Very light pink
0105 const BROWN_100 = 0xD7CCC8; // Very light brown/taupe
0106 const TAN_MEDIUM = 0xC4A77D; // Medium tan/camel
0107
0108 // ============================================================
0109 // WARM COLORS (Saturated/Heavy)
0110 // ============================================================
0111 const GRAY_500 = 0x9E9E9E; // Medium gray
0112 const BLUE_GRAY_400 = 0x78909C; // Medium-dark blue-gray
0113 const INDIGO_400 = 0x5C6BC0; // Medium indigo
0114 const BLUE_500 = 0x2196F3; // Strong blue
0115 const CYAN_500 = 0x00BCD4; // Strong cyan
0116 const TEAL_500 = 0x009688; // Strong teal
0117 const GREEN_500 = 0x4CAF50; // Strong green
0118 const YELLOW_500 = 0xFFEB3B; // Strong yellow
0119 const AMBER_500 = 0xFFC107; // Strong amber
0120 const ORANGE_500 = 0xFF9800; // Strong orange
0121 const DEEP_ORANGE_500 = 0xFF5722; // Strong deep orange
0122 const PURPLE_400 = 0xAB47BC; // Medium purple
0123 const RED_500 = 0xF44336; // Strong red
0124 const PINK_400 = 0xEC407A; // Strong pink
0125 const BROWN_500 = 0x795548; // Strong brown
0126 const SIENNA = 0xA0522D; // Sienna
0127 const TERRACOTTA = 0xE2725B; // Terracotta
0128
0129 // ============================================================
0130 // METALLIC COLORS (Desaturated with metallic character)
0131 // ============================================================
0132 // Bluish Metallics (2 requested)
0133 const STEEL_BLUE = 0x4682B4; // Steel blue - industrial metal
0134 const TITANIUM = 0x878F99; // Titanium - blue-gray metal
0135 const GUNMETAL_BLUE = 0x5C6274; // Gunmetal with blue tint
0136 const PEWTER = 0x8A9A9E; // Pewter (blue-gray)
0137
0138 // Reddish Metallics (2 requested)
0139 const COPPER = 0xB87333; // Classic copper
0140 const ROSE_GOLD = 0xB76E79; // Classic rose gold
0141 const COPPER_BRIGHT = 0xDA8A67; // Bright/polished copper
0142 const RUST_METAL = 0x8C4A3D; // Oxidized rust metal
0143
0144 // Neutral/Gold Metallics
0145 const SILVER = 0xC0C0C0; // Classic silver
0146 const CHROME = 0xDBE4EB; // Chrome / polished silver
0147 const GUNMETAL = 0x53565A; // Neutral gunmetal gray
0148 const GOLD = 0xD4AF37; // Classic gold
0149 const CHAMPAGNE = 0xF5E6A3; // Champagne gold (light)
0150 const BRASS = 0xB5A642; // Brass
0151 const BRONZE = 0xCD7F32; // Classic bronze
0152 const ANTIQUE_BRONZE = 0x8C7853; // Aged/antique bronze
0153
0154 // ============================================================
0155 // COLOR COLLECTIONS
0156 // ============================================================
0157 const METALLIC_COLORS = {
0158 // Bluish
0159 STEEL_BLUE, TITANIUM, GUNMETAL_BLUE, PEWTER,
0160 // Reddish
0161 COPPER, ROSE_GOLD, COPPER_BRIGHT, RUST_METAL,
0162 // Neutral/Gold
0163 SILVER, CHROME, GUNMETAL, GOLD, CHAMPAGNE, BRASS, BRONZE, ANTIQUE_BRONZE
0164 };
0165
0166 const COOL_COLORS = {
0167 GRAY_50, GRAY_100, BLUE_GRAY_50, INDIGO_50, BLUE_WHITE,
0168 LIGHT_BLUE_50, BLUE_200, CYAN_50, GREEN_100, YELLOW_100,
0169 AMBER_50, ORANGE_100, PURPLE_50, RED_50, PINK_50,
0170 BROWN_50, TAN_LIGHT
0171 };
0172
0173 const MEDIUM_COLORS = {
0174 GRAY_300, BLUE_GRAY_200, INDIGO_100, BLUE_300, LIGHT_BLUE_200,
0175 CYAN_200, TEAL_200, GREEN_200, YELLOW_200, AMBER_200,
0176 ORANGE_200, DEEP_ORANGE_200, PURPLE_100, RED_100, PINK_100,
0177 BROWN_100, TAN_MEDIUM
0178 };
0179
0180 const WARM_COLORS = {
0181 GRAY_500, BLUE_GRAY_400, INDIGO_400, BLUE_500, CYAN_500,
0182 TEAL_500, GREEN_500, YELLOW_500, AMBER_500, ORANGE_500,
0183 DEEP_ORANGE_500, PURPLE_400, RED_500, PINK_400,
0184 BROWN_500, SIENNA, TERRACOTTA
0185 };
0186
0187 const ALL_COLORS = { ...COOL_COLORS, ...MEDIUM_COLORS, ...WARM_COLORS, ...METALLIC_COLORS };
0188
0189 // ============================================================
0190 // UTILITY FUNCTIONS
0191 // ============================================================
0192 function hexToRgb(hex) {
0193 return {
0194 r: (hex >> 16) & 255,
0195 g: (hex >> 8) & 255,
0196 b: hex & 255
0197 };
0198 }
0199
0200 function rgbToHsl(r, g, b) {
0201 r /= 255; g /= 255; b /= 255;
0202 const max = Math.max(r, g, b), min = Math.min(r, g, b);
0203 let h, s, l = (max + min) / 2;
0204
0205 if (max === min) {
0206 h = s = 0;
0207 } else {
0208 const d = max - min;
0209 s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
0210 switch (max) {
0211 case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
0212 case g: h = ((b - r) / d + 2) / 6; break;
0213 case b: h = ((r - g) / d + 4) / 6; break;
0214 }
0215 }
0216 return { h: h * 360, s: s * 100, l: l * 100 };
0217 }
0218
0219 function getHue(hex) {
0220 const { r, g, b } = hexToRgb(hex);
0221 return rgbToHsl(r, g, b);
0222 }
0223
0224 function toHexString(num) {
0225 return '#' + num.toString(16).padStart(6, '0').toUpperCase();
0226 }
0227
0228 function sortByHue(colors) {
0229 return Object.entries(colors).sort((a, b) => {
0230 const hslA = getHue(a[1]);
0231 const hslB = getHue(b[1]);
0232 if (Math.abs(hslA.h - hslB.h) < 10) {
0233 return hslB.l - hslA.l;
0234 }
0235 return hslA.h - hslB.h;
0236 });
0237 }
0238
0239 function createColorCard(name, value) {
0240 const hexStr = toHexString(value);
0241 return `
0242 <div class="color-card">
0243 <div class="color-swatch" style="background: ${hexStr}"></div>
0244 <div class="color-info">
0245 <div class="color-name">${name}</div>
0246 <div class="color-hex">${hexStr} / 0x${value.toString(16).toUpperCase()}</div>
0247 </div>
0248 </div>
0249 `;
0250 }
0251
0252 function renderPalette(containerId, colors) {
0253 const sorted = sortByHue(colors);
0254 document.getElementById(containerId).innerHTML =
0255 sorted.map(([name, value]) => createColorCard(name, value)).join('');
0256 }
0257
0258 function generateCode() {
0259 const coolSorted = sortByHue(COOL_COLORS);
0260 const mediumSorted = sortByHue(MEDIUM_COLORS);
0261 const warmSorted = sortByHue(WARM_COLORS);
0262 const metallicSorted = sortByHue(METALLIC_COLORS);
0263
0264 let code = `<span class="comment">// ============================================================</span>
0265 <span class="comment">// COOL COLORS (Light/Pastel) - Sorted by Hue</span>
0266 <span class="comment">// ============================================================</span>
0267 `;
0268 coolSorted.forEach(([name, value]) => {
0269 const pad = ' '.repeat(Math.max(0, 18 - name.length));
0270 code += `<span class="const">const</span> <span class="name">${name}</span>${pad} = <span class="hex">0x${value.toString(16).toUpperCase()}</span>;
0271 `;
0272 });
0273
0274 code += `
0275 <span class="comment">// ============================================================</span>
0276 <span class="comment">// MEDIUM COLORS (Moderate Saturation) - Sorted by Hue</span>
0277 <span class="comment">// ============================================================</span>
0278 `;
0279 mediumSorted.forEach(([name, value]) => {
0280 const pad = ' '.repeat(Math.max(0, 18 - name.length));
0281 code += `<span class="const">const</span> <span class="name">${name}</span>${pad} = <span class="hex">0x${value.toString(16).toUpperCase()}</span>;
0282 `;
0283 });
0284
0285 code += `
0286 <span class="comment">// ============================================================</span>
0287 <span class="comment">// WARM COLORS (Saturated/Heavy) - Sorted by Hue</span>
0288 <span class="comment">// ============================================================</span>
0289 `;
0290 warmSorted.forEach(([name, value]) => {
0291 const pad = ' '.repeat(Math.max(0, 18 - name.length));
0292 code += `<span class="const">const</span> <span class="name">${name}</span>${pad} = <span class="hex">0x${value.toString(16).toUpperCase()}</span>;
0293 `;
0294 });
0295
0296 code += `
0297 <span class="comment">// ============================================================</span>
0298 <span class="comment">// METALLIC COLORS - Sorted by Hue</span>
0299 <span class="comment">// ============================================================</span>
0300 `;
0301 metallicSorted.forEach(([name, value]) => {
0302 const pad = ' '.repeat(Math.max(0, 18 - name.length));
0303 code += `<span class="const">const</span> <span class="name">${name}</span>${pad} = <span class="hex">0x${value.toString(16).toUpperCase()}</span>;
0304 `;
0305 });
0306
0307 document.getElementById('code').innerHTML = code;
0308 }
0309
0310 // Render everything
0311 generateCode();
0312 renderPalette('cool-palette', COOL_COLORS);
0313 renderPalette('medium-palette', MEDIUM_COLORS);
0314 renderPalette('warm-palette', WARM_COLORS);
0315 renderPalette('metallic-palette', METALLIC_COLORS);
0316 renderPalette('all-palette', ALL_COLORS);
0317 </script>
0318 </body>
0319 </html>
