Try it now, free
Your base colour is marked on the scale. Click any swatch to drive the brand preview — dark colours get white text.
This is how your palette looks in a real UI. Click any swatch to update this preview.
How it works
Pick a base colour
Use the picker or type a hex code. That colour is marked as Base in the palette and anchors Shades or your chosen harmony.
Choose a mode
Shades for a light-to-dark scale of one hue. Analogous for soft neighbours, Complementary for bold opposites, Triadic for three accents, Split-Comp for balanced contrast.
Preview and export
Click a swatch to update the brand preview. Copy HEX/RGB/HSL, then export CSS variables or Tailwind config for your project.
Why use Ozaar Color Palette Generator?
Full shade scale from any colour
Default Shades mode builds an 11-step tint → shade ramp (50–950) of your hex — same hue from near-white to near-black, ready for UI systems.
Colour harmony modes explained simply
Analogous = neighbours on the wheel. Complementary = opposite contrast. Triadic = three evenly spaced hues. Split-Comp = softer contrast than pure complementary.
Base marker + live brand preview
Your base colour is labelled on every palette. Click any swatch to drive the preview header and button; dark backgrounds switch text to white for readability.
CSS & Tailwind export
Copy shade ramps as --color-50…950 CSS variables or a Tailwind brand colour object. HEX, RGB, and HSL copy from each swatch.
Real-world use cases
Brand colour systems
Start from a primary brand hex and generate a full 50–950 shade ladder for buttons, surfaces, and text — then export straight into your design tokens.
Try it for this →Brand Designer
Frontend Developer
UI component theming
Drop Tailwind or CSS exports into your config. Use Shades for neutrals of one hue, or Complementary / Split-Comp when you need a clear accent.
Try it for this →Marketing & creative
Try Analogous for calm campaigns or Triadic when you need three vivid accents for social posts and decks — no design suite required.
Try it for this →Marketing Designer
What is a Color Palette Generator?
A colour palette generator helps you turn one hex colour into a usable set for brands and UIs. Ozaar starts with Shades mode: an 11-step light-to-dark scale (50–950) of the same hue — the format developers expect for buttons, surfaces, and text.
You can also explore colour-wheel harmonies. Analogous uses neighbouring hues for a soft look. Complementary uses the opposite hue for strong contrast. Triadic spaces three hues evenly. Split-complementary uses the two colours beside the opposite hue for contrast that is usually easier to live with than pure complementary.
Your base colour is labelled in every mode. Click a swatch to update the live brand preview; dark selections switch text to white. Export CSS variables or a Tailwind colour object — all in the browser, with no account.
How does Color Palette Generator work?
The tool converts your base hex to HSL. Shades mode keeps hue (and adjusts saturation slightly at the extremes) while stepping lightness from near-white to near-black. Harmony modes rotate hue on the wheel: complementary ≈ 180°, triadic ≈ 120° apart, analogous ≈ ±30–60°, split-complementary ≈ 150° and 210°.
Exports are built client-side. Shades mode outputs --color-50…950 (and matching Tailwind keys). Harmony modes output numbered colours. HEX, RGB, and HSL remain copyable from each card.
Why use a browser-based Color Palette Generator?
You get a shade ladder and harmony options in one place — useful for token systems and for exploring accents — without opening design software or signing up.
The live preview shows how a chosen swatch behaves as a header and button colour, including automatic white text on dark backgrounds, so you can judge readability before you export.
You might also want to compress brand assets or apply your colour palette to a resume using our free browser tools.
Frequently asked questions
Start using Color Palette Generator, it's free.
No signup. No download. No limits.