Color Palette Generator

Generate harmonious color palettes from a base color

🔒 100% di browser🆓 Gratis selamanya⚡ Tanpa signup
Catatan: Interface tool di bawah saat ini baru tersedia dalam bahasa Inggris. Kami sedang menerjemahkan UI satu per satu. Lihat tool ini dalam bahasa Inggris →

Click any value to copy.

Cara pakai

  1. 1
    Pick a base color

    Use the color picker or type a HEX code.

  2. 2
    Choose a harmony

    Complementary, analogous, triadic, tetradic, split-complementary, or monochromatic.

  3. 3
    Copy any color

    One-click copy in HEX, RGB, or HSL for direct use in CSS, Figma, or Tailwind.

Tentang Color Palette Generator

Free online color palette generator. Enter any base color and get a harmonious palette - complementary, analogous, triadic, tetradic, or monochromatic. Copy any color as HEX, RGB, or HSL. Perfect for designers and developers building brand systems. Color Palette Generator di 712 Tools jalan sepenuhnya di browser kamu pakai JavaScript API native - tidak ada server yang pernah melihat data kamu. Artinya hasil instan, privasi penuh, dan tanpa batas upload.

Buat sesi debug, quick sanity check, atau incident produksi - tool ini gratis dipakai sebanyak yang kamu butuh. Tanpa watermark, tanpa signup, dan tanpa ads di dalam tool.

Pertanyaan yang sering ditanyakan

What is 'complementary' vs 'analogous'?

Complementary picks the color opposite on the color wheel (high contrast). Analogous picks colors next to it (soft, cohesive).

Which harmony should I use for a brand?

Analogous or monochromatic reads as calm and cohesive. Complementary or triadic reads as bold and energetic.

Does it check WCAG contrast?

Not yet - but you can copy any two colors and paste them into a contrast checker like WebAIM's.

Is my base color uploaded?

No. Palette math runs entirely in your browser.

Baca lebih lanjut

5 menit baca

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

5 menit baca

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

4 menit baca

CSS box-shadow patterns that look professional (not cheap)

A single 5px shadow makes any UI look like a bootstrapped 2015 landing page. Here are the layered-shadow patterns that modern design systems use - Material, Tailwind, Apple.

4 menit baca

CSS gradient patterns that actually look good (and the two that don't)

Two colors and a 45° angle is not a gradient - it's a shortcut to a design that looks like every SaaS site from 2018. Here's how to build ones that don't.

Tools terkait

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

CSS Gradient

Design linear, radial, and conic CSS gradients with live preview

Box Shadow

Design multi-layer CSS box-shadows with live preview

Contrast Checker

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

Glassmorphism

Design frosted-glass CSS cards with live preview and copy-ready code

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine