feat(tools): 新增在线取色器与颜色转换器工具

添加支持 HEX、RGB 和 HSL 格式转换的在线取色器工具，包含中英文文档及交互式前端实现。同时更新网站副标题文案，将“博客与文档”和“blog and docs”统一调整为“博客网站”和“blog website”。

Author: CodeGlimpse

assets/js/tools/color.js

@@ -0,0 +1,296 @@
+(function() {
+    const container = document.getElementById('tool-color');
+    if (!container) return;
+
+    const lang = container.getAttribute('data-lang') || 'zh-cn';
+    
+    const i18n = {
+        'zh-cn': {
+            labelPreview: '颜色预览',
+            labelPicker: '颜色选择器',
+            labelHex: 'HEX 十六进制',
+            labelRgb: 'RGB (红, 绿, 蓝)',
+            labelHsl: 'HSL (色相, 饱和度, 亮度)',
+            placeholderHex: '#000000',
+            copyBtn: '复制',
+            copied: '已复制'
+        },
+        'en': {
+            labelPreview: 'Color Preview',
+            labelPicker: 'Color Picker',
+            labelHex: 'HEX',
+            labelRgb: 'RGB (Red, Green, Blue)',
+            labelHsl: 'HSL (Hue, Saturation, Lightness)',
+            placeholderHex: '#000000',
+            copyBtn: 'Copy',
+            copied: 'Copied'
+        }
+    };
+
+    const t = i18n[lang] || i18n['en'];
+
+    container.innerHTML = `
+        <style>
+            #tool-color .tool-container { max-width: 100%; }
+            #tool-color .color-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-top: 1.5rem; }
+            @media (max-width: 768px) { #tool-color .color-grid { grid-template-columns: 1fr; } }
+            #tool-color .preview-card { 
+                background: var(--card-background); 
+                border: 1px solid var(--border-color); 
+                border-radius: 12px; 
+                padding: 1.5rem;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 1rem;
+            }
+            #tool-color .color-preview {
+                width: 100%;
+                height: 150px;
+                border-radius: 8px;
+                border: 1px solid var(--border-color);
+                box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+            }
+            #tool-color .input-group { margin-bottom: 1.5rem; }
+            #tool-color label { font-weight: bold; font-size: 1.4rem; color: var(--card-text-color-main); display: block; margin-bottom: 0.5rem; }
+            #tool-color input[type="text"], #tool-color input[type="number"] {
+                width: 100%;
+                padding: 1rem;
+                border: 1px solid var(--border-color);
+                border-radius: 6px;
+                background: var(--body-background);
+                color: var(--card-text-color-main);
+                font-family: 'Fira Code', monospace;
+                font-size: 1.4rem;
+                outline: none;
+                transition: border-color 0.2s;
+            }
+            #tool-color input:focus { border-color: var(--accent-color); }
+            #tool-color .rgb-inputs, #tool-color .hsl-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; }
+            #tool-color input[type="color"] {
+                width: 100%;
+                height: 50px;
+                padding: 0;
+                border: none;
+                border-radius: 6px;
+                cursor: pointer;
+                background: none;
+            }
+            #tool-color .copy-wrapper { position: relative; display: flex; gap: 0.5rem; }
+            #tool-color .btn-copy {
+                padding: 0.4rem 1rem;
+                font-size: 1.2rem;
+                background: var(--accent-color);
+                color: #fff;
+                border-radius: 4px;
+                border: none;
+                cursor: pointer;
+                white-space: nowrap;
+            }
+        </style>
+        <div class="tool-container">
+            <div class="color-grid">
+                <div class="preview-card">
+                    <div class="input-group" style="width: 100%;">
+                        <label>${t.labelPreview}</label>
+                        <div id="color-preview" class="color-preview" style="background-color: #3b82f6;"></div>
+                    </div>
+                    <div class="input-group" style="width: 100%;">
+                        <label>${t.labelPicker}</label>
+                        <input type="color" id="color-picker" value="#3b82f6">
+                    </div>
+                </div>
+                <div class="inputs-card">
+                    <div class="input-group">
+                        <label>${t.labelHex}</label>
+                        <div class="copy-wrapper">
+                            <input type="text" id="hex-input" value="#3b82f6" placeholder="${t.placeholderHex}">
+                            <button class="btn-copy" data-target="hex-input">${t.copyBtn}</button>
+                        </div>
+                    </div>
+                    <div class="input-group">
+                        <label>${t.labelRgb}</label>
+                        <div class="rgb-inputs">
+                            <input type="number" id="rgb-r" min="0" max="255" value="59">
+                            <input type="number" id="rgb-g" min="0" max="255" value="130">
+                            <input type="number" id="rgb-b" min="0" max="255" value="246">
+                        </div>
+                        <div class="copy-wrapper" style="margin-top: 0.5rem;">
+                            <input type="text" id="rgb-string" readonly value="rgb(59, 130, 246)">
+                            <button class="btn-copy" data-target="rgb-string">${t.copyBtn}</button>
+                        </div>
+                    </div>
+                    <div class="input-group">
+                        <label>${t.labelHsl}</label>
+                        <div class="hsl-inputs">
+                            <input type="number" id="hsl-h" min="0" max="360" value="217">
+                            <input type="number" id="hsl-s" min="0" max="100" value="91">
+                            <input type="number" id="hsl-l" min="0" max="100" value="60">
+                        </div>
+                        <div class="copy-wrapper" style="margin-top: 0.5rem;">
+                            <input type="text" id="hsl-string" readonly value="hsl(217, 91%, 60%)">
+                            <button class="btn-copy" data-target="hsl-string">${t.copyBtn}</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    const picker = document.getElementById('color-picker');
+    const preview = document.getElementById('color-preview');
+    const hexInput = document.getElementById('hex-input');
+    const rgbR = document.getElementById('rgb-r');
+    const rgbG = document.getElementById('rgb-g');
+    const rgbB = document.getElementById('rgb-b');
+    const rgbString = document.getElementById('rgb-string');
+    const hslH = document.getElementById('hsl-h');
+    const hslS = document.getElementById('hsl-s');
+    const hslL = document.getElementById('hsl-l');
+    const hslString = document.getElementById('hsl-string');
+
+    // Helper: Hex to RGB
+    function hexToRgb(hex) {
+        hex = hex.replace(/^#/, '');
+        if (hex.length === 3) {
+            hex = hex.split('').map(c => c + c).join('');
+        }
+        const bigint = parseInt(hex, 16);
+        return {
+            r: (bigint >> 16) & 255,
+            g: (bigint >> 8) & 255,
+            b: bigint & 255
+        };
+    }
+
+    // Helper: RGB to Hex
+    function rgbToHex(r, g, b) {
+        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+    }
+
+    // Helper: RGB to HSL
+    function 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); break;
+                case g: h = (b - r) / d + 2; break;
+                case b: h = (r - g) / d + 4; break;
+            }
+            h /= 6;
+        }
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            l: Math.round(l * 100)
+        };
+    }
+
+    // Helper: HSL to RGB
+    function hslToRgb(h, s, l) {
+        h /= 360; s /= 100; l /= 100;
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l;
+        } else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0) t += 1;
+                if (t > 1) t -= 1;
+                if (t < 1/6) return p + (q - p) * 6 * t;
+                if (t < 1/2) return q;
+                if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1/3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1/3);
+        }
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        };
+    }
+
+    function updateUI(hex, r, g, b, h, s, l) {
+        preview.style.backgroundColor = hex;
+        picker.value = hex;
+        hexInput.value = hex;
+        rgbR.value = r;
+        rgbG.value = g;
+        rgbB.value = b;
+        rgbString.value = `rgb(${r}, ${g}, ${b})`;
+        hslH.value = h;
+        hslS.value = s;
+        hslL.value = l;
+        hslString.value = `hsl(${h}, ${s}%, ${l}%)`;
+    }
+
+    picker.addEventListener('input', (e) => {
+        const hex = e.target.value.toUpperCase();
+        const rgb = hexToRgb(hex);
+        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+        updateUI(hex, rgb.r, rgb.g, rgb.b, hsl.h, hsl.s, hsl.l);
+    });
+
+    hexInput.addEventListener('input', (e) => {
+        let hex = e.target.value;
+        if (/^#?[0-9A-F]{6}$/i.test(hex)) {
+            if (!hex.startsWith('#')) hex = '#' + hex;
+            hex = hex.toUpperCase();
+            const rgb = hexToRgb(hex);
+            const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+            updateUI(hex, rgb.r, rgb.g, rgb.b, hsl.h, hsl.s, hsl.l);
+        }
+    });
+
+    [rgbR, rgbG, rgbB].forEach(el => {
+        el.addEventListener('input', () => {
+            let r = parseInt(rgbR.value) || 0;
+            let g = parseInt(rgbG.value) || 0;
+            let b = parseInt(rgbB.value) || 0;
+            r = Math.min(255, Math.max(0, r));
+            g = Math.min(255, Math.max(0, g));
+            b = Math.min(255, Math.max(0, b));
+            const hex = rgbToHex(r, g, b);
+            const hsl = rgbToHsl(r, g, b);
+            updateUI(hex, r, g, b, hsl.h, hsl.s, hsl.l);
+        });
+    });
+
+    [hslH, hslS, hslL].forEach(el => {
+        el.addEventListener('input', () => {
+            let h = parseInt(hslH.value) || 0;
+            let s = parseInt(hslS.value) || 0;
+            let l = parseInt(hslL.value) || 0;
+            h = Math.min(360, Math.max(0, h));
+            s = Math.min(100, Math.max(0, s));
+            l = Math.min(100, Math.max(0, l));
+            const rgb = hslToRgb(h, s, l);
+            const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+            updateUI(hex, rgb.r, rgb.g, rgb.b, h, s, l);
+        });
+    });
+
+    // Copy buttons logic
+    container.querySelectorAll('.btn-copy').forEach(btn => {
+        btn.onclick = () => {
+            const targetId = btn.getAttribute('data-target');
+            const input = document.getElementById(targetId);
+            input.select();
+            document.execCommand('copy');
+            
+            const originalText = btn.innerText;
+            btn.innerText = t.copied;
+            setTimeout(() => { btn.innerText = originalText; }, 2000);
+        };
+    });
+})();

config/_default/languages.toml

@@ -6,7 +6,7 @@ title = "Fernweh的个人博客"
 contentDir = "content/zh-cn"
 weight = 1
     [zh-cn.params.sidebar]
-        subtitle = "我的数字花园 🌱 - 基于 GitHub Pages 搭建的博客与文档。欢迎分享想法！"
+        subtitle = "我的数字花园 🌱 - 基于 GitHub Pages 搭建的博客网站。欢迎分享想法！"
 
 [en]
 languageName = "English"
@@ -15,4 +15,4 @@ title = "Personal Blogs for Fernweh"
 contentDir = "content/en"
 weight = 2
     [en.params.sidebar]
-        subtitle = "My digital garden 🌱 - A blog and docs built with GitHub Pages. Thoughts welcome!"
+        subtitle = "My digital garden 🌱 - A blog website built with GitHub Pages. Thoughts welcome!"

content/en/tools/color/index.md

@@ -0,0 +1,21 @@
+---
+title: "Color Picker & Converter"
+description: "Online color picker and converter for HEX, RGB, and HSL formats."
+date: 2026-03-17
+layout: "page"
+---
+
+A simple and intuitive tool to pick colors and convert them between HEX, RGB, and HSL formats.
+
+{{< tool id="color" >}}
+
+### How to use
+- **Pick a Color**: Use the color picker or click the preview box to choose a color visually.
+- **HEX Input**: Enter a 6-digit hex code (e.g., `#FF5733`) to see its RGB and HSL equivalents.
+- **RGB/HSL Inputs**: Adjust the individual values to fine-tune your color.
+- **Copy**: Click the **Copy** button next to any format to copy it to your clipboard.
+
+### Understanding Color Formats
+- **HEX**: A hexadecimal representation of RGB values, commonly used in web design.
+- **RGB**: Red, Green, and Blue values (0-255).
+- **HSL**: Hue (0-360), Saturation (0-100%), and Lightness (0-100%). It's often more intuitive for humans to understand than RGB.

content/zh-cn/tools/color/index.md

@@ -0,0 +1,21 @@
+---
+title: "取色器与颜色转换器"
+description: "在线取色器，支持 HEX、RGB 和 HSL 格式之间的转换。"
+date: 2026-03-17
+layout: "page"
+---
+
+一个简单直观的工具，用于选取颜色并在 HEX、RGB 和 HSL 格式之间进行转换。
+
+{{< tool id="color" >}}
+
+### 如何使用
+- **选取颜色**: 使用颜色选择器或点击预览框来直观地选择颜色。
+- **HEX 输入**: 输入 6 位十六进制代码（例如 `#FF5733`）以查看其对应的 RGB 和 HSL 值。
+- **RGB/HSL 输入**: 调整各个数值以微调颜色。
+- **复制**: 点击任何格式旁边的 **复制** 按钮将其复制到剪贴板。
+
+### 了解颜色格式
+- **HEX**: RGB 值的十六进制表示，常用于网页设计。
+- **RGB**: 红、绿、蓝数值 (0-255)。
+- **HSL**: 色相 (0-360)、饱和度 (0-100%) 和 亮度 (0-100%)。对于人类来说，它通常比 RGB 更直观。