Guides JP

Color Palette Generator

Pick a single base color and instantly generate harmonious color palettes based on color theory. Copy HEX/RGB with one click, view tint/shade variations and contrast checks — all processing happens in your browser.

Last updated: 2026/10/16 Design Feedback & bug reports
Color data is never sent to a server
Base Color
Color Scheme

Generated Palette

Click any color to copy its HEX code

Lock a color with the padlock icon to keep it fixed when you regenerate or change the scheme.

Lightness Variations (Tint / Shade)

Tints lighten the base color toward white and shades darken it toward black. Click any to copy.

Export Palette

Export the current palette as CSS variables, SCSS variables, JSON, a JavaScript array, or a HEX list, then copy it to paste straight into your design tools or code.

How to Use

1

Pick a Base Color

Enter a base color with the color picker or a HEX code. You can also use the Random button to pick one.

2

Choose a Scheme

Select complementary, analogous, triadic, split-complementary, or monochrome to instantly generate a harmonious palette.

3

Copy and Use

Click any color to copy its HEX, or use "Copy All" to grab the whole palette at once.

About the Color Palette Generator

A web tool that generates harmonious color schemes from a single base color using the color wheel. It supports the major color theories — complementary, analogous, triadic, split-complementary, and monochrome — and lets you view and copy each color's HEX/RGB values, lock individual colors, explore tint/shade variations, check contrast ratios against black and white text, and export the palette to CSS variables and more. All calculations happen entirely in your browser, so your color data is never sent to any server.

For finer adjustments, also try the Color Code Converter to convert colors between formats, the Color Mixer to blend two colors, and the Color Shades Generator to expand light and dark tones. Check readability with the Color Contrast Checker, and learn the theory behind schemes in our guide to color palettes.

Features

  • 5 Color TheoriesGenerate complementary, analogous, triadic, split-complementary, and monochrome palettes with one click.
  • Copy HEX/RGBView each color's HEX and RGB values, and copy the code to your clipboard with a single click.
  • Tint & ContrastSee tint/shade lightness variations and contrast ratios against black and white text at a glance.
  • Privacy ProtectedAll processing happens in your browser. Color data is never sent to servers.

Use Cases

  • Designing website and landing page color schemes
  • Choosing logo and brand colors
  • Selecting accent colors for UI design
  • Building consistent palettes for slides and documents
  • Brainstorming color combinations for illustration and graphics

FAQ

Is the color palette generator free to use?
Yes, it is completely free. No registration or installation is required — just open it in your browser. There is no limit on how many palettes you can generate.
What is the difference between complementary, analogous, and triadic?
Complementary colors sit opposite (180°) on the color wheel for strong contrast. Analogous colors are neighbors (around ±30°) for a cohesive look. Triadic colors are evenly spaced (120° apart) for a vivid, balanced scheme. Split-complementary uses the two colors adjacent to the complement, keeping contrast while staying harmonious.
How do I copy HEX and RGB values?
Click any generated color card to copy its HEX code to your clipboard. The RGB value is also shown on each card, so you can paste it directly into design tools or CSS.
What is the contrast indicator for?
Each color shows whether black or white text is more readable on it, along with the contrast ratio (WCAG). This helps you judge readability and accessibility when using a color as text or background.
Are the colors I enter or generate saved anywhere?
No, the colors you enter or generate are never sent to or stored on our servers. All processing happens locally in your browser (client-side), so you can use it with peace of mind.
How does the color lock feature work?
Click the padlock icon on any color card to lock that color. Locked colors stay fixed when you press the "Random" button or switch color schemes, so you can keep a color you like and experiment only with the others. Click the icon again to unlock it.
Can I export the palette to CSS or SCSS?
Yes. From "Export Palette" you can choose CSS variables (custom properties on :root), SCSS variables, a JSON array, a JavaScript array, or a HEX list, then copy the generated code with one click and paste it straight into your stylesheet or code.

Related Tools

px to vw Converter Convert CSS px to vw. Bulk CSS conversion supported px to em/rem Converter Convert CSS px to em/rem. Bulk CSS conversion supported Aspect Ratio Calculator Calculate simplified aspect ratio from dimensions Line Height Calculator Calculate line-height ratio from font size and leading CSS Gradient Generator Visually create Linear, Radial & Conic CSS gradients

Popular Tools

Character Counter Count characters, words, and lines in real-time JSON Formatter Format and validate JSON with syntax highlighting QR Code Generator Create custom QR codes with logo, colors & styles Password Generator Generate secure random passwords with one click Base64 Encoder Encode and decode text or files to Base64 IP Address Checker Check your global IP address

Related Guides

Web Color Basics: HEX, RGB, HSL Conversion, Palettes, and Contrast A beginner-friendly guide to web color: what HEX, RGB, and HSL mean and how they convert, opacity (alpha), WCAG contrast ratios for accessible color, and how to build a color palette. Color Theory Basics and How to Build a Palette: Wheel, Complements, 70:25:5 A friendly guide to color basics: reading the color wheel, schemes such as analogous, complementary, and triadic, the 70:25:5 ratio of base, main, and accent, how to align tone (lightness and saturation), and the difference between HEX, RGB, and HSL for practical web palettes. What Is HSL? Hue, Saturation, Lightness vs RGB/HEX and Color Tips Learn what HSL is from the ground up: the meaning of hue (H), saturation (S), and lightness (L), how it differs from RGB and HEX, why it is convenient for adjusting color schemes, how to build tones by changing lightness and saturation, and the hsl() notation in CSS.