Color Palette Generator
Generate harmonious color palettes using complementary, analogous, triadic, and split schemes. Enter values for instant results with step-by-step formulas.
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer
Color Palette Generator
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: Complementary = Base Hue + 180 deg | Triadic = Base Hue +/- 120 deg | Analogous = Base Hue +/- 30 deg
Worked example โ Base: #3B82F6 (Blue) | Complement: #F6A93B (Orange) | High contrast pairing
Formula
Complementary = Base Hue + 180 deg | Triadic = Base Hue +/- 120 deg | Analogous = Base Hue +/- 30 deg
Color harmonies are based on geometric relationships on the color wheel. The hue component of HSL (0-360 degrees) determines the base position, and scheme angles define the positions of additional colors. Saturation and lightness are maintained to keep colors visually balanced.
Worked Examples
Example 1: Brand Color Complementary Palette
Problem:Generate a complementary color scheme from the base color #3B82F6 (blue).
Solution:Base color: #3B82F6 (HSL: 217, 91%, 60%) Complement: Hue + 180 = 397 mod 360 = 37 degrees Complement HSL: (37, 91%, 60%) Complement hex: #F6A93B (orange) Contrast ratio with white: 3.53:1 Contrast ratio with black: 5.96:1 Best text color on base: White
Result:Base: #3B82F6 (Blue) | Complement: #F6A93B (Orange) | High contrast pairing
Example 2: Analogous Scheme for Website
Problem:Create an analogous palette from #10B981 (green) for a nature-themed website.
Solution:Base color: #10B981 (HSL: 160, 84%, 39%) Analogous -30: Hue 130 = #10B94D (yellow-green) Analogous +30: Hue 190 = #10A5B9 (teal) All three share warm-cool boundary Use green as dominant (60%), teal as secondary (30%), yellow-green as accent (10%)
Result:Palette: #10B94D, #10B981, #10A5B9 | Harmonious nature tones
Frequently Asked Questions
What is a color palette and why is it important in design?
A color palette is a curated set of colors that work harmoniously together, serving as the visual foundation for any design project. A well-chosen palette creates visual cohesion, establishes brand identity, guides user attention, and evokes specific emotions. Most design projects use 3-7 colors: a primary brand color, secondary accent colors, and neutral tones for text and backgrounds. Color palettes are essential because they ensure consistency across all design assets including websites, apps, print materials, and marketing content. Without a deliberate palette, designs can feel chaotic and unprofessional, making color selection one of the most impactful design decisions.
How does the complementary color scheme work?
A complementary color scheme uses two colors positioned directly opposite each other on the color wheel, separated by 180 degrees. For example, blue and orange, red and green, or yellow and purple are complementary pairs. This scheme creates maximum visual contrast and vibrant energy, making it effective for call-to-action elements, sports branding, and attention-grabbing designs. The high contrast can be overwhelming if both colors are used equally, so the standard approach is to use one color dominantly (about 70-80% of the design) and the complement as an accent (20-30%). Complementary colors placed side by side make each other appear more vivid due to simultaneous contrast, a phenomenon well-studied in color theory.
What is an analogous color scheme and when should I use it?
An analogous color scheme uses 2-4 colors that sit next to each other on the color wheel, typically spanning 30-60 degrees. Examples include blue, blue-green, and green, or red, red-orange, and orange. This scheme creates harmonious, serene designs because the colors share common hue components and naturally blend together. Analogous palettes are ideal for nature-themed designs, backgrounds, gradients, and projects requiring a calm aesthetic. The main challenge is maintaining sufficient contrast between elements, so combine analogous colors with neutral tones for text and interactive elements. Use one color as dominant, a second as supporting, and the third as an accent to create visual hierarchy within the analogous range.
How do I choose between triadic and split-complementary schemes?
Triadic schemes use three colors equally spaced at 120-degree intervals on the color wheel (like red, blue, and yellow), creating vibrant, balanced palettes with strong visual contrast. Split-complementary schemes use one base color plus the two colors adjacent to its complement (for example, blue with red-orange and yellow-orange), offering similar contrast to complementary schemes but with more nuance. Choose triadic when you want bold, energetic designs with three equally prominent colors, such as children's products or entertainment brands. Choose split-complementary when you need contrast but with a softer, more sophisticated feel, such as for editorial design or corporate branding. Split-complementary is generally easier to balance successfully.
What is the 60-30-10 rule in color design?
The 60-30-10 rule is a classic interior design and graphic design guideline for distributing colors within a composition. The dominant color occupies 60% of the space (typically backgrounds and large areas), the secondary color fills 30% (headings, sidebars, and supporting elements), and the accent color covers 10% (calls to action, highlights, and small details). This ratio creates visual balance and prevents any single color from overwhelming the design. In web design, the 60% might be your background and body area, 30% could be your navigation and secondary panels, and 10% would be buttons and links. You can apply this rule regardless of which color scheme type you choose.
How does color contrast affect accessibility and WCAG compliance?
WCAG (Web Content Accessibility Guidelines) specifies minimum contrast ratios between text and background colors. Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Contrast ratio is calculated using the relative luminance of both colors: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. Light text on dark backgrounds and dark text on light backgrounds both work, but medium-lightness colors on medium backgrounds often fail contrast requirements. Color Palette Generator checks contrast ratios automatically. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, making contrast even more critical than color choice alone.
What is the difference between HSL and HSV color models?
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are both cylindrical representations of color, but they define saturation and brightness differently. In HSL, lightness ranges from 0% (black) through 50% (pure color) to 100% (white), and saturation controls the intensity of the hue at any lightness level. In HSV, value ranges from 0% (black) to 100% (pure or tinted color), and saturation ranges from 0% (gray) to 100% (vivid color). HSL is more intuitive for web design because adjusting lightness directly creates tints (adding white) and shades (adding black). CSS natively supports HSL notation through hsl() and hsla() functions. HSV is more common in image editing software like Photoshop and is sometimes called HSB (Hue, Saturation, Brightness).
How do I create effective tints and shades from a base color?
Tints are created by adding white to a color (increasing lightness in HSL), while shades are created by adding black (decreasing lightness). An effective tint/shade scale typically has 5-9 steps from the darkest shade to the lightest tint, with the base color at the midpoint. In HSL terms, keep hue and saturation constant while varying lightness in even intervals. However, for more natural-looking scales, slightly decrease saturation as you lighten (tints) and slightly increase saturation or shift hue as you darken (shades). Many design systems like Tailwind CSS generate 10-step color scales (50 to 950) that follow this principle. These scales are essential for creating hover states, disabled states, borders, and backgrounds from a single brand color.
What role does color temperature play in palette selection?
Color temperature categorizes colors as warm (reds, oranges, yellows) or cool (blues, greens, purples), with this classification significantly affecting the emotional impact of a design. Warm colors feel energetic, inviting, and intimate, making them effective for food, entertainment, and lifestyle brands. Cool colors feel calm, professional, and trustworthy, which is why they dominate corporate, healthcare, and technology branding. A well-balanced palette typically combines both warm and cool tones: a cool primary with a warm accent creates dynamic contrast (like blue with orange), while a warm primary with cool accents feels grounded yet fresh. Neutral colors like gray, beige, and slate provide temperature-neutral balance between warm and cool palette elements.
How do I convert between hex, RGB, and HSL color formats?
Hex color codes represent red, green, and blue channels as two-digit hexadecimal numbers (00-FF), creating a 6-character string like #3B82F6. To convert hex to RGB, split into pairs and convert each to decimal: #3B = 59, #82 = 130, #F6 = 246, giving RGB(59, 130, 246). To convert RGB to HSL, normalize RGB values to 0-1 range, find the max and min values, calculate lightness as the average of max and min, saturation from the difference ratio, and hue from which channel is dominant. The reverse conversions follow similarly structured formulas. Color Palette Generator performs all conversions automatically. Most design tools and CSS support all three formats, with HSL being most intuitive for manual color adjustments because each parameter controls a single perceptual dimension.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer ยท Editorial policy
Related Calculators
๐งฎGradient Generator
Create CSS gradient code from color stops with linear, radial, and conic options.
๐งฎColor Contrast Checker
Check color contrast ratio against WCAG AA and AAA accessibility standards.
๐งฎBorder Radius Generator
Generate CSS border-radius code with visual preview for rounded corners and organic shapes.
๐งฎBox Shadow Generator
Generate CSS box-shadow code with visual preview for drop shadows, inset, and layered effects.
๐งฎDepth of Field Calculator
Calculate depth of field with interactive inputs and clear steps.
๐งฎHyperfocal Distance Calculator
Calculate hyperfocal distance with interactive inputs and clear steps.
๐งฎField of View Calculator (camera)
Calculate field of view (camera) with interactive inputs and clear steps.
๐งฎShutter Speed to Freeze Motion Calculator
Calculate shutter speed to stop motion with interactive inputs and clear steps.