How to Create a Color Palette From a Hex Code
You have a brand color but need a full palette. Here's how to generate matching colors from a single hex code.
Quick Answer
Enter your hex color into the free palette generator at dotsapps.com. It creates complementary, analogous, triadic, and split-complementary palettes. Copy hex codes with one click.
How to Generate a Color Palette From One Color
Open the color palette generator at dotsapps.com. Enter your starting hex code (like #3B82F6). The tool instantly generates multiple color palettes based on color theory.
You get several palette types:
- Complementary: Colors opposite each other on the color wheel. High contrast.
- Analogous: Colors next to each other on the wheel. Harmonious and easy on the eyes.
- Triadic: Three colors evenly spaced on the wheel. Vibrant and balanced.
- Split-complementary: A color plus the two colors adjacent to its complement. Balanced contrast.
Choosing the Right Color Scheme for Your Project
Different palette types work for different purposes:
- Websites and apps: Analogous palettes feel calm and professional. Use one color as primary, others as accents.
- Marketing materials: Complementary palettes create strong contrast and grab attention.
- Dashboards: Triadic palettes give you three distinct colors for data categories.
- Branding: Start with your brand color and use split-complementary for supporting colors.
Most designs use 3–5 colors total. One primary, one secondary, and one or two accents. Keep it simple.
How to Use Your Color Palette in CSS
Once you have your palette, define the colors as CSS custom properties for easy reuse:
:root {
--color-primary: #3B82F6;
--color-secondary: #F6823B;
--color-accent: #82F63B;
}
Then use them throughout your styles: color: var(--color-primary);
This makes it easy to adjust your palette later — change the value in one place and it updates everywhere.
Understanding Color Accessibility
When building a palette, make sure your text colors have enough contrast against their backgrounds. The Web Content Accessibility Guidelines (WCAG) recommend:
- 4.5:1 contrast ratio for normal text
- 3:1 contrast ratio for large text (18px+ bold or 24px+ regular)
Light text on a light background or dark text on a dark background fails these ratios. Test your palette combinations to make sure text is readable for everyone.
How to Do It: Step-by-Step
- 1
Open the free Color Palette Generator at dotsapps.com.
- 2
Enter your starting hex color code (e.g., #3B82F6).
- 3
Browse the generated palette types (complementary, analogous, triadic).
- 4
Click any color to copy its hex code.
- 5
Use the hex codes in your CSS, design tool, or branding guide.
Frequently Asked Questions
What is a hex color code?
A hex code is a 6-character code that represents a color using red, green, and blue values. For example, #FF0000 is pure red and #3B82F6 is a blue shade.
How many colors should a color palette have?
Most designs use 3–5 colors: one primary, one secondary, one or two accents, and a neutral. Too many colors make a design look chaotic.
What are complementary colors?
Colors directly opposite each other on the color wheel. For example, blue and orange. They create strong contrast and make each other look more vibrant.
Can I start with an RGB or HSL value instead of hex?
The tool accepts hex codes. Convert your RGB value to hex first — for example, rgb(59, 130, 246) is #3B82F6.
Ready to Try It?
Color Palette Generator is free, private, and works right in your browser. No sign-up needed.
Open Color Palette Generator