🎯 交互式色轮
当前颜色
#FF5733
rgb(255,87,51)
hsl(11,100%,60%)
🎨 配色方案
色轮上相对的两个颜色，对比强烈。
色轮上均匀分布的三个颜色，丰富平衡。
一个颜色与其互补色两侧相邻的颜色。
色轮上相邻的颜色，过渡自然和谐。
同一色相通过明度和饱和度变化。
色轮上相隔60度的两个颜色。
色轮上相对的两个颜色，对比强烈。
色轮上均匀分布的三个颜色，丰富平衡。
一个颜色与其互补色两侧相邻的颜色。
色轮上相邻的颜色，过渡自然和谐。
同一色相通过明度和饱和度变化。
色轮上相隔60度的两个颜色。
这是一段示例文本，展示当前配色方案在实际UI中的效果。
这是一段示例文本，展示当前配色方案在实际UI中的效果。
色彩理论是设计领域的核心知识体系，它帮助我们理解颜色之间的关系，以及如何运用这些关系创建出既美观又有效的视觉设计。色轮作为色彩理论的可视化工具，将颜色按照色相关系排列成环形，让我们能够直观地看到不同颜色之间的关联。
在传统的色彩理论中，红、黄、蓝被称为三原色，它们是所有其他颜色的基础。通过混合这些原色，可以得到三间色（橙、绿、紫），再继续混合则得到更多的中间色。现代数字设计通常使用RGB（红绿蓝）色彩模型，而印刷领域则使用CMYK（青色、品红、黄色、黑色）模型。
本工具使用的色轮基于HSV（Hue色相、Saturation饱和度、Value明度）色彩空间。色相（Hue）表示颜色的种类，如红、橙、黄等；饱和度（Saturation）表示颜色的纯度，越高越鲜艳；明度（Value）表示颜色的明暗程度。通过调整这三个参数，可以精确描述任何颜色。
互补色：色轮上相对的两个颜色，形成强烈对比。适合需要突出重点、制造视觉冲击力的设计，如警示标识、促销海报等。
三角色：色轮上均匀分布的三个颜色，色彩丰富且平衡。适合需要多色彩但不想过于杂乱的设计，如儿童产品、创意品牌等。
分裂互补色：一个颜色与其互补色两侧相邻的颜色组合。既有对比又比纯互补色更柔和，适合大多数网页和App设计。
类比色：色轮上相邻的颜色，过渡自然和谐。适合营造统一、舒适的视觉氛围，如自然风景、文艺风格设计。
单色：同一色相通过明度和饱和度变化。简洁统一，适合专业、极简风格的设计，如企业官网、SaaS产品等。
双色：色轮上相隔60度的两个颜色。对比适中，适合需要一定层次感的设计。
本在线色轮配色工具操作简单直观，以下是详细的使用指南：
选择基色：在左侧的交互式色轮上点击或拖动鼠标，选择你想要的基色。色轮外圈显示色相，中心显示饱和度变化。选中后，右侧会实时显示当前颜色的HEX、RGB和HSL值。点击任意颜色值即可复制到剪贴板。
查看配色方案：选择基色后，切换到不同的配色方案标签页（互补色、三角色、类比色等），即可看到基于当前基色自动生成的配色组合。每种配色方案都包含2-5个颜色，点击任意颜色即可复制其色值。
预览配色效果：下方的配色预览区域会实时展示当前配色方案在UI组件中的实际效果，包括卡片背景、标题文字、正文和按钮等。这帮助你直观地评估配色方案在实际界面中的视觉效果。
导出配色方案：选择导出格式（CSS变量、JSON、SCSS或Tailwind），点击"生成代码"即可得到可以直接复制到项目中的配色代码。支持一键复制，方便快速应用到你的设计项目中。
色轮配色工具在多个领域都有广泛的应用价值：
网页与UI设计：在进行网页或App界面设计时，使用色轮工具可以快速找到和谐的配色方案。通过预览功能，设计师可以立即看到颜色在实际UI组件中的效果，大大提高设计效率。60-30-10法则可以帮助设计师合理分配主色、辅色和强调色的使用比例。
品牌视觉设计：品牌设计师需要为品牌创建一套完整的色彩体系。通过色轮工具，可以快速生成品牌主色、辅助色和点缀色的配色方案，确保品牌视觉的一致性和专业性。导出功能可以直接生成CSS变量或设计令牌，方便前端开发使用。
插画与平面设计：插画师和平面设计师在创作时，常常需要快速尝试不同的配色方案。色轮工具提供的6种经典配色模式可以帮助设计师快速找到灵感，避免配色失误。类比色方案特别适合自然风景插画，而互补色则适合需要视觉冲击力的海报设计。
数据可视化：在制作图表和数据可视化作品时，需要选择一组既能区分不同数据系列、又整体协调的颜色。三角色或类比色配色方案通常比较适合数据可视化场景，可以确保每种数据都有清晰可辨的颜色，同时整体色调保持和谐。
色轮是将颜色按照色相排列成圆环的可视化工具，由红、黄、蓝三原色及其衍生色组成。它是色彩理论的核心工具，用于理解和创建和谐的配色方案。色轮上相邻的颜色形成类似色关系，相对的颜色形成互补色关系。
互补色是色轮上相对位置（相隔180度）的两种颜色。它们在一起使用时能产生强烈的视觉对比和冲击力。常见的互补色组合有红与绿、蓝与橙、黄与紫等。互补色配色适合需要突出重点的设计场景。
三角色（Triadic）配色是选择色轮上均匀分布的三个颜色（相隔120度）。这种配色方案色彩丰富且平衡，既有对比又不会过于刺眼。常见的三角色组合有红-黄-蓝（三原色）和橙-绿-紫（三间色）。
类比色（Analogous）配色是选择色轮上相邻的颜色（通常相隔30度以内）。这种配色方案色彩过渡自然，给人和谐统一的感觉，适合营造温暖、舒适的氛围。常用于自然风景、渐变设计等场景。
单色（Monochromatic）配色是选择单一色相，通过调整明度和饱和度来创建配色方案。这种方案简洁统一，适合需要专业感和极简风格的设计。通过深浅变化，可以营造出丰富的层次感。
在网页设计中使用配色方案时，建议遵循60-30-10法则：主色占60%（背景、大面积区域），辅色占30%（按钮、卡片），强调色占10%（高亮、图标）。同时注意确保文字与背景有足够的对比度（WCAG建议至少4.5:1），以保证可读性。
本工具支持HEX（十六进制，如#FF5733）、RGB（如rgb(255,87,51)）和HSL（如hsl(11,100%,60%)）三种常用颜色格式。点击任意颜色即可复制对应格式的颜色代码。
不会。本工具纯前端运行，所有颜色计算和渲染都在浏览器本地完成，不会上传任何数据到服务器。您可以放心使用，无需担心隐私问题。