Color Palette Generator
Pick a base color and instantly generate harmonious color schemes for design.
📖 보색·삼색·분할보색, 각도로 배우는 색상 조화 이론 가이드 보기
How to Use the Color Palette Generator
Pick a base color and instantly generate harmonious color schemes — complementary, triadic, analogous, split-complementary, and monochromatic. Click any swatch to copy its HEX code to the clipboard.
What is a color palette for?
Color palettes are essential in UI/UX design, brand identity, web development, and graphic design. A well-chosen palette ensures visual harmony and sufficient contrast ratios for accessibility and readability.
What is color harmony theory?
Complementary: colors opposite on the wheel (180°) — high contrast. Triadic: three colors 120° apart — balanced and colorful. Analogous: adjacent colors — harmonious and natural. Monochromatic: tints and shades of one hue — elegant and cohesive.
How should I choose colors for UI/UX?
WCAG accessibility guidelines recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against the background. Use the Contrast Preview section in this tool to check readability of your chosen color on white and dark backgrounds.
What is the difference between complementary and split-complementary?
Complementary uses the exact opposite color (180°). Split-complementary uses the two colors adjacent to the complement (at 150° and 210°), giving a softer, more versatile combination while retaining contrast.
How do I copy a HEX color code?
Click any color swatch in the palette — the HEX code is automatically copied to your clipboard. A toast notification at the bottom confirms the copy.
What is the difference between complementary and triadic colors?
Complementary colors sit directly opposite each other on the color wheel (180 degrees apart), creating strong contrast. Triadic colors are three hues spaced evenly at 120-degree intervals, producing a balanced and vibrant palette. Complementary schemes are more dramatic; triadic schemes feel lively but harmonious.
How do I create a color palette that is accessible to color-blind users?
Red-green color blindness (deuteranopia) is the most common type. Avoid conveying information through red-green contrast alone. Blue-orange pairings are generally accessible. Use tools like Coblis or Chromatic Vision Simulator to preview palettes under various color-blindness simulations.
How should primary, secondary, and accent colors be divided in UI design?
Primary color: the main brand color used for buttons, links, and key UI elements. Secondary color: complements the primary and is used for backgrounds or section dividers. Accent color: used sparingly on CTAs and notifications to draw attention to critical elements.