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

Base Color (HEX)

Quick Presets

Palette Overview

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

Base Color (HEX)

#2563EB

Hue: 221Saturation: 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.

#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;
}