If this tool helped you, you can buy us a coffee ☕
生成网站配色方案,输出颜色代码与搭配建议。
Supports hexadecimal color codes, e.g., #2563eb or #36f. You can also select a color directly using the color picker on the left.
Pairs the base color with its opposite on the color wheel. Creates strong contrast and visual impact, ideal for highlighting buttons and accent elements.
:root {
--color-primary: #2463eb;
--color-secondary: #ebac24;
--color-background: #c1d0f1;
--color-accent: #c98f13;
--color-text: #272b35;
}primary: #2463eb
secondary: #ebac24
background: #c1d0f1
accent: #c98f13
text: #272b35This is an example paragraph to demonstrate the overall appearance of body text, background, and buttons with the current color scheme.
Card content to show how secondary, background, and text colors appear in a small module.
网页设计师和前端开发者在构建界面时,常常需要快速确定一组和谐的色彩搭配,手动调试既耗时又容易出错。本工具基于色轮理论,可根据您选择的主色自动生成互补色、类似色、三色组合等专业配色方案,并直接输出对应的 HEX 和 RGB 颜色代码,帮助您高效构建统一的网页色彩体系。
#3498db。示例:输入主色 #3498db,选择“互补色”规则,输出方案中将包含 #3498db 及其互补色 #db9b34,同时显示各自的 RGB 值如 rgb(52, 152, 219) 和 rgb(219, 155, 52)。
输入的主色必须使用六位十六进制格式(如 #FF5733),不接受三位简写或颜色名称;生成的配色方案仅供设计参考,实际显示效果可能因屏幕和浏览器渲染存在轻微差异;本工具为纯前端计算,不会上传或存储任何颜色数据,确保您的配色灵感不会泄露。
网页配色的可访问性不仅取决于美观,还涉及文字与背景的对比度。强烈建议在获得心仪的配色方案后,使用对比度检查工具验证前景色与背景色的 WCAG 2.1 对比度等级,确保内容对所有用户(包括视觉障碍人士)都清晰可读。通常正文文字与背景的对比度应至少达到 4.5:1。