# HEX Color Palette Generator

Start from one HEX color and generate a complete palette with tonal scale, harmony colors, semantic tokens, and copy-ready CSS variables.

## Base Color (HEX)

Supports #RGB or #RRGGBB, for example #0EA5E9

## Quick Presets

### Palette Overview

See your base color relationships and build a consistent system faster.

**Base Color (HEX)**  
`#2563EB`  
Hue: 221  
Saturation: 83%  
Lightness: 53%

### Harmony Colors

- **Analogous A**  
  `#45C7E4`
- **Analogous B**  
  `#6345E4`
- **Complementary**  
  `#E6AB2A`
- **Triadic A**  
  `#E2386D`
- **Triadic B**  
  `#6DE238`

### Tonal Scale (50 - 900)

Light-to-dark shades ready for backgrounds, borders, states, and text contrast.

| Shade | HEX Code  |
|-------|-----------|
| 50    | `#F4F6FB` |
| 100   | `#D1DBF1` |
| 200   | `#ABBFEB` |
| 300   | `#82A2E7` |
| 400   | `#5583E8` |
| 500   | `#2563EB` |
| 600   | `#124BC7` |
| 700   | `#0D3794` |
| 800   | `#082462` |
| 900   | `#04112F` |

### Semantic Tokens

Use these roles directly in UI to keep product visuals and brand style consistent.

- **Primary**  
  Main brand and CTA color  
  `#2563EB`
- **Secondary**  
  Supporting brand color  
  `#6C59D5`
- **Accent**  
  High-contrast highlights  
  `#E3AA2D`
- **Background**  
  Page-level background tone  
  `#F7F7F8`
- **Surface**  
  Cards and surface containers  
  `#E8E9EE`
- **Text**  
  Default body text color  
  `#1B212C`

### CSS Variables

Copy once and drop into your stylesheet.

```
: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;
}
```

## How to Build a Complete Color System from One HEX Code

This tool turns a base HEX color into a structured palette in real time. You can manually enter a HEX value, pick from the color selector, or generate a random color to explore new directions. Instantly, you'll see a full Palette Overview with harmony colors, tonal scales, semantic tokens, and ready-to-copy CSS variables.

### Steps to Generate Color Palette

1. **Enter or Select a Base Color**  
   Input a HEX color code directly, choose a color from the picker, or click "Random Color" to generate one automatically.
2. **View the Palette Overview**  
   See your base color alongside automatically generated harmony colors that complement and extend your design.
3. **Explore Tonal Scale & Semantic Tokens**  
   Review the tonal scale (50–900) with light-to-dark shades ideal for backgrounds, borders, states, and text contrast. Semantic tokens are also generated for practical UI usage.
4. **Copy CSS Variables or Tokens**  
   Copy the generated CSS variables or semantic roles with one click and paste them directly into your stylesheet.

## Structured Color Palettes for Real Projects

This HEX Color Palette Generator goes beyond basic swatches. It creates structured, system-ready palettes that can be used immediately in product interfaces, design systems, and branding workflows.

- **Harmony-Based Color Generation**
  Automatically generate complementary harmony colors that maintain visual balance and contrast.
- **Tonal Scale (50–900)**
  Light-to-dark shades optimized for UI layers, states, backgrounds, and readable text contrast.
- **Semantic Tokens for UI Consistency**
  Predefined roles help maintain consistent usage across primary actions, success states, warnings, and neutral elements.
- **Copy-Ready CSS Variables**
  Export your entire palette as CSS variables with one click—ready for implementation in your stylesheet.

## Frequently Asked Questions

### What is a HEX color palette generator?

It's a tool that creates a complete color palette based on a single HEX color value, including tonal variations and harmony colors.

### Can I generate palettes from any HEX code?

Yes. You can input any valid HEX color, select one manually, or generate a random color.

### What is the tonal scale used for?

The tonal scale (50–900) provides structured shades for backgrounds, borders, hover states, and accessible text contrast.

### How can I use the generated CSS variables?

Simply copy the variables and paste them into your CSS file or design system configuration.

## Create a Scalable Color Palette in Seconds

Generate Your Color Palette Now