Free HEX color palette generator
Build a color palette from one HEX code. Explore color harmonies, light and dark shades, and semantic colors, then copy the CSS variables for your website.
Quick presets
Base color (HEX)
#2563EB
Harmony colors
Primary
Color for primary actions
#2563EBSecondary
Color for supporting elements
#6C59D5Accent
Color for visual highlights
#E3AA2DBackground
Color for page backgrounds
#F7F7F8Surface
Color for card backgrounds
#E8E9EEText
Color for body text
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}What is a HEX color palette generator?
A HEX color palette generator creates related colors from a single HEX code. This tool generates color harmonies, a tonal scale, and six semantic colors, with CSS variables you can copy.
How to use the color palette generator from HEX
Choose a base color, review the generated palette, and copy the values you need. Enter a HEX code, use the color picker, or try a random color to get started.
- Step 1
Choose your base color
Enter a valid HEX code, choose a color with the picker, or select Random color. Click Generate palette after typing a code.
- Step 2
Review your color palette
Review your base color alongside analogous, complementary, and triadic colors. Use these combinations to explore different directions for your website or brand.
- Step 3
Explore shades and color roles
Explore the tonal scale from 50 to 900 and the six semantic colors. Choose shades and roles for different parts of your interface.
- Step 4
Copy colors and CSS variables
Copy individual color values or the generated CSS variables. Paste them into your stylesheet to use the palette in your website or design system.
Common uses for a color palette generator
Use your palette to plan website colors, define reusable styles, and keep your brand consistent. Here are six ways to apply the generated colors.
Backgrounds and borders
Choose light and dark shades from the tonal scale for page backgrounds, card surfaces, and borders throughout your website design.
Hover states
Explore shades for button and link hover states. Check each combination in your interface before deciding which colors to use.
Product interfaces
Use the primary, secondary, accent, background, surface, and text colors to assign consistent color roles across your entire product interface.
Brand palettes
Start with your main brand color and explore analogous, complementary, and triadic combinations to guide color choices for your website.
Design systems
Copy named color roles and tonal shades into your design system to give reusable components a consistent set of color values.
CSS stylesheets
Paste the generated CSS variables into your stylesheet, then reference them in your styles to apply colors across your website.
Why use this HEX color palette generator?
This free color palette generator brings color harmonies, tonal shades, and semantic roles together. Copy individual values or CSS variables to use in your project.
Related color combinations
Explore analogous, complementary, and triadic colors from your base HEX code. Use them to compare color combinations for your website.
Light and dark tonal shades
Explore a tonal scale from 50 to 900. Choose light and dark shades for page backgrounds, borders, and different elements in your interface.
Colors with clear roles
Get primary, secondary, accent, background, surface, and text colors. Use these six roles to keep color choices consistent across your website.
Copy-ready CSS variables
Copy the semantic colors and tonal scale as CSS variables. Paste them into your stylesheet to use the generated colors across your website.
All the tools you need
to build your brand online
AI website builder
Build your site with our AI website builder. Manage, promote, and grow your online presence your way.
AI business name generator
Find creative business names and instantly check domain availability.GEO score checker
Analyze your website's AI discoverability and uncover optimization opportunities.AI business card generator
Design clean, professional business cards for your brand.Email signature generator
Build a professional email signature that represents your business.HEX color palette generator
Turn a single color into a complete brand palette.Lorem ipsum generator
Create placeholder text instantly for your designs, mockups, and prototypes.Paystub generator
Create a pay stub with earnings and deductions, then download a PDF.AI mission statement generator
Turn your business purpose and values into mission statement drafts with AI.Frequently asked questions
A HEX color palette generator creates related colors from a single HEX code. This tool generates color harmonies, a tonal scale, and six semantic colors, with CSS variables you can copy.
Enter a valid three-digit or six-digit HEX code and click Generate palette. You can also use the color picker, choose a preset, or select Random color.
The tonal scale provides light and dark shades numbered 50 to 900. Use them as starting points for backgrounds, borders, and hover states. Check text contrast in your final design.
Click Copy in the CSS variables panel, then paste the variables into your stylesheet. Reference them in your CSS rules to apply the semantic colors and tonal shades.