SUPER EASY UTILS

使用方法

  1. 1

    选择配色方案

    选择相似色、互补色等配色规则，定义颜色之间的关系。

  2. 2

    选择风格

    通过风格选择器设置氛围，从柔和、鲜艳或暗色中选择最适合品牌的风格。

  3. 3

    生成

    点击生成按钮创建独特调色板。锁定喜欢的颜色，重新生成其余颜色。

  4. 4

    导出

    复制单个Hex色码，或点击导出获取完整的Tailwind CSS配置。

色彩理论指南

理解配色和谐

  • 相似色

    色轮上相邻的颜色。营造宁静舒适的设计，适合自然或平静的主题。

  • 互补色

    色轮上相对的颜色。产生高对比和强烈视觉冲击，适合行动号召。

  • 三色配色

    色轮上均匀分布的三种颜色。保持和谐的同时提供高对比度。

  • 分裂互补

    互补配色的变体。使用基础色及其互补色两侧的颜色。

  • 单色

    单一颜色的明度和饱和度变化。简洁优雅、舒缓平静。

  • 随机混搭

    完全随机的颜色，无固定规则。适合激发意想不到的灵感。

探索风格情调

  • 标准

    平衡的饱和度和亮度。适合通用网页设计和UI组件。

  • 柔和梦幻

    高亮度低饱和度。柔和舒缓，适合生活方式或春季主题。

  • 霓虹鲜艳

    高饱和度中等亮度。充满活力、引人注目，适合科技或运动品牌。

  • 暗色模式

    低亮度去饱和色调。深邃神秘，现代感十足，减少OLED屏幕耗电。

  • 复古怀旧

    低饱和度略带暖色调。怀旧经典，适合手工艺或咖啡店品牌。

Choosing Colors That Work Together

Overview

Color choice can make or break a design. Random color combinations look chaotic; deliberate palettes built on color theory feel intentional and professional. This tool generates harmonious palettes from a single base color using established color theory relationships: complementary (opposite on the color wheel), analogous (adjacent), triadic (three evenly spaced), and tetradic (four). It also extracts palettes from uploaded images and shows hex/RGB/HSL values for direct use in CSS or design files.

How It Works

Color theory expressed mathematically: a color in HSL has hue (0–360°), saturation, and lightness. Complementary = base hue + 180°. Triadic = base + 120° and base + 240°. Analogous = base ± 30°. The tool computes these mathematically, then displays the resulting palette with copy-to-clipboard for each color. Image-based palettes use color quantization (k-means clustering) to find the most dominant colors in the uploaded image.

When to Use This

Designing UI for a website or app (primary, secondary, accent colors). Picking colors for a brand identity. Coordinating slide deck visuals. Choosing paint colors for a room (start from one wall, find complementary trim). Creating data visualization color schemes (categorical or sequential). Generating themes for graphics — Instagram posts, YouTube thumbnails, blog headers.

Frequently Asked Questions

What's the difference between complementary and analogous?

Complementary colors are opposite on the color wheel (blue + orange) — high contrast, visually striking. Analogous colors are next to each other (blue + blue-green + green) — calmer, more cohesive. Use complementary for accents, analogous for backgrounds.

How many colors should a design use?

60-30-10 rule: 60% dominant (background), 30% secondary, 10% accent. Most professional designs use 3–5 colors total. More than 5 starts to feel chaotic unless you're explicitly going for a vibrant playful look.

What's the WCAG contrast requirement?

For accessibility, text must have at least 4.5:1 contrast against its background (3:1 for large text). Black on white is 21:1. Dark gray on light gray often fails — check with a contrast tool before shipping.

推荐工具

精心挑选的实用工具