专业取色器

专业取色器——HEX、RGB、HSL 转换及更多功能

选择颜色、转换格式并创建和谐调色板

理解 HEX、RGB、HSL 和 RGBA 颜色格式

我们的取色器支持所有常见颜色格式，并可实时转换：

• HEX：十六进制表示（例如 #3B82F6）——网页设计中的标准 Hexadecimal representation (e.g. #3B82F6) – standard in web designHEX:HEX: Hexadecimal representation (e.g. #3B82F6) – standard in web design Hexadecimal representation (e.g. #3B82F6) – standard in web design Hexadezimale Darstellung (z.B. #3B82F6) – Standard im Webdesign
• RGB：0-255 的红、绿、蓝值（例如 rgb(59, 130, 246)） Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246))RGB:RGB: Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246)) Red, green, blue values from 0-255 (e.g. rgb(59, 130, 246)) Rot, Grün, Blau Werte von 0-255 (z.B. rgb(59, 130, 246))
• RGBA：带有透明 Alpha 通道的 RGB（例如 rgba(59, 130, 246, 0.8)） RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8))RGBA:RGBA: RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8)) RGB with alpha channel for transparency (e.g. rgba(59, 130, 246, 0.8)) RGB mit Alpha-Kanal für Transparenz (z.B. rgba(59, 130, 246, 0.8))
• HSL：色相、饱和度、亮度——对设计师很直观 Hue, saturation, lightness – intuitive for designersHSL： Hue, saturation, lightness – intuitive for designers Farbton, Sättigung, Helligkeit – intuitiv für Designer
• HSLA：带透明 Alpha 通道的 HSL HSL with alpha channel for transparencyHSLA： HSL with alpha channel for transparency HSL mit Alpha-Kanal für Transparenz

无障碍颜色对比度，支持 WCAG 检查

我们的取色器支持所有常见颜色格式，并可实时转换：

• AA 标准：普通文本的对比度至少为 4.5:1 Contrast ratio of at least 4.5:1 for normal textAA 标准： Contrast ratio of at least 4.5:1 for normal text Kontrastverhältnis von mindestens 4.5:1 für normalen Text
• AA 标准（大号）：大号文本（18px 起）的对比度至少为 3:1 Contrast ratio of at least 3:1 for large text (from 18px)AA 标准（大号）： Contrast ratio of at least 3:1 for large text (from 18px) Kontrastverhältnis von mindestens 3:1 für großen Text (ab 18px)
• AAA 标准：增强要求的对比度至少为 7:1 Contrast ratio of at least 7:1 for enhanced requirementsAAA 标准： Contrast ratio of at least 7:1 for enhanced requirements Kontrastverhältnis von mindestens 7:1 für erhöhte Anforderungen

我们的工具会立即显示您的颜色组合是否符合 AA 或 AAA 标准，并帮助您创建包容、无障碍的设计。

打造完美设计的色彩和谐

我们的工具会立即显示您的颜色组合是否符合 AA 或 AAA 标准，并帮助您创建包容、无障碍的设计。

• 互补色：色轮上彼此相对的颜色——高对比度 Colors opposite each other on the color wheel – high contrast互补色： Colors opposite each other on the color wheel – high contrast Farben gegenüberliegen im Farbkreis – hoher Kontrast
• 类似色：相邻的颜色——和谐宁静的调色板 Adjacent colors – harmonious and calming palettes类似色： Adjacent colors – harmonious and calming palettes Benachbarte Farben – harmonische und beruhigende Paletten
• 三色组：间隔均匀三种颜色——活泼且平衡 Three colors equally spaced – vibrant and balanced三色组： Three colors equally spaced – vibrant and balanced Drei Farben mit gleichem Abstand – lebendig und ausgewogen
• 单色：同一种颜色的不同深浅——优雅且简约 Different lightness levels of one color – elegant and minimalist单色： Different lightness levels of one color – elegant and minimalist Verschiedene Helligkeitsstufen einer Farbe – elegant und minimalistisch

明暗色调——颜色渐变

直接将您的颜色导出为常见格式：

吸管取色和颜色历史记录

这样可以直接从您的屏幕上取色。它会在浏览器本地保存最近选择的 10 种颜色，方便您快速访问以前用过的颜色。

为开发者提供的导出选项

直接将您的颜色导出为常见格式：

• CSS 变量： :root { --primary-color: #3b82f6; } :root { --primary-color: #3b82f6; }CSS variables:CSS variables: :root { --primary-color: #3b82f6; } :root { --primary-color: #3b82f6; } :root { --primary-color: #3b82f6; }
• Tailwind 配置：可直接复制的 Tailwind CSS 配置 Directly copyable configuration for Tailwind CSSTailwind 配置： Directly copyable configuration for Tailwind CSS Direkt kopierbare Konfiguration für Tailwind CSS